@skippr/live-agent-sdk 0.27.0 → 0.29.0

package/dist/esm/lib-exports.js

@@ -1,6 +1,14 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // src/components/LiveAgent.tsx
 import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
-import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect14, useMemo as useMemo5, useRef as useRef8, useState as useState9 } from "react";
 
 // src/context/LiveAgentContext.tsx
 import { createContext } from "react";
@@ -165,7 +173,14 @@ async function exchangeForBearerToken(appKey, userToken) {
   const { token } = await resp.json();
   return token;
 }
-function useSession({ agentId, authToken, appKey, userToken }) {
+function useSession({
+  agentId,
+  captureMode = "screenshare",
+  agentControls,
+  authToken,
+  appKey,
+  userToken
+}) {
   const [connection, setConnection] = useState2(null);
   const [shouldConnect, setShouldConnect] = useState2(false);
   const [isStarting, setIsStarting] = useState2(false);
@@ -193,6 +208,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
       stale = true;
     };
   }, [authToken, appKey, userToken]);
+  const highlightOptIn = agentControls?.highlight;
   const startSession = useCallback2(async () => {
     if (!bearerToken) {
       setError("No auth token available");
@@ -202,20 +218,27 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     setError("");
     setErrorCode(null);
     let screenStream = null;
-    try {
-      screenStream = await navigator.mediaDevices.getDisplayMedia({
-        video: { displaySurface: "browser" }
-      });
-    } catch {
-      screenStream = null;
+    if (captureMode === "screenshare") {
+      try {
+        screenStream = await navigator.mediaDevices.getDisplayMedia({
+          video: { displaySurface: "browser" }
+        });
+      } catch {
+        screenStream = null;
+      }
     }
+    const requestAgentControls = highlightOptIn === true ? { highlight: true } : undefined;
     const headers = { Authorization: `Bearer ${bearerToken}` };
     try {
       const createResp = await fetch(`${API_URL2}/v1/sessions`, {
         method: "POST",
         credentials: "omit",
         headers: { "Content-Type": "application/json", ...headers },
-        body: JSON.stringify({ agentId })
+        body: JSON.stringify({
+          agentId,
+          captureMode,
+          agentControls: requestAgentControls
+        })
       });
       if (!createResp.ok) {
         const body = await createResp.json().catch(() => null);
@@ -250,7 +273,7 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     } finally {
       setIsStarting(false);
     }
-  }, [agentId, bearerToken]);
+  }, [agentId, captureMode, highlightOptIn, bearerToken]);
   const disconnect = useCallback2(async () => {
     if (sessionId && bearerToken) {
       try {
@@ -283,6 +306,16 @@ function useSession({ agentId, authToken, appKey, userToken }) {
     pendingScreenStream
   };
 }
+
+// src/lib/constants.ts
+var SIDEBAR_WIDTH = 360;
+var WIDGET_ROOT_ID = "skippr-sdk-root";
+var REF_ATTR = "data-skippr-ref";
+var PRIVATE_ATTR = "data-skippr-private";
+var DOM_SNAPSHOT_TOPIC = "skippr.dom-snapshot";
+var DOM_EVENTS_TOPIC = "skippr.dom-events";
+var HIGHLIGHT_TOPIC = "skippr.highlight";
+var NAME_MAX_CHARS = 80;
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
 
@@ -513,7 +546,7 @@ var __iconNode16 = [
 ];
 var Send = createLucideIcon("send", __iconNode16);
 // src/hooks/useAgentVoiceState.ts
-import { useVoiceAssistant } from "@livekit/components-react";
+import { useVoiceAssistant } from "@livekit/components-react/hooks";
 function useAgentVoiceState() {
   const { state } = useVoiceAssistant();
   return {
@@ -535,7 +568,7 @@ function useLiveAgent() {
 }
 
 // src/hooks/useMediaControls.ts
-import { useLocalParticipant } from "@livekit/components-react";
+import { useLocalParticipant } from "@livekit/components-react/hooks";
 import { ScreenSharePresets } from "livekit-client";
 import { useCallback as useCallback3 } from "react";
 var SCREEN_SHARE_OPTIONS = {
@@ -682,7 +715,7 @@ function SpeakingBars() {
 }
 
 // src/components/AutoStartMedia.tsx
-import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react";
+import { useConnectionState, useLocalParticipant as useLocalParticipant2 } from "@livekit/components-react/hooks";
 import { ConnectionState, Track } from "livekit-client";
 import { useEffect as useEffect3, useRef } from "react";
 function AutoStartMedia({ pendingScreenStream }) {
@@ -711,8 +744,1105 @@ function AutoStartMedia({ pendingScreenStream }) {
   return null;
 }
 
+// src/components/DomCapture.tsx
+import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react/hooks";
+import { ConnectionState as ConnectionState2, ScreenSharePresets as ScreenSharePresets2, Track as Track2 } from "livekit-client";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+
+// src/capture/a11yUtils.ts
+var ROLE_BY_TAG = {
+  a: "link",
+  button: "button",
+  input: "input",
+  select: "select",
+  textarea: "textarea",
+  label: "label",
+  nav: "navigation",
+  main: "main",
+  header: "header",
+  footer: "footer",
+  aside: "complementary",
+  form: "form",
+  h1: "heading",
+  h2: "heading",
+  h3: "heading",
+  h4: "heading",
+  h5: "heading",
+  h6: "heading",
+  img: "image",
+  ul: "list",
+  ol: "list",
+  li: "listitem",
+  table: "table",
+  tr: "row",
+  td: "cell",
+  th: "columnheader",
+  video: "video",
+  iframe: "iframe",
+  canvas: "canvas",
+  audio: "audio",
+  embed: "embed",
+  object: "object"
+};
+function inferRole(element) {
+  const explicitRole = element.getAttribute("role");
+  if (explicitRole)
+    return explicitRole;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input") {
+    const inputType = element.type;
+    if (inputType === "checkbox")
+      return "checkbox";
+    if (inputType === "radio")
+      return "radio";
+    if (inputType === "submit" || inputType === "button")
+      return "button";
+    return "input";
+  }
+  return ROLE_BY_TAG[tagName] ?? null;
+}
+function accessibleName(element, options = {}) {
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel)
+    return ariaLabel.trim().slice(0, NAME_MAX_CHARS);
+  if (!options.quick) {
+    const labelledBy = element.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const labelElement = document.getElementById(labelledBy);
+      if (labelElement)
+        return (labelElement.textContent || "").trim().slice(0, NAME_MAX_CHARS);
+    }
+    if (element.tagName === "INPUT" || element.tagName === "SELECT" || element.tagName === "TEXTAREA") {
+      const elementId = element.id;
+      if (elementId) {
+        const associatedLabel = document.querySelector(`label[for="${CSS.escape(elementId)}"]`);
+        if (associatedLabel?.textContent) {
+          return associatedLabel.textContent.trim().slice(0, NAME_MAX_CHARS);
+        }
+      }
+      const placeholder = element.getAttribute("placeholder");
+      if (placeholder)
+        return placeholder.trim().slice(0, NAME_MAX_CHARS);
+    }
+  }
+  if (element.tagName === "IMG") {
+    const altText = element.getAttribute("alt");
+    if (altText)
+      return altText.trim().slice(0, NAME_MAX_CHARS);
+  }
+  const titleAttr = element.getAttribute("title");
+  if (titleAttr)
+    return titleAttr.trim().slice(0, NAME_MAX_CHARS);
+  const textContent = (element.textContent || "").replace(/\s+/g, " ").trim();
+  if (textContent)
+    return textContent.slice(0, NAME_MAX_CHARS);
+  return "";
+}
+
+// src/capture/a11yTree.ts
+var REF_PREFIX = "r-";
+var VALUE_MAX_CHARS = 80;
+var HREF_MAX_CHARS = 60;
+var PAGE_CONTENT_MAX_BYTES = 14000;
+var NODE_LIMIT = 1500;
+var SENSITIVE_IFRAME_HOSTS = [
+  "js.stripe.com",
+  "checkout.stripe.com",
+  "connect.stripe.com",
+  "plaid.com",
+  "production.plaid.com",
+  "cdn.plaid.com",
+  "auth0.com",
+  "login.auth0.com",
+  "recaptcha.net",
+  "www.google.com",
+  "hcaptcha.com",
+  "newassets.hcaptcha.com",
+  "challenges.cloudflare.com"
+];
+var MASK_AUTOCOMPLETE_VALUES = new Set([
+  "cc-number",
+  "cc-exp",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-csc",
+  "cc-name",
+  "cc-given-name",
+  "cc-family-name",
+  "current-password",
+  "new-password",
+  "one-time-code"
+]);
+var MASK_INPUT_TYPES = new Set(["password", "hidden"]);
+var MASK_NAME_PATTERN = /password|secret|token|api[_-]?key|ssn|tax[_-]?id|social[_-]?security|cvv|cvc|pin/i;
+var refCounter = 0;
+function generateNextRef() {
+  refCounter += 1;
+  return `${REF_PREFIX}${refCounter}`;
+}
+function advanceCounterPastExisting(ref) {
+  const parsedRefNumber = Number.parseInt(ref.slice(REF_PREFIX.length), 10);
+  if (Number.isFinite(parsedRefNumber) && parsedRefNumber > refCounter) {
+    refCounter = parsedRefNumber;
+  }
+}
+function intersectsViewport(rect, viewportWidth, viewportHeight) {
+  if (rect.width <= 0 || rect.height <= 0)
+    return false;
+  if (rect.bottom <= 0 || rect.top >= viewportHeight)
+    return false;
+  if (rect.right <= 0 || rect.left >= viewportWidth)
+    return false;
+  return true;
+}
+function isVisible(element, rect) {
+  if (!intersectsViewport(rect, window.innerWidth, window.innerHeight))
+    return false;
+  const style = window.getComputedStyle(element);
+  if (style.visibility === "hidden" || style.display === "none")
+    return false;
+  if (Number.parseFloat(style.opacity || "1") <= 0.01)
+    return false;
+  return true;
+}
+function isInteractive(element, role) {
+  if (role && role !== "heading" && role !== "image" && role !== "list" && role !== "listitem") {
+    const interactiveRoles = [
+      "button",
+      "link",
+      "input",
+      "select",
+      "textarea",
+      "checkbox",
+      "radio",
+      "tab",
+      "menuitem",
+      "option",
+      "switch",
+      "slider"
+    ];
+    if (interactiveRoles.includes(role))
+      return true;
+  }
+  if (element.tabIndex >= 0)
+    return true;
+  if (element.hasAttribute("onclick") || element.hasAttribute("contenteditable"))
+    return true;
+  return false;
+}
+function isBlindRegion(role) {
+  return role === "video" || role === "iframe" || role === "canvas" || role === "audio" || role === "embed" || role === "object";
+}
+function getIframeHost(element) {
+  const src = element.getAttribute("src");
+  if (!src)
+    return null;
+  try {
+    return new URL(src, window.location.href).host;
+  } catch {
+    return null;
+  }
+}
+function isSensitiveIframe(element) {
+  const host = getIframeHost(element);
+  if (!host)
+    return false;
+  return SENSITIVE_IFRAME_HOSTS.some((sensitiveHost) => host === sensitiveHost || host.endsWith(`.${sensitiveHost}`));
+}
+function isSameOriginIframe(element) {
+  const src = element.getAttribute("src");
+  if (!src)
+    return true;
+  try {
+    return new URL(src, window.location.href).origin === window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function nearestHeadingText(element) {
+  let currentNode = element;
+  while (currentNode && currentNode !== document.body) {
+    let previousSibling = currentNode.previousElementSibling;
+    while (previousSibling) {
+      if (/^H[1-6]$/.test(previousSibling.tagName) && previousSibling.textContent) {
+        return previousSibling.textContent.trim().slice(0, NAME_MAX_CHARS);
+      }
+      previousSibling = previousSibling.previousElementSibling;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return null;
+}
+function shouldMaskValue(input) {
+  if (input.tagName === "INPUT") {
+    const inputElement = input;
+    if (MASK_INPUT_TYPES.has(inputElement.type))
+      return true;
+    const autocompleteAttr = (inputElement.getAttribute("autocomplete") || "").toLowerCase().trim();
+    if (MASK_AUTOCOMPLETE_VALUES.has(autocompleteAttr))
+      return true;
+  }
+  const fieldName = (input.getAttribute("name") || "").trim();
+  const fieldId = (input.getAttribute("id") || "").trim();
+  if (MASK_NAME_PATTERN.test(fieldName) || MASK_NAME_PATTERN.test(fieldId))
+    return true;
+  return false;
+}
+function escapeAttributeValue(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"").replace(/[\r\n]+/g, " ");
+}
+function extractAttrs(element, role) {
+  const attributes = [];
+  if (role === "link") {
+    const href = element.getAttribute("href");
+    if (href)
+      attributes.push(`href="${escapeAttributeValue(href.slice(0, HREF_MAX_CHARS))}"`);
+  }
+  if (role === "input" || role === "checkbox" || role === "radio") {
+    const input = element;
+    if (input.type && input.type !== "text")
+      attributes.push(`type="${input.type}"`);
+    if (shouldMaskValue(input)) {
+      attributes.push("valueMasked");
+    } else if (input.value && role === "input") {
+      attributes.push(`value="${escapeAttributeValue(input.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+    if (input.checked)
+      attributes.push("checked");
+  }
+  if (role === "textarea") {
+    const textarea = element;
+    if (shouldMaskValue(textarea)) {
+      attributes.push("valueMasked");
+    } else if (textarea.value) {
+      attributes.push(`value="${escapeAttributeValue(textarea.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+  }
+  if (role === "select") {
+    const select = element;
+    const selectedOption = select.options[select.selectedIndex];
+    if (selectedOption?.value?.trim()) {
+      attributes.push(`selected="${escapeAttributeValue(selectedOption.value.slice(0, VALUE_MAX_CHARS))}"`);
+    }
+  }
+  if (role === "heading") {
+    const headingLevel = element.tagName.match(/^H([1-6])$/)?.[1];
+    if (headingLevel)
+      attributes.push(`level="${headingLevel}"`);
+  }
+  if (role === "video" || role === "audio") {
+    const mediaElement = element;
+    try {
+      if (Number.isFinite(mediaElement.currentTime)) {
+        attributes.push(`currentTime="${mediaElement.currentTime.toFixed(1)}"`);
+      }
+      if (Number.isFinite(mediaElement.duration) && mediaElement.duration > 0) {
+        attributes.push(`duration="${mediaElement.duration.toFixed(1)}"`);
+      }
+      attributes.push(mediaElement.paused ? "paused" : "playing");
+      if (mediaElement.muted)
+        attributes.push("muted");
+      const mediaSrc = mediaElement.currentSrc || mediaElement.getAttribute("src");
+      if (mediaSrc) {
+        try {
+          attributes.push(`srcHost="${new URL(mediaSrc, window.location.href).host}"`);
+        } catch {}
+      }
+    } catch {}
+  }
+  if (role === "iframe") {
+    const host = getIframeHost(element);
+    if (host)
+      attributes.push(`srcHost="${host}"`);
+    if (isSensitiveIframe(element)) {
+      attributes.push("sensitive");
+    } else if (!isSameOriginIframe(element)) {
+      attributes.push("cross-origin");
+    }
+    const iframeRect = element.getBoundingClientRect();
+    attributes.push(`size="${Math.round(iframeRect.width)}x${Math.round(iframeRect.height)}"`);
+  }
+  if (role === "canvas") {
+    const canvas = element;
+    attributes.push(`size="${canvas.width}x${canvas.height}"`);
+    const heading = nearestHeadingText(element);
+    if (heading)
+      attributes.push(`nearestHeading="${escapeAttributeValue(heading)}"`);
+  }
+  if (role === "image") {
+    const image = element;
+    const imageSrc = image.getAttribute("src") || "";
+    if (/\.gif(\?|$)/i.test(imageSrc))
+      attributes.push("animated");
+  }
+  const isNativelyDisabled = "disabled" in element && element.disabled === true;
+  if (isNativelyDisabled || element.getAttribute("aria-disabled") === "true") {
+    attributes.push("disabled");
+  }
+  return attributes;
+}
+function ensureStableRef(element) {
+  const existingRef = element.getAttribute(REF_ATTR);
+  if (existingRef) {
+    advanceCounterPastExisting(existingRef);
+    return existingRef;
+  }
+  const newRef = generateNextRef();
+  element.setAttribute(REF_ATTR, newRef);
+  return newRef;
+}
+function formatNodeAsLine(entry) {
+  const indent = "  ".repeat(entry.depth);
+  const namePart = entry.name ? ` "${escapeAttributeValue(entry.name)}"` : "";
+  const attrsPart = entry.attrs.length > 0 ? ` ${entry.attrs.join(" ")}` : "";
+  return `${indent}${entry.role}${namePart} ${entry.ref}${attrsPart}`;
+}
+function shouldSkipSubtree(element) {
+  if (element.id === WIDGET_ROOT_ID)
+    return true;
+  if (element.hasAttribute(PRIVATE_ATTR))
+    return true;
+  const tagName = element.tagName;
+  if (tagName === "SCRIPT" || tagName === "STYLE" || tagName === "NOSCRIPT")
+    return true;
+  return false;
+}
+function shouldEmitElement(element, role) {
+  if (role === null)
+    return false;
+  return isInteractive(element, role) || role === "heading" || role === "image" || role === "label" || isBlindRegion(role);
+}
+function getSameOriginIframeBody(element) {
+  if (element.tagName !== "IFRAME")
+    return null;
+  if (!isSameOriginIframe(element) || isSensitiveIframe(element))
+    return null;
+  try {
+    return element.contentDocument?.body ?? null;
+  } catch {
+    return null;
+  }
+}
+function walkAndCollect(element, depth, entries) {
+  if (shouldSkipSubtree(element))
+    return;
+  const rect = element.getBoundingClientRect();
+  const role = inferRole(element);
+  const isVisibleAndEmittable = role !== null && isVisible(element, rect) && shouldEmitElement(element, role);
+  let childDepth = depth;
+  if (isVisibleAndEmittable && role) {
+    const ref = ensureStableRef(element);
+    entries.push({
+      depth,
+      role,
+      name: accessibleName(element),
+      ref,
+      attrs: extractAttrs(element, role),
+      area: rect.width * rect.height
+    });
+    childDepth = depth + 1;
+  }
+  if (role === "iframe") {
+    const iframeBody = getSameOriginIframeBody(element);
+    if (iframeBody) {
+      for (const child of Array.from(iframeBody.children)) {
+        walkAndCollect(child, childDepth, entries);
+      }
+    }
+    return;
+  }
+  if (role && isBlindRegion(role))
+    return;
+  for (const child of Array.from(element.children)) {
+    walkAndCollect(child, childDepth, entries);
+  }
+}
+function dropSmallestAreaEntriesUntilUnderLimit(entries) {
+  if (entries.length <= NODE_LIMIT)
+    return entries;
+  const indexedEntries = entries.map((entry, index2) => ({ entry, index: index2 }));
+  const entriesByAreaAscending = indexedEntries.slice(1).sort((a, b) => a.entry.area - b.entry.area);
+  const indicesToDrop = new Set(entriesByAreaAscending.slice(0, entries.length - NODE_LIMIT).map((indexed) => indexed.index));
+  const keptEntries = [];
+  for (let i = 0;i < entries.length; i++) {
+    if (!indicesToDrop.has(i))
+      keptEntries.push(entries[i]);
+  }
+  return keptEntries;
+}
+function buildAccessibilityTree() {
+  const collectedEntries = [];
+  const pageTitle = document.title || window.location.pathname;
+  collectedEntries.push({
+    depth: 0,
+    role: "page",
+    name: pageTitle.slice(0, NAME_MAX_CHARS),
+    ref: `${REF_PREFIX}0`,
+    attrs: [],
+    area: window.innerWidth * window.innerHeight
+  });
+  if (document.body) {
+    for (const child of Array.from(document.body.children)) {
+      walkAndCollect(child, 1, collectedEntries);
+    }
+  }
+  const exceededNodeLimit = collectedEntries.length > NODE_LIMIT;
+  const finalEntries = exceededNodeLimit ? dropSmallestAreaEntriesUntilUnderLimit(collectedEntries) : collectedEntries;
+  const treeLines = finalEntries.map(formatNodeAsLine);
+  let pageContent = treeLines.join(`
+`);
+  const exceededByteLimit = pageContent.length > PAGE_CONTENT_MAX_BYTES;
+  if (exceededByteLimit) {
+    pageContent = `${pageContent.slice(0, PAGE_CONTENT_MAX_BYTES)}
+<!-- truncated -->`;
+  }
+  return {
+    pageContent,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    refCount: finalEntries.length - 1,
+    truncated: exceededNodeLimit || exceededByteLimit
+  };
+}
+
+// src/capture/domEvents.ts
+var MUTATION_DEBOUNCE_MS = 250;
+var textEncoder = new TextEncoder;
+function isInsideWidget(target) {
+  if (!(target instanceof Node))
+    return false;
+  let node = target;
+  while (node) {
+    if (node instanceof Element && node.id === WIDGET_ROOT_ID)
+      return true;
+    node = node.parentNode;
+  }
+  return false;
+}
+function findNearestRef(element) {
+  let currentNode = element;
+  while (currentNode) {
+    const ref = currentNode.getAttribute(REF_ATTR);
+    if (ref)
+      return { ref, node: currentNode };
+    currentNode = currentNode.parentElement;
+  }
+  return null;
+}
+function installDomEventListeners(localParticipant, options = {}) {
+  const { onTriggerEvent } = options;
+  function publishDomEvent(event) {
+    try {
+      localParticipant.publishData(textEncoder.encode(JSON.stringify(event)), {
+        reliable: true,
+        topic: DOM_EVENTS_TOPIC
+      }).catch(() => {
+        return;
+      });
+    } catch {}
+    if (onTriggerEvent) {
+      try {
+        onTriggerEvent();
+      } catch {}
+    }
+  }
+  const onClick = (event) => {
+    if (isInsideWidget(event.target))
+      return;
+    if (!(event.target instanceof Element))
+      return;
+    const matchedRef = findNearestRef(event.target);
+    const targetElement = matchedRef?.node ?? event.target;
+    publishDomEvent({
+      type: "click",
+      ref: matchedRef?.ref ?? null,
+      role: inferRole(targetElement) ?? targetElement.tagName.toLowerCase(),
+      name: accessibleName(targetElement, { quick: true }),
+      timestamp: Date.now()
+    });
+  };
+  document.addEventListener("click", onClick, true);
+  const onSubmit = (event) => {
+    if (isInsideWidget(event.target))
+      return;
+    if (!(event.target instanceof HTMLFormElement))
+      return;
+    const submittedForm = event.target;
+    publishDomEvent({
+      type: "submit",
+      ref: submittedForm.getAttribute(REF_ATTR),
+      formName: (submittedForm.name || submittedForm.id || "").slice(0, NAME_MAX_CHARS),
+      action: (submittedForm.action || "").slice(0, NAME_MAX_CHARS),
+      timestamp: Date.now()
+    });
+  };
+  document.addEventListener("submit", onSubmit, true);
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  let previousUrl = window.location.href;
+  const emitNavigationIfChanged = () => {
+    const nextUrl = window.location.href;
+    if (nextUrl === previousUrl)
+      return;
+    publishDomEvent({
+      type: "navigation",
+      from: previousUrl,
+      to: nextUrl,
+      title: document.title.slice(0, NAME_MAX_CHARS),
+      timestamp: Date.now()
+    });
+    previousUrl = nextUrl;
+  };
+  history.pushState = function patchedPushState(...args) {
+    originalPushState.apply(this, args);
+    queueMicrotask(emitNavigationIfChanged);
+  };
+  history.replaceState = function patchedReplaceState(...args) {
+    originalReplaceState.apply(this, args);
+    queueMicrotask(emitNavigationIfChanged);
+  };
+  const onPopState = () => emitNavigationIfChanged();
+  const onHashChange = () => emitNavigationIfChanged();
+  window.addEventListener("popstate", onPopState);
+  window.addEventListener("hashchange", onHashChange);
+  let pendingAddedRefs = new Set;
+  let pendingRemovedRefs = new Set;
+  let pendingMutationCount = 0;
+  let mutationFlushTimer = null;
+  const flushPendingMutations = () => {
+    mutationFlushTimer = null;
+    if (pendingMutationCount === 0)
+      return;
+    publishDomEvent({
+      type: "mutation",
+      summary: `${pendingMutationCount} subtree changes`,
+      addedRefs: Array.from(pendingAddedRefs),
+      removedRefs: Array.from(pendingRemovedRefs),
+      timestamp: Date.now()
+    });
+    pendingAddedRefs = new Set;
+    pendingRemovedRefs = new Set;
+    pendingMutationCount = 0;
+  };
+  const collectDescendantRefs = (node, targetSet) => {
+    if (!(node instanceof Element))
+      return;
+    if (node.id === WIDGET_ROOT_ID)
+      return;
+    const ref = node.getAttribute(REF_ATTR);
+    if (ref)
+      targetSet.add(ref);
+    for (const child of Array.from(node.children))
+      collectDescendantRefs(child, targetSet);
+  };
+  const observer = new MutationObserver((mutations) => {
+    let observedCount = 0;
+    for (const mutation of mutations) {
+      if (mutation.type !== "childList")
+        continue;
+      if (mutation.target instanceof Element && isInsideWidget(mutation.target))
+        continue;
+      if (mutation.addedNodes.length === 0 && mutation.removedNodes.length === 0)
+        continue;
+      for (const added of Array.from(mutation.addedNodes)) {
+        collectDescendantRefs(added, pendingAddedRefs);
+      }
+      for (const removed of Array.from(mutation.removedNodes)) {
+        collectDescendantRefs(removed, pendingRemovedRefs);
+      }
+      observedCount += 1;
+    }
+    if (observedCount === 0)
+      return;
+    pendingMutationCount += observedCount;
+    if (mutationFlushTimer)
+      clearTimeout(mutationFlushTimer);
+    mutationFlushTimer = setTimeout(flushPendingMutations, MUTATION_DEBOUNCE_MS);
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => {
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("submit", onSubmit, true);
+    window.removeEventListener("popstate", onPopState);
+    window.removeEventListener("hashchange", onHashChange);
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    if (mutationFlushTimer)
+      clearTimeout(mutationFlushTimer);
+    observer.disconnect();
+  };
+}
+
+// src/capture/snapdom.ts
+var cachedSnapdomModule = null;
+function loadSnapdom() {
+  if (!cachedSnapdomModule)
+    cachedSnapdomModule = import("@zumer/snapdom");
+  return cachedSnapdomModule;
+}
+async function snapToCanvas(element, options = {}) {
+  const snapdomModule = await loadSnapdom();
+  return snapdomModule.snapdom.toCanvas(element, options);
+}
+
+// src/components/DomCapture.tsx
+var SNAPSHOT_INTERVAL_MS = 2000;
+var A11Y_PUBLISH_INTERVAL_MS = 2000;
+var CAPTURE_PRESET = ScreenSharePresets2.h1080fps30;
+var CAPTURE_FPS = CAPTURE_PRESET.encoding.maxFramerate ?? 30;
+var CAPTURE_BITRATE = 4000000;
+var DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES = 14000;
+var MAX_CANVAS_DPR = 1.5;
+var CONSECUTIVE_FAILURES_BEFORE_REPORT = 3;
+var textEncoder2 = new TextEncoder;
+function shouldIncludeInSnapshot(element) {
+  if (!(element instanceof Element))
+    return true;
+  if (element.id === WIDGET_ROOT_ID)
+    return false;
+  if (element.hasAttribute?.(PRIVATE_ATTR))
+    return false;
+  return true;
+}
+function createPublishingCanvas() {
+  const dprBoost = Math.min(window.devicePixelRatio || 1, MAX_CANVAS_DPR);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.round(CAPTURE_PRESET.width * dprBoost);
+  canvas.height = Math.round(CAPTURE_PRESET.height * dprBoost);
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return null;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return { canvas, ctx };
+}
+function getCanvasCaptureStream(canvas, fps) {
+  const captureStreamFn = canvas.captureStream;
+  if (typeof captureStreamFn !== "function") {
+    console.error("canvas.captureStream is not supported in this browser");
+    return null;
+  }
+  return captureStreamFn.call(canvas, fps);
+}
+async function paintViewportSnapshot(canvas, ctx) {
+  const dpr = window.devicePixelRatio || 1;
+  const snapshotCanvas = await snapToCanvas(document.documentElement, {
+    filter: shouldIncludeInSnapshot,
+    filterMode: "remove",
+    backgroundColor: "#ffffff",
+    fast: true,
+    dpr
+  });
+  const sourceX = window.scrollX * dpr;
+  const sourceY = window.scrollY * dpr;
+  const sourceWidth = window.innerWidth * dpr;
+  const sourceHeight = window.innerHeight * dpr;
+  const fitScale = Math.min(canvas.width / sourceWidth, canvas.height / sourceHeight);
+  const destWidth = sourceWidth * fitScale;
+  const destHeight = sourceHeight * fitScale;
+  const destX = (canvas.width - destWidth) / 2;
+  const destY = (canvas.height - destHeight) / 2;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(snapshotCanvas, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+}
+async function gzipIfBeneficial(snapshotBytes) {
+  if (typeof CompressionStream === "undefined" || snapshotBytes.byteLength <= DOM_SNAPSHOT_GZIP_THRESHOLD_BYTES) {
+    return { bytes: snapshotBytes, compressionFlag: 0 };
+  }
+  try {
+    const blob = new Blob([new Uint8Array(snapshotBytes)]);
+    const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
+    const compressedBytes = new Uint8Array(await new Response(stream).arrayBuffer());
+    return { bytes: compressedBytes, compressionFlag: 1 };
+  } catch {
+    return { bytes: snapshotBytes, compressionFlag: 0 };
+  }
+}
+async function buildDomSnapshotFrame() {
+  const a11yTree = buildAccessibilityTree();
+  const snapshotJson = JSON.stringify({
+    pageContent: a11yTree.pageContent,
+    viewport: a11yTree.viewport,
+    truncated: a11yTree.truncated,
+    url: window.location.href,
+    title: document.title,
+    capturedAt: new Date().toISOString()
+  });
+  const snapshotBytes = textEncoder2.encode(snapshotJson);
+  const { bytes, compressionFlag } = await gzipIfBeneficial(snapshotBytes);
+  const frame = new Uint8Array(bytes.byteLength + 1);
+  frame[0] = compressionFlag;
+  frame.set(bytes, 1);
+  return frame;
+}
+function reportCaptureError(localParticipant) {
+  try {
+    localParticipant.publishData(textEncoder2.encode(JSON.stringify({ type: "capture_error" })), {
+      reliable: true,
+      topic: DOM_SNAPSHOT_TOPIC
+    }).catch(() => {
+      return;
+    });
+  } catch {}
+}
+async function unpublishAndStopTrack(localParticipant, videoTrack) {
+  try {
+    await localParticipant.unpublishTrack(videoTrack);
+  } catch {}
+  videoTrack.stop();
+}
+function DomCapture() {
+  const { localParticipant } = useLocalParticipant3();
+  const connectionState = useConnectionState2();
+  const didStartRef = useRef2(false);
+  useEffect4(() => {
+    if (didStartRef.current)
+      return;
+    if (connectionState !== ConnectionState2.Connected)
+      return;
+    const canvasAndCtx = createPublishingCanvas();
+    if (!canvasAndCtx)
+      return;
+    const { canvas, ctx } = canvasAndCtx;
+    const canvasStream = getCanvasCaptureStream(canvas, CAPTURE_FPS);
+    if (!canvasStream)
+      return;
+    const videoTrack = canvasStream.getVideoTracks()[0] ?? null;
+    if (!videoTrack)
+      return;
+    videoTrack.contentHint = "text";
+    didStartRef.current = true;
+    let cancelled = false;
+    let snapshotInFlight = false;
+    let a11yPublishInFlight = false;
+    let consecutiveCaptureFailures = 0;
+    localParticipant.setMicrophoneEnabled(true).catch((error) => console.error("Failed to enable microphone:", error));
+    localParticipant.publishTrack(videoTrack, {
+      source: Track2.Source.ScreenShare,
+      videoEncoding: {
+        maxBitrate: CAPTURE_BITRATE,
+        maxFramerate: CAPTURE_FPS
+      },
+      simulcast: false
+    }).catch((error) => {
+      console.error("Failed to publish DOM capture track:", error);
+      for (const track of canvasStream.getTracks())
+        track.stop();
+    });
+    const tickSnapshot = async () => {
+      if (cancelled || snapshotInFlight)
+        return;
+      snapshotInFlight = true;
+      try {
+        await paintViewportSnapshot(canvas, ctx);
+        if (cancelled)
+          return;
+        consecutiveCaptureFailures = 0;
+      } catch {
+        if (cancelled)
+          return;
+        consecutiveCaptureFailures += 1;
+        if (consecutiveCaptureFailures === CONSECUTIVE_FAILURES_BEFORE_REPORT) {
+          reportCaptureError(localParticipant);
+        }
+      } finally {
+        snapshotInFlight = false;
+      }
+    };
+    const tickA11yPublish = async () => {
+      if (cancelled || a11yPublishInFlight)
+        return;
+      a11yPublishInFlight = true;
+      try {
+        const frame = await buildDomSnapshotFrame();
+        if (cancelled)
+          return;
+        await localParticipant.publishData(frame, {
+          reliable: true,
+          topic: DOM_SNAPSHOT_TOPIC
+        });
+      } catch {} finally {
+        a11yPublishInFlight = false;
+      }
+    };
+    const cleanupDomEventListeners = installDomEventListeners(localParticipant, {
+      onTriggerEvent: () => {
+        tickA11yPublish();
+        tickSnapshot();
+      }
+    });
+    tickSnapshot();
+    tickA11yPublish();
+    const snapshotTimer = setInterval(tickSnapshot, SNAPSHOT_INTERVAL_MS);
+    const a11yPublishTimer = setInterval(tickA11yPublish, A11Y_PUBLISH_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      didStartRef.current = false;
+      clearInterval(snapshotTimer);
+      clearInterval(a11yPublishTimer);
+      cleanupDomEventListeners();
+      unpublishAndStopTrack(localParticipant, videoTrack);
+      for (const track of canvasStream.getTracks())
+        track.stop();
+    };
+  }, [connectionState, localParticipant]);
+  return null;
+}
+
+// src/components/HighlightOverlay.tsx
+import { useDataChannel } from "@livekit/components-react/hooks";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var TOOLTIP_MAX_WIDTH = 280;
+var TOOLTIP_GAP = 8;
+var VIEWPORT_MARGIN = 8;
+var TOOLTIP_TOP_THRESHOLD = 48;
+var Z_INDEX = 2147483646;
+var RING_INNER = "oklab(0.585 0.0288678 -0.231205 / 0.95)";
+var RING_OUTER = "oklab(0.585 0.0288678 -0.231205 / 0.25)";
+var textDecoder = new TextDecoder;
+function parseHighlightMessage(payload) {
+  try {
+    const json = JSON.parse(textDecoder.decode(payload));
+    if (!json || typeof json !== "object")
+      return null;
+    if (json.type === "show" && typeof json.ref === "string") {
+      return {
+        type: "show",
+        ref: json.ref,
+        message: typeof json.message === "string" ? json.message : ""
+      };
+    }
+    if (json.type === "clear")
+      return { type: "clear" };
+    return null;
+  } catch {
+    return null;
+  }
+}
+function safeGetIframeDocument(iframe) {
+  try {
+    return iframe.contentDocument;
+  } catch {
+    return null;
+  }
+}
+function safeQuerySelector(doc, selector) {
+  try {
+    return doc.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+function safeQueryAllIframes(doc) {
+  try {
+    return Array.from(doc.querySelectorAll("iframe"));
+  } catch {
+    return [];
+  }
+}
+function findElementInDocumentTree(rootDoc, selector) {
+  const hit = safeQuerySelector(rootDoc, selector);
+  if (hit)
+    return hit;
+  for (const iframe of safeQueryAllIframes(rootDoc)) {
+    const innerDoc = safeGetIframeDocument(iframe);
+    if (!innerDoc)
+      continue;
+    const nested = findElementInDocumentTree(innerDoc, selector);
+    if (nested)
+      return nested;
+  }
+  return null;
+}
+function findElementByRef(ref) {
+  const selector = `[${REF_ATTR}="${CSS.escape(ref)}"]`;
+  return findElementInDocumentTree(document, selector);
+}
+function findIframeHostingDocument(targetDoc) {
+  const queue = [document];
+  while (queue.length > 0) {
+    const doc = queue.shift();
+    if (!doc)
+      continue;
+    for (const iframe of safeQueryAllIframes(doc)) {
+      if (safeGetIframeDocument(iframe) === targetDoc)
+        return iframe;
+      const innerDoc = safeGetIframeDocument(iframe);
+      if (innerDoc)
+        queue.push(innerDoc);
+    }
+  }
+  return null;
+}
+function getRectInTopViewport(el) {
+  let rect = el.getBoundingClientRect();
+  let ownerDoc = el.ownerDocument;
+  while (ownerDoc && ownerDoc !== document) {
+    const hostingIframe = findIframeHostingDocument(ownerDoc);
+    if (!hostingIframe)
+      return rect;
+    const iframeRect = hostingIframe.getBoundingClientRect();
+    rect = new DOMRect(rect.left + iframeRect.left, rect.top + iframeRect.top, rect.width, rect.height);
+    ownerDoc = hostingIframe.ownerDocument;
+  }
+  return rect;
+}
+function findScrollableAncestor(el) {
+  const win = el.ownerDocument?.defaultView ?? window;
+  let node = el.parentElement;
+  while (node) {
+    const overflow = win.getComputedStyle(node).overflow;
+    if (/auto|scroll|overlay/.test(overflow))
+      return node;
+    node = node.parentElement;
+  }
+  return el.ownerDocument?.documentElement ?? document.documentElement;
+}
+function HighlightOverlay() {
+  const [overlayState, setOverlayState] = useState3(null);
+  const targetElementRef = useRef3(null);
+  const pendingFrameRef = useRef3(null);
+  const clearOverlay = useCallback4(() => {
+    targetElementRef.current = null;
+    setOverlayState(null);
+  }, []);
+  const recomputeRect = useCallback4(() => {
+    pendingFrameRef.current = null;
+    const target = targetElementRef.current;
+    if (!target)
+      return;
+    if (!target.isConnected) {
+      clearOverlay();
+      return;
+    }
+    const rect2 = getRectInTopViewport(target);
+    setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
+  }, [clearOverlay]);
+  const scheduleRecompute = useCallback4(() => {
+    if (pendingFrameRef.current !== null)
+      return;
+    pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
+  }, [recomputeRect]);
+  const onHighlightMessage = useCallback4((msg) => {
+    const parsed = parseHighlightMessage(msg.payload);
+    if (!parsed)
+      return;
+    if (parsed.type === "clear") {
+      clearOverlay();
+      return;
+    }
+    const target = findElementByRef(parsed.ref);
+    if (!target) {
+      clearOverlay();
+      return;
+    }
+    targetElementRef.current = target;
+    setOverlayState({
+      ref: parsed.ref,
+      message: parsed.message ?? "",
+      rect: getRectInTopViewport(target)
+    });
+  }, [clearOverlay]);
+  useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
+  useEffect5(() => {
+    if (!overlayState)
+      return;
+    const target = targetElementRef.current;
+    if (!target)
+      return;
+    const onScroll = () => scheduleRecompute();
+    const onResize = () => scheduleRecompute();
+    const watchedWindows = new Set;
+    watchedWindows.add(window);
+    const ownerWindow = target.ownerDocument?.defaultView;
+    if (ownerWindow && ownerWindow !== window)
+      watchedWindows.add(ownerWindow);
+    for (const win of watchedWindows) {
+      win.addEventListener("scroll", onScroll, { capture: true, passive: true });
+      win.addEventListener("resize", onResize, { passive: true });
+    }
+    const resizeObserver = new ResizeObserver(scheduleRecompute);
+    resizeObserver.observe(target);
+    const scrollContainer = findScrollableAncestor(target);
+    const mutationObserver = new MutationObserver(() => {
+      if (!targetElementRef.current?.isConnected) {
+        clearOverlay();
+        return;
+      }
+      scheduleRecompute();
+    });
+    mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
+    return () => {
+      for (const win of watchedWindows) {
+        win.removeEventListener("scroll", onScroll, { capture: true });
+        win.removeEventListener("resize", onResize);
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      if (pendingFrameRef.current !== null) {
+        window.cancelAnimationFrame(pendingFrameRef.current);
+        pendingFrameRef.current = null;
+      }
+    };
+  }, [overlayState, scheduleRecompute, clearOverlay]);
+  if (!overlayState)
+    return null;
+  const { rect, message } = overlayState;
+  const ringStyle = {
+    position: "fixed",
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    pointerEvents: "none",
+    zIndex: Z_INDEX,
+    boxShadow: `0 0 0 2px ${RING_INNER}, 0 0 0 6px ${RING_OUTER}`,
+    borderRadius: "4px",
+    transition: "none"
+  };
+  const showTooltipBelow = rect.top < TOOLTIP_TOP_THRESHOLD;
+  const tooltipTop = showTooltipBelow ? rect.bottom + TOOLTIP_GAP : rect.top - TOOLTIP_GAP;
+  const tooltipTransform = showTooltipBelow ? "translateY(0)" : "translateY(-100%)";
+  const tooltipLeft = Math.min(Math.max(rect.left, VIEWPORT_MARGIN), window.innerWidth - TOOLTIP_MAX_WIDTH - VIEWPORT_MARGIN);
+  const tooltipStyle = {
+    position: "fixed",
+    left: `${tooltipLeft}px`,
+    top: `${tooltipTop}px`,
+    transform: tooltipTransform,
+    maxWidth: `${TOOLTIP_MAX_WIDTH}px`,
+    pointerEvents: "none",
+    zIndex: Z_INDEX,
+    background: "rgba(45, 43, 61, 0.96)",
+    color: "#ffffff",
+    padding: "6px 10px",
+    borderRadius: "8px",
+    fontSize: "13px",
+    lineHeight: "1.35",
+    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif',
+    boxShadow: "0 6px 20px rgba(0, 0, 0, 0.25)",
+    whiteSpace: "normal",
+    wordWrap: "break-word"
+  };
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx2("div", {
+        "data-skippr-private": "true",
+        style: ringStyle,
+        "aria-hidden": "true"
+      }),
+      message && /* @__PURE__ */ jsx2("div", {
+        "data-skippr-private": "true",
+        style: tooltipStyle,
+        role: "tooltip",
+        children: message
+      })
+    ]
+  });
+}
+
 // src/components/MinimizedBubble.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -723,12 +1853,12 @@ function cn(...inputs) {
 
 // src/components/Logo.tsx
 import { useId } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Logo({ className }) {
   const reactId = useId().replace(/:/g, "");
   const clipId = `skippr-logo-clip-${reactId}`;
   const gradientId = `skippr-logo-gradient-${reactId}`;
-  return /* @__PURE__ */ jsxs2("svg", {
+  return /* @__PURE__ */ jsxs3("svg", {
     width: "1em",
     height: "1em",
     viewBox: "0 0 30 30",
@@ -738,14 +1868,14 @@ function Logo({ className }) {
     "aria-label": "Skippr",
     className,
     children: [
-      /* @__PURE__ */ jsxs2("g", {
+      /* @__PURE__ */ jsxs3("g", {
         clipPath: `url(#${clipId})`,
         children: [
-          /* @__PURE__ */ jsx2("path", {
+          /* @__PURE__ */ jsx3("path", {
             d: "M0 10C0 4.47715 4.47715 0 10 0H20C25.5228 0 30 4.47715 30 10V20C30 25.5228 25.5228 30 20 30H10C4.47715 30 0 25.5228 0 20V10Z",
             fill: "#2D2D3F"
           }),
-          /* @__PURE__ */ jsx2("rect", {
+          /* @__PURE__ */ jsx3("rect", {
             x: "7.83325",
             y: "14.9404",
             width: "12.4083",
@@ -754,11 +1884,11 @@ function Logo({ className }) {
             transform: "rotate(-45 7.83325 14.9404)",
             fill: "#52FFF9"
           }),
-          /* @__PURE__ */ jsx2("path", {
+          /* @__PURE__ */ jsx3("path", {
             d: "M18.8975 12.5928C20.2728 12.5928 21.3877 13.647 21.3877 14.9474C21.3877 16.2479 20.2728 17.3021 18.8975 17.3021L11.4269 17.3021C10.0516 17.3021 8.93665 16.2479 8.93665 14.9474C8.93665 13.647 10.0516 12.5928 11.4269 12.5928L18.8975 12.5928Z",
             fill: `url(#${gradientId})`
           }),
-          /* @__PURE__ */ jsx2("rect", {
+          /* @__PURE__ */ jsx3("rect", {
             x: "10.1665",
             y: "20.4404",
             width: "12.4083",
@@ -769,9 +1899,9 @@ function Logo({ className }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs2("defs", {
+      /* @__PURE__ */ jsxs3("defs", {
         children: [
-          /* @__PURE__ */ jsxs2("linearGradient", {
+          /* @__PURE__ */ jsxs3("linearGradient", {
             id: gradientId,
             x1: "18.9237",
             y1: "16.9997",
@@ -779,19 +1909,19 @@ function Logo({ className }) {
             y2: "14.1904",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx2("stop", {
+              /* @__PURE__ */ jsx3("stop", {
                 offset: "0.473958",
                 stopColor: "white"
               }),
-              /* @__PURE__ */ jsx2("stop", {
+              /* @__PURE__ */ jsx3("stop", {
                 offset: "1",
                 stopColor: "#52FFF9"
               })
             ]
           }),
-          /* @__PURE__ */ jsx2("clipPath", {
+          /* @__PURE__ */ jsx3("clipPath", {
             id: clipId,
-            children: /* @__PURE__ */ jsx2("rect", {
+            children: /* @__PURE__ */ jsx3("rect", {
               width: "30",
               height: "30",
               fill: "white"
@@ -804,18 +1934,18 @@ function Logo({ className }) {
 }
 
 // src/components/ui/tooltip.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var ALIGN_CLASSES = {
   center: "skippr:left-1/2 skippr:-translate-x-1/2",
   start: "skippr:left-0",
   end: "skippr:right-0"
 };
 function Tooltip({ label, children, position = "top", align = "center" }) {
-  return /* @__PURE__ */ jsxs3("span", {
+  return /* @__PURE__ */ jsxs4("span", {
     className: "skippr:relative skippr:inline-flex skippr:group",
     children: [
       children,
-      /* @__PURE__ */ jsx3("span", {
+      /* @__PURE__ */ jsx4("span", {
         className: cn("skippr:pointer-events-none skippr:absolute skippr:z-10", "skippr:whitespace-nowrap skippr:rounded-md skippr:bg-foreground skippr:px-2 skippr:py-1", "skippr:text-[11px] skippr:text-background skippr:font-medium", "skippr:opacity-0 skippr:scale-95 skippr:transition-all skippr:duration-150", "skippr:group-hover:opacity-100 skippr:group-hover:scale-100", "skippr:group-focus-within:opacity-100 skippr:group-focus-within:scale-100", ALIGN_CLASSES[align], position === "top" && "skippr:bottom-full skippr:mb-1.5", position === "bottom" && "skippr:top-full skippr:mt-1.5"),
         "aria-hidden": "true",
         children: label
@@ -825,66 +1955,67 @@ function Tooltip({ label, children, position = "top", align = "center" }) {
 }
 
 // src/components/MinimizedBubble.tsx
-import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment3 } from "react/jsx-runtime";
 var BUBBLE_BUTTON = "skippr:flex skippr:size-12 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
 function ConnectedBubbleContent() {
-  const { expandPanel, disconnect, position } = useLiveAgent();
+  const { expandPanel, disconnect, position, captureMode } = useLiveAgent();
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
   const tooltipAlign = position === "right" ? "end" : "start";
-  return /* @__PURE__ */ jsxs4(Fragment2, {
+  const showScreenShareToggle = captureMode === "screenshare";
+  return /* @__PURE__ */ jsxs5(Fragment3, {
     children: [
-      /* @__PURE__ */ jsx4(Tooltip, {
+      /* @__PURE__ */ jsx5(Tooltip, {
         label: isMuted ? "Unmute" : "Mute",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx4("button", {
+        children: /* @__PURE__ */ jsx5("button", {
           type: "button",
           onClick: toggleMute,
           "aria-label": isMuted ? "Unmute" : "Mute",
           className: cn(BUBBLE_BUTTON, isMuted ? "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
-          children: isMuted ? /* @__PURE__ */ jsx4(MicOff, {
+          children: isMuted ? /* @__PURE__ */ jsx5(MicOff, {
             className: "skippr:size-5"
-          }) : /* @__PURE__ */ jsx4(Mic, {
+          }) : /* @__PURE__ */ jsx5(Mic, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx4(Tooltip, {
+      showScreenShareToggle && /* @__PURE__ */ jsx5(Tooltip, {
         label: isScreenSharing ? "Stop sharing" : "Share screen",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx4("button", {
+        children: /* @__PURE__ */ jsx5("button", {
           type: "button",
           onClick: toggleScreenShare,
           "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
           className: cn(BUBBLE_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : "skippr:bg-white skippr:text-foreground skippr:hover:bg-muted"),
-          children: isScreenSharing ? /* @__PURE__ */ jsx4(MonitorOff, {
+          children: isScreenSharing ? /* @__PURE__ */ jsx5(MonitorOff, {
             className: "skippr:size-5"
-          }) : /* @__PURE__ */ jsx4(Monitor, {
+          }) : /* @__PURE__ */ jsx5(Monitor, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx4(Tooltip, {
+      /* @__PURE__ */ jsx5(Tooltip, {
         label: "End session",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx4("button", {
+        children: /* @__PURE__ */ jsx5("button", {
           type: "button",
           onClick: () => disconnect(),
           "aria-label": "End session",
           className: cn(BUBBLE_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
-          children: /* @__PURE__ */ jsx4(PhoneOff, {
+          children: /* @__PURE__ */ jsx5(PhoneOff, {
             className: "skippr:size-5"
           })
         })
       }),
-      /* @__PURE__ */ jsx4(Tooltip, {
+      /* @__PURE__ */ jsx5(Tooltip, {
         label: "Open chat & transcript",
         align: tooltipAlign,
-        children: /* @__PURE__ */ jsx4("button", {
+        children: /* @__PURE__ */ jsx5("button", {
           type: "button",
           onClick: expandPanel,
           "aria-label": "Open chat & transcript",
           className: cn(BUBBLE_BUTTON, "skippr:bg-bubble skippr:hover:brightness-110"),
-          children: /* @__PURE__ */ jsx4(Logo, {
+          children: /* @__PURE__ */ jsx5(Logo, {
             className: "skippr:size-7"
           })
         })
@@ -895,19 +2026,19 @@ function ConnectedBubbleContent() {
 function IdleBubbleContent() {
   const { expandPanel, position } = useLiveAgent();
   const tooltipAlign = position === "right" ? "end" : "start";
-  return /* @__PURE__ */ jsx4(Tooltip, {
+  return /* @__PURE__ */ jsx5(Tooltip, {
     label: "Open Skippr assistant",
     align: tooltipAlign,
-    children: /* @__PURE__ */ jsxs4("button", {
+    children: /* @__PURE__ */ jsxs5("button", {
       type: "button",
       onClick: expandPanel,
       "aria-label": "Skippr assistant",
       className: cn(BUBBLE_BUTTON, "skippr:relative skippr:bg-bubble skippr:hover:brightness-110"),
       children: [
-        /* @__PURE__ */ jsx4(Logo, {
+        /* @__PURE__ */ jsx5(Logo, {
           className: "skippr:relative skippr:z-10 skippr:size-7"
         }),
-        /* @__PURE__ */ jsx4("span", {
+        /* @__PURE__ */ jsx5("span", {
           className: "skippr:absolute skippr:-inset-[3px] skippr:animate-pulse skippr:rounded-[17px] skippr:border-2 skippr:border-bubble/50"
         })
       ]
@@ -919,18 +2050,18 @@ function WelcomeBubble({
   position,
   onDismiss
 }) {
-  useEffect4(() => {
+  useEffect6(() => {
     const timer = setTimeout(onDismiss, 5000);
     return () => clearTimeout(timer);
   }, [onDismiss]);
-  return /* @__PURE__ */ jsxs4("button", {
+  return /* @__PURE__ */ jsxs5("button", {
     type: "button",
     className: cn("skippr:absolute skippr:bottom-full skippr:mb-3", "skippr:max-w-64 skippr:rounded-xl skippr:bg-card skippr:shadow-lg", "skippr:border skippr:border-border skippr:px-4 skippr:py-3", "skippr:text-sm skippr:text-foreground skippr:leading-relaxed skippr:text-left", "skippr:animate-[skippr-fade-in_0.3s_ease-out]", "skippr:cursor-pointer", position === "right" ? "skippr:right-0" : "skippr:left-0"),
     onClick: onDismiss,
     "aria-label": "Dismiss",
     children: [
       message,
-      /* @__PURE__ */ jsx4("span", {
+      /* @__PURE__ */ jsx5("span", {
         className: cn("skippr:absolute skippr:top-full skippr:size-2.5", "skippr:border-l skippr:border-t skippr:border-border skippr:bg-card", "skippr:rotate-[225deg]", position === "right" ? "skippr:right-5" : "skippr:left-5", "skippr:-mt-[5px]")
       })
     ]
@@ -943,27 +2074,27 @@ function MinimizedBubble({
 }) {
   const { isConnected, isStarting, position } = useLiveAgent();
   const inSession = isConnected || isStarting;
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs5("div", {
     className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9999]", "skippr:flex skippr:items-center skippr:gap-2", position === "right" ? "skippr:right-6" : "skippr:left-6"),
     children: [
-      welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx4(WelcomeBubble, {
+      welcomeMessage && !inSession && !welcomeDismissed && /* @__PURE__ */ jsx5(WelcomeBubble, {
         message: welcomeMessage,
         position,
         onDismiss: onDismissWelcome
       }),
-      inSession ? /* @__PURE__ */ jsx4(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx4(IdleBubbleContent, {})
+      inSession ? /* @__PURE__ */ jsx5(ConnectedBubbleContent, {}) : /* @__PURE__ */ jsx5(IdleBubbleContent, {})
     ]
   });
 }
 
 // src/components/Sidebar.tsx
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect13 } from "react";
 
 // src/hooks/useCombinedMessages.ts
 import { useMemo as useMemo4 } from "react";
 
 // src/hooks/useChatMessages.ts
-import { useChat, useLocalParticipant as useLocalParticipant3 } from "@livekit/components-react";
+import { useChat, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
 import { useMemo as useMemo2 } from "react";
 
 // src/lib/filterSystemMessages.ts
@@ -975,7 +2106,7 @@ function filterSystemMessages(messages) {
 // src/hooks/useChatMessages.ts
 function useChatMessages() {
   const { chatMessages: rawMessages, send, isSending } = useChat();
-  const { localParticipant } = useLocalParticipant3();
+  const { localParticipant } = useLocalParticipant4();
   const localIdentity = localParticipant.identity;
   const chatMessages = useMemo2(() => {
     const sortedMessages = rawMessages.map((msg) => ({
@@ -991,11 +2122,11 @@ function useChatMessages() {
 }
 
 // src/hooks/useStreamingTranscript.ts
-import { useLocalParticipant as useLocalParticipant4, useTranscriptions } from "@livekit/components-react";
+import { useLocalParticipant as useLocalParticipant5, useTranscriptions } from "@livekit/components-react/hooks";
 import { useMemo as useMemo3 } from "react";
 function useStreamingTranscript() {
   const transcriptions = useTranscriptions();
-  const { localParticipant } = useLocalParticipant4();
+  const { localParticipant } = useLocalParticipant5();
   const localIdentity = localParticipant.identity;
   const transcriptMessages = useMemo3(() => filterSystemMessages(transcriptions.filter((stream) => stream.text.trim().length > 0).map((stream) => ({
     id: stream.streamInfo.id,
@@ -1039,15 +2170,15 @@ function useCombinedMessages() {
 }
 
 // src/hooks/usePhaseUpdates.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 
 // src/hooks/useAgentState.ts
-import { useRemoteParticipants } from "@livekit/components-react";
-import { useEffect as useEffect5, useState as useState3 } from "react";
+import { useRemoteParticipants } from "@livekit/components-react/hooks";
+import { useEffect as useEffect7, useState as useState4 } from "react";
 function useAgentState(attributeKey, parse, initial) {
-  const [value, setValue] = useState3(initial);
+  const [value, setValue] = useState4(initial);
   const remoteParticipants = useRemoteParticipants();
-  useEffect5(() => {
+  useEffect7(() => {
     const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
     if (agentParticipant) {
       const attr = agentParticipant.attributes?.[attributeKey];
@@ -1093,13 +2224,13 @@ function parsePhases(json) {
   return null;
 }
 function usePhaseUpdates() {
-  const parse = useCallback4(parsePhases, []);
+  const parse = useCallback5(parsePhases, []);
   const phases = useAgentState("phases", parse, []);
   return { phases };
 }
 
 // src/hooks/useSessionRemaining.ts
-import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
 
 // src/lib/format.ts
 function formatTime(seconds) {
@@ -1115,9 +2246,9 @@ function parseNumber(s) {
 // src/hooks/useSessionRemaining.ts
 function useSessionRemaining() {
   const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
-  const endTimeRef = useRef2(null);
-  const [remaining, setRemaining] = useState4(null);
-  useEffect6(() => {
+  const endTimeRef = useRef4(null);
+  const [remaining, setRemaining] = useState5(null);
+  useEffect8(() => {
     if (maxCallDuration === null || endTimeRef.current !== null)
       return;
     const endTime = Date.now() + maxCallDuration * 1000;
@@ -1133,14 +2264,11 @@ function useSessionRemaining() {
   return remaining;
 }
 
-// src/lib/constants.ts
-var SIDEBAR_WIDTH = 360;
-
 // src/hooks/useElapsedSeconds.ts
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useEffect as useEffect9, useState as useState6 } from "react";
 function useElapsedSeconds(isRunning) {
-  const [elapsed, setElapsed] = useState5(0);
-  useEffect7(() => {
+  const [elapsed, setElapsed] = useState6(0);
+  useEffect9(() => {
     if (!isRunning) {
       setElapsed(0);
       return;
@@ -1156,50 +2284,50 @@ function useElapsedSeconds(isRunning) {
 }
 
 // src/components/ChatHeader.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ChatHeader() {
   const { isConnected, minimizePanel, minimizable } = useLiveAgent();
   const elapsed = useElapsedSeconds(isConnected);
-  return /* @__PURE__ */ jsxs5("header", {
+  return /* @__PURE__ */ jsxs6("header", {
     className: "skippr:sticky skippr:top-0 skippr:z-10 skippr:flex skippr:shrink-0 skippr:items-center skippr:justify-between skippr:border-b skippr:border-border skippr:bg-primary skippr:px-4 skippr:py-3",
     children: [
-      /* @__PURE__ */ jsx5("p", {
+      /* @__PURE__ */ jsx6("p", {
         className: "skippr:text-sm skippr:font-semibold skippr:text-primary-foreground",
         children: "Skippr"
       }),
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs6("div", {
         className: "skippr:flex skippr:items-center skippr:gap-2",
         children: [
-          isConnected && /* @__PURE__ */ jsxs5("div", {
+          isConnected && /* @__PURE__ */ jsxs6("div", {
             className: "skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-primary-foreground/20 skippr:px-2.5 skippr:py-1",
             children: [
-              /* @__PURE__ */ jsxs5("span", {
+              /* @__PURE__ */ jsxs6("span", {
                 className: "skippr:relative skippr:flex skippr:size-1.5",
                 children: [
-                  /* @__PURE__ */ jsx5("span", {
+                  /* @__PURE__ */ jsx6("span", {
                     className: "skippr:absolute skippr:inline-flex skippr:h-full skippr:w-full skippr:animate-ping skippr:rounded-full skippr:bg-red-400 skippr:opacity-75"
                   }),
-                  /* @__PURE__ */ jsx5("span", {
+                  /* @__PURE__ */ jsx6("span", {
                     className: "skippr:relative skippr:inline-flex skippr:size-1.5 skippr:rounded-full skippr:bg-red-400"
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx5("span", {
+              /* @__PURE__ */ jsx6("span", {
                 className: "skippr:text-[10px] skippr:font-medium skippr:text-primary-foreground",
                 children: "REC"
               }),
-              /* @__PURE__ */ jsx5("span", {
+              /* @__PURE__ */ jsx6("span", {
                 className: "skippr:text-[10px] skippr:font-mono skippr:text-primary-foreground",
                 children: formatTime(elapsed)
               })
             ]
           }),
-          minimizable && /* @__PURE__ */ jsx5("button", {
+          minimizable && /* @__PURE__ */ jsx6("button", {
             type: "button",
             onClick: minimizePanel,
             "aria-label": "Minimize",
             className: "skippr:flex skippr:size-6 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-md skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-primary-foreground/10 skippr:hover:text-primary-foreground",
-            children: /* @__PURE__ */ jsx5(Minimize2, {
+            children: /* @__PURE__ */ jsx6(Minimize2, {
               className: "skippr:size-3.5"
             })
           })
@@ -1210,26 +2338,26 @@ function ChatHeader() {
 }
 
 // src/components/LoadingDots.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function LoadingDots({ label }) {
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: "skippr:flex skippr:items-center skippr:gap-2 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "skippr:flex skippr:gap-1",
         children: [
-          /* @__PURE__ */ jsx6("span", {
+          /* @__PURE__ */ jsx7("span", {
             className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:0ms]"
           }),
-          /* @__PURE__ */ jsx6("span", {
+          /* @__PURE__ */ jsx7("span", {
             className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:150ms]"
           }),
-          /* @__PURE__ */ jsx6("span", {
+          /* @__PURE__ */ jsx7("span", {
             className: "skippr:size-1.5 skippr:rounded-full skippr:bg-muted-foreground/40 skippr:animate-bounce skippr:[animation-delay:300ms]"
           })
         ]
       }),
-      /* @__PURE__ */ jsx6("p", {
+      /* @__PURE__ */ jsx7("p", {
         className: "skippr:text-xs skippr:text-muted-foreground",
         children: label
       })
@@ -1238,11 +2366,11 @@ function LoadingDots({ label }) {
 }
 
 // src/components/LoginFlow.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef5, useState as useState7 } from "react";
 
 // src/components/ui/button.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var variantClasses = {
   default: "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90",
   destructive: "skippr:bg-destructive skippr:text-white skippr:hover:bg-destructive/90",
@@ -1261,7 +2389,7 @@ var sizeClasses = {
   "icon-lg": "skippr:size-10"
 };
 var Button = forwardRef3(({ className, variant = "default", size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx7("button", {
+  return /* @__PURE__ */ jsx8("button", {
     className: cn("skippr:inline-flex skippr:items-center skippr:justify-center skippr:gap-2 skippr:whitespace-nowrap skippr:rounded-md skippr:text-sm skippr:font-medium skippr:ring-offset-background skippr:transition-all skippr:cursor-pointer skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-ring skippr:focus-visible:ring-offset-2 skippr:disabled:pointer-events-none skippr:disabled:opacity-50 skippr:shrink-0 skippr:[&_svg]:pointer-events-none skippr:[&_svg:not([class*='size-'])]:size-4 skippr:[&_svg]:shrink-0", variantClasses[variant], sizeClasses[size], className),
     ref,
     ...props
@@ -1270,28 +2398,28 @@ var Button = forwardRef3(({ className, variant = "default", size = "default", ..
 Button.displayName = "Button";
 
 // src/components/LoginFlow.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var OTP_LENGTH = 6;
 var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
 function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
-  const [step, setStep] = useState6("email");
-  const [email, setEmail] = useState6("");
-  const handleRequestOtp = useCallback5(async (emailValue) => {
+  const [step, setStep] = useState7("email");
+  const [email, setEmail] = useState7("");
+  const handleRequestOtp = useCallback6(async (emailValue) => {
     const success = await requestOtp(emailValue);
     if (success)
       setStep("otp");
   }, [requestOtp]);
-  const handleVerifyOtp = useCallback5(async (code) => {
+  const handleVerifyOtp = useCallback6(async (code) => {
     await verifyOtp(email, code);
   }, [verifyOtp, email]);
-  const handleBack = useCallback5(() => {
+  const handleBack = useCallback6(() => {
     setStep("email");
   }, []);
-  const handleResend = useCallback5(async () => {
+  const handleResend = useCallback6(async () => {
     await requestOtp(email);
   }, [requestOtp, email]);
   if (step === "otp") {
-    return /* @__PURE__ */ jsx8(OtpStep, {
+    return /* @__PURE__ */ jsx9(OtpStep, {
       email,
       onSubmit: handleVerifyOtp,
       onResend: handleResend,
@@ -1300,7 +2428,7 @@ function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
       isSubmitting
     });
   }
-  return /* @__PURE__ */ jsx8(EmailStep, {
+  return /* @__PURE__ */ jsx9(EmailStep, {
     email,
     onEmailChange: setEmail,
     onSubmit: handleRequestOtp,
@@ -1314,30 +2442,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
     if (email.trim())
       onSubmit(email.trim());
   }
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx8(Mail, {
+          /* @__PURE__ */ jsx9(Mail, {
             className: "skippr:mx-auto skippr:mb-2 skippr:size-6 skippr:text-primary"
           }),
-          /* @__PURE__ */ jsx8("p", {
+          /* @__PURE__ */ jsx9("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Sign in to continue"
           }),
-          /* @__PURE__ */ jsx8("p", {
+          /* @__PURE__ */ jsx9("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: "Your email will be used to identify you across sessions"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs7("form", {
+      /* @__PURE__ */ jsxs8("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx8("input", {
+          /* @__PURE__ */ jsx9("input", {
             type: "email",
             placeholder: "you@example.com",
             value: email,
@@ -1346,15 +2474,15 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
             required: true,
             className: "skippr:w-full skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:px-3 skippr:py-2 skippr:text-sm skippr:text-foreground skippr:placeholder-muted-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
           }),
-          /* @__PURE__ */ jsx8(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "submit",
             disabled: isSubmitting || !email.trim(),
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx9(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Continue"
           }),
-          error && /* @__PURE__ */ jsx8("p", {
+          error && /* @__PURE__ */ jsx9("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           })
@@ -1364,30 +2492,30 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
   });
 }
 function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
-  const [digits, setDigits] = useState6(Array(OTP_LENGTH).fill(""));
-  const [resendCooldown, setResendCooldown] = useState6(0);
-  const inputRefs = useRef3([]);
-  const submittedRef = useRef3(false);
-  useEffect8(() => {
+  const [digits, setDigits] = useState7(Array(OTP_LENGTH).fill(""));
+  const [resendCooldown, setResendCooldown] = useState7(0);
+  const inputRefs = useRef5([]);
+  const submittedRef = useRef5(false);
+  useEffect10(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  useEffect8(() => {
+  useEffect10(() => {
     if (error)
       submittedRef.current = false;
   }, [error]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (resendCooldown <= 0)
       return;
     const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
     return () => clearTimeout(timer);
   }, [resendCooldown]);
-  const submitCode = useCallback5((code) => {
+  const submitCode = useCallback6((code) => {
     if (submittedRef.current || isSubmitting)
       return;
     submittedRef.current = true;
     onSubmit(code);
   }, [onSubmit, isSubmitting]);
-  const handleDigitChange = useCallback5((index2, value) => {
+  const handleDigitChange = useCallback6((index2, value) => {
     const digit = value.replace(/\D/g, "").slice(-1);
     const newDigits = [...digits];
     newDigits[index2] = digit;
@@ -1401,12 +2529,12 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
         submitCode(code);
     }
   }, [digits, submitCode]);
-  const handleKeyDown = useCallback5((index2, e) => {
+  const handleKeyDown = useCallback6((index2, e) => {
     if (e.key === "Backspace" && !digits[index2] && index2 > 0) {
       inputRefs.current[index2 - 1]?.focus();
     }
   }, [digits]);
-  const handlePaste = useCallback5((e) => {
+  const handlePaste = useCallback6((e) => {
     e.preventDefault();
     const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
     if (pasted.length > 0) {
@@ -1434,22 +2562,22 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
     submittedRef.current = false;
     inputRefs.current[0]?.focus();
   }
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "skippr:mb-4 skippr:text-center",
         children: [
-          /* @__PURE__ */ jsx8("p", {
+          /* @__PURE__ */ jsx9("p", {
             className: "skippr:text-sm skippr:font-medium skippr:text-foreground",
             children: "Enter verification code"
           }),
-          /* @__PURE__ */ jsxs7("p", {
+          /* @__PURE__ */ jsxs8("p", {
             className: "skippr:mt-1 skippr:text-xs skippr:text-muted-foreground",
             children: [
               "We sent a 6-digit code to",
               " ",
-              /* @__PURE__ */ jsx8("span", {
+              /* @__PURE__ */ jsx9("span", {
                 className: "skippr:font-medium skippr:text-foreground",
                 children: email
               })
@@ -1457,13 +2585,13 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs7("form", {
+      /* @__PURE__ */ jsxs8("form", {
         onSubmit: handleSubmit,
         className: "skippr:flex skippr:flex-col skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx8("div", {
+          /* @__PURE__ */ jsx9("div", {
             className: "skippr:flex skippr:justify-center skippr:gap-1.5",
-            children: digits.map((digit, index2) => /* @__PURE__ */ jsx8("input", {
+            children: digits.map((digit, index2) => /* @__PURE__ */ jsx9("input", {
               ref: (el) => {
                 inputRefs.current[index2] = el;
               },
@@ -1478,29 +2606,29 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
               className: "skippr:h-10 skippr:w-10 skippr:rounded-md skippr:border skippr:border-border skippr:bg-background skippr:text-center skippr:text-sm skippr:font-semibold skippr:text-foreground skippr:outline-none focus:skippr:ring-2 focus:skippr:ring-primary/30 focus:skippr:border-primary disabled:skippr:opacity-50"
             }, DIGIT_KEYS[index2]))
           }),
-          error && /* @__PURE__ */ jsx8("p", {
+          error && /* @__PURE__ */ jsx9("p", {
             className: "skippr:text-xs skippr:text-center skippr:text-destructive",
             children: error
           }),
-          /* @__PURE__ */ jsx8(Button, {
+          /* @__PURE__ */ jsx9(Button, {
             type: "submit",
             disabled: isSubmitting || digits.join("").length !== OTP_LENGTH,
             className: "skippr:w-full",
-            children: isSubmitting ? /* @__PURE__ */ jsx8(LoaderCircle, {
+            children: isSubmitting ? /* @__PURE__ */ jsx9(LoaderCircle, {
               className: "skippr:size-4 skippr:animate-spin"
             }) : "Verify"
           }),
-          /* @__PURE__ */ jsxs7("div", {
+          /* @__PURE__ */ jsxs8("div", {
             className: "skippr:flex skippr:items-center skippr:justify-between skippr:text-xs",
             children: [
-              /* @__PURE__ */ jsx8("button", {
+              /* @__PURE__ */ jsx9("button", {
                 type: "button",
                 onClick: onBack,
                 disabled: isSubmitting,
                 className: "skippr:text-muted-foreground hover:skippr:text-foreground skippr:transition-colors disabled:skippr:opacity-50",
                 children: "Change email"
               }),
-              /* @__PURE__ */ jsx8("button", {
+              /* @__PURE__ */ jsx9("button", {
                 type: "button",
                 onClick: handleResend,
                 disabled: isSubmitting || resendCooldown > 0,
@@ -1516,50 +2644,50 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
 }
 
 // src/components/MeetingControls.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var CONTROL_BUTTON = "skippr:flex skippr:size-11 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-full skippr:transition-colors";
-function MeetingControls({ onHangUp }) {
+function MeetingControls({ onHangUp, showScreenShareToggle = true }) {
   const { isMuted, toggleMute, isScreenSharing, toggleScreenShare } = useMediaControls();
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     className: "skippr:shrink-0 skippr:border-t skippr:border-border skippr:bg-background skippr:px-4 skippr:py-4",
     children: [
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "skippr:flex skippr:items-center skippr:justify-center skippr:gap-3",
         children: [
-          /* @__PURE__ */ jsx9("button", {
+          /* @__PURE__ */ jsx10("button", {
             type: "button",
             onClick: toggleMute,
             "aria-label": isMuted ? "Unmute" : "Mute",
             className: cn(CONTROL_BUTTON, isMuted ? "skippr:bg-destructive/15 skippr:text-destructive skippr:hover:bg-destructive/25" : "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80"),
-            children: isMuted ? /* @__PURE__ */ jsx9(MicOff, {
+            children: isMuted ? /* @__PURE__ */ jsx10(MicOff, {
               className: "skippr:size-5"
-            }) : /* @__PURE__ */ jsx9(Mic, {
+            }) : /* @__PURE__ */ jsx10(Mic, {
               className: "skippr:size-5"
             })
           }),
-          /* @__PURE__ */ jsx9("button", {
+          showScreenShareToggle && /* @__PURE__ */ jsx10("button", {
             type: "button",
             onClick: toggleScreenShare,
             "aria-label": isScreenSharing ? "Stop sharing screen" : "Share screen",
             className: cn(CONTROL_BUTTON, isScreenSharing ? "skippr:bg-bubble skippr:text-white skippr:hover:brightness-110" : "skippr:bg-muted skippr:text-foreground skippr:hover:bg-muted/80"),
-            children: isScreenSharing ? /* @__PURE__ */ jsx9(MonitorOff, {
+            children: isScreenSharing ? /* @__PURE__ */ jsx10(MonitorOff, {
               className: "skippr:size-5"
-            }) : /* @__PURE__ */ jsx9(Monitor, {
+            }) : /* @__PURE__ */ jsx10(Monitor, {
               className: "skippr:size-5"
             })
           }),
-          /* @__PURE__ */ jsx9("button", {
+          /* @__PURE__ */ jsx10("button", {
             type: "button",
             onClick: onHangUp,
             "aria-label": "End session",
             className: cn(CONTROL_BUTTON, "skippr:bg-destructive skippr:text-destructive-foreground skippr:hover:bg-destructive/90"),
-            children: /* @__PURE__ */ jsx9(PhoneOff, {
+            children: /* @__PURE__ */ jsx10(PhoneOff, {
               className: "skippr:size-5"
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx9("p", {
+      /* @__PURE__ */ jsx10("p", {
         className: "skippr:mt-3 skippr:text-center skippr:text-[10px] skippr:text-muted-foreground",
         children: "Powered by Skippr"
       })
@@ -1568,17 +2696,17 @@ function MeetingControls({ onHangUp }) {
 }
 
 // src/components/MessageList.tsx
-import { useEffect as useEffect10, useRef as useRef5 } from "react";
+import { useEffect as useEffect12, useRef as useRef7 } from "react";
 
 // src/components/ChatInput.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState8 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var MAX_INPUT_HEIGHT = 60;
 function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
-  const [inputText, setInputText] = useState7("");
-  const textareaRef = useRef4(null);
+  const [inputText, setInputText] = useState8("");
+  const textareaRef = useRef6(null);
   const canSend = inputText.trim().length > 0 && !isSendingChat;
-  useEffect9(() => {
+  useEffect11(() => {
     if (autoFocus)
       textareaRef.current?.focus();
   }, [autoFocus]);
@@ -1609,13 +2737,13 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
       handleSubmit(e);
     }
   }
-  return /* @__PURE__ */ jsx10("form", {
+  return /* @__PURE__ */ jsx11("form", {
     onSubmit: handleSubmit,
     className: "skippr:border-t skippr:border-border skippr:p-3",
-    children: /* @__PURE__ */ jsxs9("div", {
+    children: /* @__PURE__ */ jsxs10("div", {
       className: "skippr:flex skippr:items-center skippr:gap-2 skippr:rounded-xl skippr:bg-background skippr:ring-1 skippr:ring-foreground/10 skippr:px-3 skippr:py-2",
       children: [
-        /* @__PURE__ */ jsx10("textarea", {
+        /* @__PURE__ */ jsx11("textarea", {
           ref: textareaRef,
           rows: 1,
           value: inputText,
@@ -1625,12 +2753,12 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
           className: "skippr:flex-1 skippr:resize-none skippr:overflow-y-auto skippr:bg-transparent skippr:text-sm skippr:leading-5 skippr:text-foreground skippr:placeholder:text-muted-foreground skippr:outline-none",
           style: { maxHeight: `${MAX_INPUT_HEIGHT}px` }
         }),
-        /* @__PURE__ */ jsx10("button", {
+        /* @__PURE__ */ jsx11("button", {
           type: "submit",
           disabled: !canSend,
           "aria-label": "Send message",
           className: cn("skippr:flex skippr:size-8 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-lg skippr:transition-colors", canSend ? "skippr:bg-primary skippr:text-primary-foreground skippr:hover:bg-primary/90" : "skippr:bg-muted-foreground/20 skippr:text-muted-foreground/60"),
-          children: /* @__PURE__ */ jsx10(Send, {
+          children: /* @__PURE__ */ jsx11(Send, {
             className: "skippr:size-3.5"
           })
         })
@@ -1640,7 +2768,7 @@ function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function formatTimestamp(ts) {
   return new Date(ts).toLocaleTimeString("en-US", {
     hour: "numeric",
@@ -1650,23 +2778,23 @@ function formatTimestamp(ts) {
 }
 function ChatMessage({ message }) {
   const isAgent = message.role === "assistant";
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     className: cn("skippr:flex skippr:gap-2", isAgent ? "skippr:items-start" : "skippr:justify-end"),
     children: [
-      isAgent && /* @__PURE__ */ jsx11("div", {
+      isAgent && /* @__PURE__ */ jsx12("div", {
         className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
-        children: /* @__PURE__ */ jsx11(Sparkles, {
+        children: /* @__PURE__ */ jsx12(Sparkles, {
           className: "skippr:size-3.5 skippr:text-primary-foreground"
         })
       }),
-      /* @__PURE__ */ jsxs10("div", {
+      /* @__PURE__ */ jsxs11("div", {
         className: cn("skippr:flex skippr:max-w-[80%] skippr:flex-col", isAgent ? "skippr:items-start" : "skippr:items-end"),
         children: [
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx12("div", {
             className: cn("skippr:rounded-2xl skippr:px-4 skippr:py-2.5 skippr:text-sm skippr:leading-relaxed", isAgent ? "skippr:border skippr:border-border skippr:bg-card skippr:text-foreground" : "skippr:bg-primary skippr:text-primary-foreground"),
             children: message.content
           }),
-          message.timestamp && /* @__PURE__ */ jsx11("span", {
+          message.timestamp && /* @__PURE__ */ jsx12("span", {
             className: "skippr:mt-1 skippr:px-1 skippr:text-[10px] skippr:text-muted-foreground/60",
             children: formatTimestamp(message.timestamp)
           })
@@ -1677,33 +2805,33 @@ function ChatMessage({ message }) {
 }
 
 // src/components/TypingIndicator.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function TypingIndicator() {
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     className: "skippr:flex skippr:items-start skippr:gap-2 skippr:animate-skippr-tab-fade",
     children: [
-      /* @__PURE__ */ jsx12("div", {
+      /* @__PURE__ */ jsx13("div", {
         className: "skippr:mt-0.5 skippr:flex skippr:size-7 skippr:shrink-0 skippr:items-center skippr:justify-center skippr:rounded-md skippr:bg-primary",
-        children: /* @__PURE__ */ jsx12(Sparkles, {
+        children: /* @__PURE__ */ jsx13(Sparkles, {
           className: "skippr:size-3.5 skippr:text-primary-foreground"
         })
       }),
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs12("div", {
         className: "skippr:inline-flex skippr:items-center skippr:gap-1 skippr:rounded-2xl skippr:border skippr:border-primary/20 skippr:bg-primary/10 skippr:px-4 skippr:py-2 skippr:text-xs skippr:text-primary",
         children: [
-          /* @__PURE__ */ jsx12("span", {
+          /* @__PURE__ */ jsx13("span", {
             children: "Agent is analyzing your screen"
           }),
-          /* @__PURE__ */ jsxs11("span", {
+          /* @__PURE__ */ jsxs12("span", {
             className: "skippr:inline-flex skippr:items-center skippr:gap-[2px]",
             children: [
-              /* @__PURE__ */ jsx12("span", {
+              /* @__PURE__ */ jsx13("span", {
                 className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:0ms]"
               }),
-              /* @__PURE__ */ jsx12("span", {
+              /* @__PURE__ */ jsx13("span", {
                 className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:200ms]"
               }),
-              /* @__PURE__ */ jsx12("span", {
+              /* @__PURE__ */ jsx13("span", {
                 className: "skippr:size-1 skippr:rounded-full skippr:bg-primary skippr:animate-skippr-thinking-dot skippr:[animation-delay:400ms]"
               })
             ]
@@ -1715,7 +2843,7 @@ function TypingIndicator() {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function MessageList({
   messages,
   isStreaming,
@@ -1723,31 +2851,31 @@ function MessageList({
   isSendingChat,
   autoFocus = false
 }) {
-  const scrollRef = useRef5(null);
+  const scrollRef = useRef7(null);
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
-  useEffect10(() => {
+  useEffect12(() => {
     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages.length, lastMessage?.content]);
   const showTyping = isStreaming && lastMessage?.role === "assistant" && lastMessage.content === "";
-  return /* @__PURE__ */ jsxs12("div", {
+  return /* @__PURE__ */ jsxs13("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs13("div", {
         className: "skippr:min-h-0 skippr:flex-1 skippr:space-y-4 skippr:overflow-y-auto skippr:p-4",
         children: [
-          messages.length === 0 && !showTyping && /* @__PURE__ */ jsx13(LoadingDots, {
+          messages.length === 0 && !showTyping && /* @__PURE__ */ jsx14(LoadingDots, {
             label: "Waiting for conversation to begin..."
           }),
-          messages.map((message) => /* @__PURE__ */ jsx13(ChatMessage, {
+          messages.map((message) => /* @__PURE__ */ jsx14(ChatMessage, {
             message
           }, message.id)),
-          showTyping && /* @__PURE__ */ jsx13(TypingIndicator, {}),
-          /* @__PURE__ */ jsx13("div", {
+          showTyping && /* @__PURE__ */ jsx14(TypingIndicator, {}),
+          /* @__PURE__ */ jsx14("div", {
             ref: scrollRef
           })
         ]
       }),
-      /* @__PURE__ */ jsx13(ChatInput, {
+      /* @__PURE__ */ jsx14(ChatInput, {
         sendChatMessage,
         isSendingChat,
         autoFocus
@@ -1757,49 +2885,49 @@ function MessageList({
 }
 
 // src/components/SessionAgenda.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function SessionAgenda({ phases, hasStarted }) {
   if (phases.length === 0 || !hasStarted) {
-    return /* @__PURE__ */ jsx14("div", {
+    return /* @__PURE__ */ jsx15("div", {
       className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-      children: /* @__PURE__ */ jsx14(LoadingDots, {
+      children: /* @__PURE__ */ jsx15(LoadingDots, {
         label: "Waiting for agenda to load..."
       })
     });
   }
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     className: "skippr:flex-1 skippr:overflow-y-auto skippr:px-4 skippr:py-4",
-    children: /* @__PURE__ */ jsx14("div", {
+    children: /* @__PURE__ */ jsx15("div", {
       className: "skippr:space-y-1",
       children: phases.map((phase) => {
         const isActive = phase.status === "active";
         const isCompleted = phase.status === "completed";
-        return /* @__PURE__ */ jsxs13("div", {
+        return /* @__PURE__ */ jsxs14("div", {
           className: cn("skippr:flex skippr:items-start skippr:gap-2.5 skippr:rounded-lg skippr:p-2 skippr:transition-colors", isActive && "skippr:bg-primary/10"),
           children: [
-            /* @__PURE__ */ jsx14("div", {
+            /* @__PURE__ */ jsx15("div", {
               className: "skippr:mt-0.5",
-              children: isCompleted ? /* @__PURE__ */ jsx14(CircleCheck, {
+              children: isCompleted ? /* @__PURE__ */ jsx15(CircleCheck, {
                 className: "skippr:size-4 skippr:text-chart-3"
-              }) : isActive ? /* @__PURE__ */ jsx14(Circle, {
+              }) : isActive ? /* @__PURE__ */ jsx15(Circle, {
                 className: "skippr:size-4 skippr:fill-primary/30 skippr:text-primary"
-              }) : /* @__PURE__ */ jsx14(Circle, {
+              }) : /* @__PURE__ */ jsx15(Circle, {
                 className: "skippr:size-4 skippr:text-muted-foreground/30"
               })
             }),
-            /* @__PURE__ */ jsxs13("div", {
+            /* @__PURE__ */ jsxs14("div", {
               className: "skippr:min-w-0 skippr:flex-1",
               children: [
-                /* @__PURE__ */ jsx14("p", {
+                /* @__PURE__ */ jsx15("p", {
                   className: cn("skippr:text-sm", isCompleted && "skippr:text-muted-foreground skippr:line-through", isActive && "skippr:font-medium skippr:text-foreground", phase.status === "pending" && "skippr:text-muted-foreground"),
                   children: phase.name
                 }),
-                phase.highlights.length > 0 && /* @__PURE__ */ jsx14("ul", {
+                phase.highlights.length > 0 && /* @__PURE__ */ jsx15("ul", {
                   className: "skippr:mt-1 skippr:space-y-0.5",
-                  children: phase.highlights.map((text) => /* @__PURE__ */ jsxs13("li", {
+                  children: phase.highlights.map((text) => /* @__PURE__ */ jsxs14("li", {
                     className: cn("skippr:flex skippr:items-center skippr:gap-1.5 skippr:text-[11px] skippr:leading-tight", isCompleted ? "skippr:text-muted-foreground/40 skippr:line-through" : "skippr:text-muted-foreground/70"),
                     children: [
-                      /* @__PURE__ */ jsx14("span", {
+                      /* @__PURE__ */ jsx15("span", {
                         className: "skippr:size-1 skippr:shrink-0 skippr:rounded-full skippr:bg-current"
                       }),
                       text
@@ -1816,12 +2944,12 @@ function SessionAgenda({ phases, hasStarted }) {
 }
 
 // src/components/SessionWarningBanner.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var SESSION_WARNING_THRESHOLD_SECS = 60;
 function SessionWarningBanner({ remaining }) {
   if (remaining === null || remaining <= 0 || remaining > SESSION_WARNING_THRESHOLD_SECS)
     return null;
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-testid": "session-warning-banner",
     className: "skippr:bg-red-50 skippr:px-4 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:font-medium skippr:text-red-700",
     children: "Session ending soon"
@@ -1829,24 +2957,24 @@ function SessionWarningBanner({ remaining }) {
 }
 
 // src/components/StartSessionPrompt.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function StartSessionPrompt({
   onStartSession,
   isStarting,
   error,
   label = "Talk to Skippr"
 }) {
-  return /* @__PURE__ */ jsxs14("div", {
+  return /* @__PURE__ */ jsxs15("div", {
     className: "skippr:flex skippr:flex-1 skippr:flex-col skippr:items-center skippr:justify-center skippr:gap-3 skippr:px-4",
     children: [
-      /* @__PURE__ */ jsx16("button", {
+      /* @__PURE__ */ jsx17("button", {
         type: "button",
         onClick: onStartSession,
         disabled: isStarting,
         className: "skippr:cursor-pointer skippr:rounded-xl skippr:bg-primary skippr:px-8 skippr:py-3 skippr:text-sm skippr:font-medium skippr:text-primary-foreground skippr:transition-all skippr:hover:bg-primary/90 skippr:disabled:cursor-not-allowed skippr:disabled:opacity-60",
         children: isStarting ? "Starting..." : label
       }),
-      error && /* @__PURE__ */ jsx16("p", {
+      error && /* @__PURE__ */ jsx17("p", {
         className: "skippr:text-xs skippr:text-destructive",
         children: error
       })
@@ -1855,7 +2983,7 @@ function StartSessionPrompt({
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16, Fragment as Fragment4 } from "react/jsx-runtime";
 function Sidebar({
   hideControls = false,
   hideHeader = false,
@@ -1878,11 +3006,12 @@ function Sidebar({
     isAuthSubmitting,
     sidebarTab: activeTab,
     setSidebarTab: setActiveTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode
   } = useLiveAgent();
   const isFloating = variant === "floating";
   const isSidebar = variant === "sidebar";
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isSidebar)
       return;
     const prop = position === "right" ? "marginRight" : "marginLeft";
@@ -1896,22 +3025,22 @@ function Sidebar({
       document.body.style.transition = "";
     };
   }, [isSidebar, isPanelOpen, position]);
-  return /* @__PURE__ */ jsxs15("div", {
+  return /* @__PURE__ */ jsxs16("div", {
     className: cn("skippr:fixed skippr:z-[9999]", "skippr:bg-card", "skippr:flex skippr:flex-col", "skippr:overflow-hidden", isFloating && "skippr:border skippr:border-border skippr:bottom-[88px] skippr:h-[calc(100vh-112px)] skippr:rounded-2xl skippr:shadow-[0_8px_30px_rgba(0,0,0,0.16),0_4px_12px_rgba(0,0,0,0.08)]", isFloating && (position === "right" ? "skippr:right-6" : "skippr:left-6"), isFloating && "skippr:transition-[opacity,transform] skippr:duration-300 skippr:ease-in-out", isFloating && (position === "right" ? "skippr:origin-bottom-right" : "skippr:origin-bottom-left"), isFloating && !isPanelOpen && "skippr:scale-0 skippr:opacity-0 skippr:pointer-events-none", isFloating && isPanelOpen && "skippr:scale-100 skippr:opacity-100", isSidebar && "skippr:top-0 skippr:h-full", isSidebar && "skippr:transition-[width] skippr:duration-300 skippr:ease-in-out", isSidebar && position === "right" && "skippr:right-0 skippr:border-l skippr:border-l-border", isSidebar && position === "left" && "skippr:left-0 skippr:border-r skippr:border-r-border", isSidebar && !isPanelOpen && "skippr:w-0 skippr:border-0"),
     style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined },
     children: [
-      !hideHeader && /* @__PURE__ */ jsx17(ChatHeader, {}),
-      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx17("div", {
+      !hideHeader && /* @__PURE__ */ jsx18(ChatHeader, {}),
+      !isAuthenticated && isValidating ? /* @__PURE__ */ jsx18("div", {
         className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
-        children: /* @__PURE__ */ jsx17(LoadingDots, {
+        children: /* @__PURE__ */ jsx18(LoadingDots, {
           label: "Loading..."
         })
-      }) : !isAuthenticated ? /* @__PURE__ */ jsx17(LoginFlow, {
+      }) : !isAuthenticated ? /* @__PURE__ */ jsx18(LoginFlow, {
         requestOtp,
         verifyOtp,
         error: authError,
         isSubmitting: isAuthSubmitting
-      }) : /* @__PURE__ */ jsx17(AuthenticatedContent, {
+      }) : /* @__PURE__ */ jsx18(AuthenticatedContent, {
         isConnected,
         onStartSession: startSession,
         onDisconnect: disconnect,
@@ -1921,7 +3050,8 @@ function Sidebar({
         onTabChange: setActiveTab,
         hideControls,
         startSessionLabel,
-        autoFocusChat
+        autoFocusChat,
+        showScreenShareToggle: captureMode === "screenshare"
       })
     ]
   });
@@ -1936,52 +3066,53 @@ function AuthenticatedContent({
   onTabChange,
   hideControls,
   startSessionLabel,
-  autoFocusChat
+  autoFocusChat,
+  showScreenShareToggle
 }) {
-  return /* @__PURE__ */ jsxs15(Fragment3, {
+  return /* @__PURE__ */ jsxs16(Fragment4, {
     children: [
-      isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
-      /* @__PURE__ */ jsxs15("div", {
+      isConnected && /* @__PURE__ */ jsx18(ConnectedBanner, {}),
+      /* @__PURE__ */ jsxs16("div", {
         className: "skippr:flex skippr:gap-2 skippr:border-b skippr:border-border skippr:px-3 skippr:py-2",
         children: [
-          /* @__PURE__ */ jsxs15("button", {
+          /* @__PURE__ */ jsxs16("button", {
             type: "button",
             className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "chat" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
             onClick: () => onTabChange("chat"),
             children: [
-              /* @__PURE__ */ jsx17(MessageCircle, {
+              /* @__PURE__ */ jsx18(MessageCircle, {
                 className: "skippr:size-3.5"
               }),
               "Chat",
-              activeTab === "chat" && /* @__PURE__ */ jsx17("span", {
+              activeTab === "chat" && /* @__PURE__ */ jsx18("span", {
                 className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
               })
             ]
           }),
-          /* @__PURE__ */ jsxs15("button", {
+          /* @__PURE__ */ jsxs16("button", {
             type: "button",
             className: cn("skippr:relative skippr:inline-flex skippr:cursor-pointer skippr:items-center skippr:gap-1.5 skippr:rounded-lg skippr:px-3 skippr:py-2 skippr:text-sm skippr:font-medium skippr:transition-all", activeTab === "agenda" ? "skippr:text-foreground" : "skippr:text-muted-foreground skippr:hover:text-foreground"),
             onClick: () => onTabChange("agenda"),
             children: [
-              /* @__PURE__ */ jsx17(Calendar, {
+              /* @__PURE__ */ jsx18(Calendar, {
                 className: "skippr:size-3.5"
               }),
               "Agenda",
-              activeTab === "agenda" && /* @__PURE__ */ jsx17("span", {
+              activeTab === "agenda" && /* @__PURE__ */ jsx18("span", {
                 className: "skippr:absolute skippr:-bottom-2 skippr:left-3 skippr:right-3 skippr:h-0.5 skippr:rounded-full skippr:bg-foreground"
               })
             ]
           })
         ]
       }),
-      /* @__PURE__ */ jsx17("div", {
+      /* @__PURE__ */ jsx18("div", {
         className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col",
-        children: isConnected || isStarting ? /* @__PURE__ */ jsx17(ConnectedBody, {
+        children: isConnected || isStarting ? /* @__PURE__ */ jsx18(ConnectedBody, {
           activeTab,
           autoFocusChat
-        }) : /* @__PURE__ */ jsx17("div", {
+        }) : /* @__PURE__ */ jsx18("div", {
           className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
-          children: /* @__PURE__ */ jsx17(StartSessionPrompt, {
+          children: /* @__PURE__ */ jsx18(StartSessionPrompt, {
             onStartSession,
             isStarting,
             error,
@@ -1989,15 +3120,16 @@ function AuthenticatedContent({
           })
         }, `${activeTab}-empty`)
       }),
-      isConnected && !hideControls && /* @__PURE__ */ jsx17(MeetingControls, {
-        onHangUp: onDisconnect
+      isConnected && !hideControls && /* @__PURE__ */ jsx18(MeetingControls, {
+        onHangUp: onDisconnect,
+        showScreenShareToggle
       })
     ]
   });
 }
 function ConnectedBanner() {
   const remaining = useSessionRemaining();
-  return /* @__PURE__ */ jsx17(SessionWarningBanner, {
+  return /* @__PURE__ */ jsx18(SessionWarningBanner, {
     remaining
   });
 }
@@ -2008,17 +3140,17 @@ function ConnectedBody({
   const { allMessages, agentState, sendChatMessage, isSendingChat } = useCombinedMessages();
   const { phases } = usePhaseUpdates();
   if (activeTab === "agenda") {
-    return /* @__PURE__ */ jsx17("div", {
+    return /* @__PURE__ */ jsx18("div", {
       className: "skippr:min-h-0 skippr:flex-1 skippr:overflow-y-auto skippr:animate-skippr-tab-fade",
-      children: /* @__PURE__ */ jsx17(SessionAgenda, {
+      children: /* @__PURE__ */ jsx18(SessionAgenda, {
         phases,
         hasStarted: allMessages.length > 0 || agentState === "speaking"
       })
     }, "agenda");
   }
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx18("div", {
     className: "skippr:flex skippr:min-h-0 skippr:flex-1 skippr:flex-col skippr:animate-skippr-tab-fade",
-    children: /* @__PURE__ */ jsx17(MessageList, {
+    children: /* @__PURE__ */ jsx18(MessageList, {
       messages: allMessages,
       isStreaming: agentState === "speaking",
       sendChatMessage,
@@ -2029,45 +3161,55 @@ function ConnectedBody({
 }
 
 // src/components/SidebarTrigger.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SidebarTrigger() {
   const { isPanelOpen, togglePanel, minimizePanel, minimizable, position, isMinimized } = useLiveAgent();
   if (isMinimized)
     return null;
   const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
-  return /* @__PURE__ */ jsx18("button", {
+  return /* @__PURE__ */ jsx19("button", {
     type: "button",
     onClick: handleClick,
     title: isPanelOpen ? "Close chat" : "Open chat",
     "aria-label": isPanelOpen ? "Close chat" : "Open chat",
     className: cn("skippr:fixed skippr:bottom-6 skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white", "skippr:shadow-[0_4px_16px_rgba(45,43,61,0.45),0_2px_4px_rgba(0,0,0,0.1)] skippr:transition-all", "skippr:cursor-pointer skippr:hover:brightness-110 skippr:hover:-translate-y-0.5 skippr:active:translate-y-0", position === "right" ? "skippr:right-6" : "skippr:left-6"),
-    children: isPanelOpen ? /* @__PURE__ */ jsx18(ChevronDown, {
+    children: isPanelOpen ? /* @__PURE__ */ jsx19(ChevronDown, {
       className: "skippr:size-5"
-    }) : /* @__PURE__ */ jsx18(Logo, {
+    }) : /* @__PURE__ */ jsx19(Logo, {
       className: "skippr:size-7"
     })
   });
 }
 
 // src/components/LiveAgent.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-function LiveAgent({
-  agentId,
-  authToken: authTokenProp,
-  appKey,
-  userToken,
-  position = "right",
-  variant = "floating",
-  minimizable = true,
-  defaultOpen = false,
-  welcomeMessage,
-  hideControls = false,
-  hideHeader = false,
-  startSessionLabel = "Talk to Skippr",
-  autoFocusChat = true,
-  showAgentStateBanner = true,
-  children
-}) {
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function LiveAgent(props) {
+  const {
+    agentId,
+    authToken: authTokenProp,
+    appKey,
+    userToken,
+    position = "right",
+    variant = "floating",
+    minimizable = true,
+    defaultOpen = false,
+    welcomeMessage,
+    hideControls = false,
+    hideHeader = false,
+    startSessionLabel = "Talk to Skippr",
+    autoFocusChat = true,
+    showAgentStateBanner = true,
+    children
+  } = props;
+  const captureMode = props.captureMode ?? "screenshare";
+  let agentControls;
+  if ("agentControls" in props && props.agentControls) {
+    if (captureMode === "auto") {
+      agentControls = props.agentControls;
+    } else {
+      console.warn('[Skippr] agentControls requires captureMode: "auto"');
+    }
+  }
   const auth = useAuth({ appKey });
   const effectiveAuthToken = authTokenProp || auth.authToken || undefined;
   const {
@@ -2081,16 +3223,18 @@ function LiveAgent({
     pendingScreenStream
   } = useSession({
     agentId,
+    captureMode,
+    agentControls,
     authToken: effectiveAuthToken,
     appKey,
     userToken
   });
-  const [isPanelOpen, setIsPanelOpen] = useState8(defaultOpen);
-  const [isMinimized, setIsMinimized] = useState8(minimizable && !defaultOpen);
-  const [sidebarTab, setSidebarTab] = useState8("agenda");
-  const [welcomeDismissed, setWelcomeDismissed] = useState8(false);
-  const dismissWelcome = useCallback6(() => setWelcomeDismissed(true), []);
-  const [currentPosition, setCurrentPosition] = useState8(() => {
+  const [isPanelOpen, setIsPanelOpen] = useState9(defaultOpen);
+  const [isMinimized, setIsMinimized] = useState9(minimizable && !defaultOpen);
+  const [sidebarTab, setSidebarTab] = useState9("agenda");
+  const [welcomeDismissed, setWelcomeDismissed] = useState9(false);
+  const dismissWelcome = useCallback7(() => setWelcomeDismissed(true), []);
+  const [currentPosition, setCurrentPosition] = useState9(() => {
     try {
       const saved = localStorage.getItem("skippr_widget_position");
       if (saved === "left" || saved === "right")
@@ -2098,20 +3242,20 @@ function LiveAgent({
     } catch {}
     return position;
   });
-  const setPositionWithPersist = useCallback6((pos) => {
+  const setPositionWithPersist = useCallback7((pos) => {
     setCurrentPosition(pos);
     try {
       localStorage.setItem("skippr_widget_position", pos);
     } catch {}
   }, []);
-  const openPanel = useCallback6(() => setIsPanelOpen(true), []);
-  const closePanel = useCallback6(() => setIsPanelOpen(false), []);
-  const togglePanel = useCallback6(() => setIsPanelOpen((prev) => !prev), []);
-  const expandPanel = useCallback6(() => {
+  const openPanel = useCallback7(() => setIsPanelOpen(true), []);
+  const closePanel = useCallback7(() => setIsPanelOpen(false), []);
+  const togglePanel = useCallback7(() => setIsPanelOpen((prev) => !prev), []);
+  const expandPanel = useCallback7(() => {
     setIsMinimized(false);
     setIsPanelOpen(true);
   }, []);
-  const minimizePanel = useCallback6(() => {
+  const minimizePanel = useCallback7(() => {
     if (!minimizable)
       return;
     setIsMinimized(true);
@@ -2119,8 +3263,8 @@ function LiveAgent({
   }, [minimizable]);
   const isConnected = connection !== null;
   const isAuthenticated = !!userToken || !!authTokenProp || auth.isAuthenticated;
-  const prevConnectionRef = useRef6(connection);
-  useEffect12(() => {
+  const prevConnectionRef = useRef8(connection);
+  useEffect14(() => {
     const connectionChanged = prevConnectionRef.current !== connection;
     prevConnectionRef.current = connection;
     if (connectionChanged && minimizable) {
@@ -2157,7 +3301,9 @@ function LiveAgent({
     isAuthSubmitting: auth.isSubmitting,
     sidebarTab,
     setSidebarTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode,
+    agentControls
   }), [
     connection,
     shouldConnect,
@@ -2186,32 +3332,41 @@ function LiveAgent({
     auth.logout,
     auth.isSubmitting,
     sidebarTab,
-    autoFocusChat
+    autoFocusChat,
+    captureMode,
+    agentControls
   ]);
-  return /* @__PURE__ */ jsx19(LiveAgentContext.Provider, {
+  return /* @__PURE__ */ jsx20(LiveAgentContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxs16(LiveKitRoom, {
+    children: /* @__PURE__ */ jsxs17(LiveKitRoom, {
       serverUrl: connection?.livekitUrl,
       token: connection?.token,
       connect: shouldConnect,
       audio: true,
       onDisconnected: disconnect,
       children: [
-        connection && /* @__PURE__ */ jsx19(RoomAudioRenderer, {}),
-        showAgentStateBanner && /* @__PURE__ */ jsx19(AgentStateBanner, {}),
-        connection && /* @__PURE__ */ jsx19(AutoStartMedia, {
+        connection && /* @__PURE__ */ jsx20(RoomAudioRenderer, {}),
+        connection && captureMode === "screenshare" && /* @__PURE__ */ jsx20(AutoStartMedia, {
           pendingScreenStream
         }),
-        isMinimized && /* @__PURE__ */ jsx19(MinimizedBubble, {
-          welcomeMessage,
-          welcomeDismissed,
-          onDismissWelcome: dismissWelcome
-        }),
-        /* @__PURE__ */ jsx19(SidebarTrigger, {}),
-        /* @__PURE__ */ jsx19(Sidebar, {
-          hideControls,
-          hideHeader,
-          startSessionLabel
+        connection && captureMode === "auto" && /* @__PURE__ */ jsx20(DomCapture, {}),
+        connection && captureMode === "auto" && agentControls?.highlight && /* @__PURE__ */ jsx20(HighlightOverlay, {}),
+        /* @__PURE__ */ jsxs17("div", {
+          id: WIDGET_ROOT_ID,
+          children: [
+            showAgentStateBanner && /* @__PURE__ */ jsx20(AgentStateBanner, {}),
+            isMinimized && /* @__PURE__ */ jsx20(MinimizedBubble, {
+              welcomeMessage,
+              welcomeDismissed,
+              onDismissWelcome: dismissWelcome
+            }),
+            /* @__PURE__ */ jsx20(SidebarTrigger, {}),
+            /* @__PURE__ */ jsx20(Sidebar, {
+              hideControls,
+              hideHeader,
+              startSessionLabel
+            })
+          ]
         }),
         children
       ]
@@ -2219,9 +3374,9 @@ function LiveAgent({
   });
 }
 // src/hooks/useIsLocalSpeaking.ts
-import { useIsSpeaking, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react";
+import { useIsSpeaking, useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
 function useIsLocalSpeaking() {
-  const { localParticipant } = useLocalParticipant5();
+  const { localParticipant } = useLocalParticipant6();
   return useIsSpeaking(localParticipant);
 }
 export {