@skippr/live-agent-sdk 0.83.0 → 0.85.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/dist/esm/lib-exports.js +297 -163
- package/dist/skippr-sdk.css +1 -1
- package/dist/skippr-sdk.js +120 -120
- package/dist/types/capture/labelPlacement.d.ts +2 -0
- package/dist/types/components/LiveAgent.d.ts +0 -1
- package/dist/types/components/ShadowHost.d.ts +2 -1
- package/dist/types/context/LiveAgentContext.d.ts +7 -0
- package/dist/types/hooks/useAuth.d.ts +1 -0
- package/dist/types/hooks/useAvailableModules.d.ts +2 -1
- package/dist/types/hooks/useOnceTrue.d.ts +1 -0
- package/dist/types/lib/brandForeground.d.ts +2 -0
- package/package.json +1 -1
package/dist/esm/lib-exports.js
CHANGED
|
@@ -8,7 +8,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
8
8
|
|
|
9
9
|
// src/components/LiveAgent.tsx
|
|
10
10
|
import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react";
|
|
11
|
-
import { useCallback as useCallback18, useEffect as
|
|
11
|
+
import { useCallback as useCallback18, useEffect as useEffect30, useMemo as useMemo7, useRef as useRef25, useState as useState22 } from "react";
|
|
12
12
|
|
|
13
13
|
// src/capture/useAgentCursor.ts
|
|
14
14
|
import { useEffect, useState } from "react";
|
|
@@ -599,15 +599,20 @@ function clearStoredToken(appKey) {
|
|
|
599
599
|
function useAuth({ appKey }) {
|
|
600
600
|
const [authToken, setAuthToken] = useState5(null);
|
|
601
601
|
const [isValidating, setIsValidating] = useState5(false);
|
|
602
|
+
const [hasResolvedStoredToken, setHasResolvedStoredToken] = useState5(false);
|
|
602
603
|
const [isSubmitting, setIsSubmitting] = useState5(false);
|
|
603
604
|
const [error, setError] = useState5("");
|
|
604
605
|
const isAuthenticated = authToken !== null;
|
|
605
606
|
useEffect4(() => {
|
|
606
|
-
if (!appKey)
|
|
607
|
+
if (!appKey) {
|
|
608
|
+
setHasResolvedStoredToken(true);
|
|
607
609
|
return;
|
|
610
|
+
}
|
|
608
611
|
const stored = getStoredToken(appKey);
|
|
609
|
-
if (!stored)
|
|
612
|
+
if (!stored) {
|
|
613
|
+
setHasResolvedStoredToken(true);
|
|
610
614
|
return;
|
|
615
|
+
}
|
|
611
616
|
async function validateStoredToken() {
|
|
612
617
|
setIsValidating(true);
|
|
613
618
|
try {
|
|
@@ -624,6 +629,7 @@ function useAuth({ appKey }) {
|
|
|
624
629
|
clearStoredToken(appKey);
|
|
625
630
|
} finally {
|
|
626
631
|
setIsValidating(false);
|
|
632
|
+
setHasResolvedStoredToken(true);
|
|
627
633
|
}
|
|
628
634
|
}
|
|
629
635
|
validateStoredToken();
|
|
@@ -713,6 +719,7 @@ function useAuth({ appKey }) {
|
|
|
713
719
|
return {
|
|
714
720
|
isAuthenticated,
|
|
715
721
|
isValidating,
|
|
722
|
+
hasResolvedStoredToken,
|
|
716
723
|
authToken,
|
|
717
724
|
requestOtp,
|
|
718
725
|
verifyOtp,
|
|
@@ -853,6 +860,7 @@ function useAvailableModules({
|
|
|
853
860
|
}) {
|
|
854
861
|
const [modules, setModules] = useState6([]);
|
|
855
862
|
const [defaultSelection, setDefaultSelection] = useState6(EMPTY_DEFAULT);
|
|
863
|
+
const [appearance, setAppearance] = useState6(null);
|
|
856
864
|
const [isLoading, setIsLoading] = useState6(false);
|
|
857
865
|
const [hasResolved, setHasResolved] = useState6(false);
|
|
858
866
|
const [error, setError] = useState6(null);
|
|
@@ -870,6 +878,7 @@ function useAvailableModules({
|
|
|
870
878
|
const data = await resp.json();
|
|
871
879
|
setModules(Array.isArray(data?.modules) ? data.modules : []);
|
|
872
880
|
setDefaultSelection(data?.default ?? EMPTY_DEFAULT);
|
|
881
|
+
setAppearance(data?.appearance ?? null);
|
|
873
882
|
} catch (e) {
|
|
874
883
|
setError(e instanceof Error ? e.message : "Failed to load modules");
|
|
875
884
|
} finally {
|
|
@@ -885,6 +894,7 @@ function useAvailableModules({
|
|
|
885
894
|
return {
|
|
886
895
|
modules,
|
|
887
896
|
defaultSelection,
|
|
897
|
+
appearance,
|
|
888
898
|
isLoading,
|
|
889
899
|
hasResolved,
|
|
890
900
|
error,
|
|
@@ -892,16 +902,27 @@ function useAvailableModules({
|
|
|
892
902
|
};
|
|
893
903
|
}
|
|
894
904
|
|
|
905
|
+
// src/hooks/useOnceTrue.ts
|
|
906
|
+
import { useEffect as useEffect7, useState as useState7 } from "react";
|
|
907
|
+
function useOnceTrue(value) {
|
|
908
|
+
const [latched, setLatched] = useState7(false);
|
|
909
|
+
useEffect7(() => {
|
|
910
|
+
if (value)
|
|
911
|
+
setLatched(true);
|
|
912
|
+
}, [value]);
|
|
913
|
+
return latched;
|
|
914
|
+
}
|
|
915
|
+
|
|
895
916
|
// src/hooks/usePlanUpdates.ts
|
|
896
917
|
import { useCallback as useCallback7 } from "react";
|
|
897
918
|
|
|
898
919
|
// src/hooks/useAgentState.ts
|
|
899
920
|
import { useRemoteParticipants } from "@livekit/components-react/hooks";
|
|
900
|
-
import { useEffect as
|
|
921
|
+
import { useEffect as useEffect8, useState as useState8 } from "react";
|
|
901
922
|
function useAgentState(attributeKey, parse, initial) {
|
|
902
|
-
const [value, setValue] =
|
|
923
|
+
const [value, setValue] = useState8(initial);
|
|
903
924
|
const remoteParticipants = useRemoteParticipants();
|
|
904
|
-
|
|
925
|
+
useEffect8(() => {
|
|
905
926
|
const agentParticipant = remoteParticipants.find((p) => p.attributes?.[attributeKey]);
|
|
906
927
|
if (agentParticipant) {
|
|
907
928
|
const attr = agentParticipant.attributes?.[attributeKey];
|
|
@@ -952,7 +973,7 @@ function usePlanUpdates() {
|
|
|
952
973
|
}
|
|
953
974
|
|
|
954
975
|
// src/hooks/useSession.ts
|
|
955
|
-
import { useCallback as useCallback8, useEffect as
|
|
976
|
+
import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef4, useState as useState9 } from "react";
|
|
956
977
|
var API_URL4 = "https://specialist.skippr.ai/api";
|
|
957
978
|
async function fetchSessionMessages(sessionId, authedFetch) {
|
|
958
979
|
try {
|
|
@@ -1004,20 +1025,20 @@ function useSession({
|
|
|
1004
1025
|
onStartError,
|
|
1005
1026
|
onDisconnect
|
|
1006
1027
|
}) {
|
|
1007
|
-
const [connection, setConnection] =
|
|
1008
|
-
const [shouldConnect, setShouldConnect] =
|
|
1009
|
-
const [isStarting, setIsStarting] =
|
|
1010
|
-
const [isDisconnecting, setIsDisconnecting] =
|
|
1011
|
-
const [error, setError] =
|
|
1012
|
-
const [errorCode, setErrorCode] =
|
|
1013
|
-
const [sessionId, setSessionId] =
|
|
1014
|
-
const [bearerToken, setBearerToken] =
|
|
1015
|
-
const [pendingScreenStream, setPendingScreenStream] =
|
|
1016
|
-
const [isPaused, setIsPaused] =
|
|
1017
|
-
const [isPausing, setIsPausing] =
|
|
1018
|
-
const [pauseTimeoutSeconds, setPauseTimeoutSeconds] =
|
|
1019
|
-
const [historyMessages, setHistoryMessages] =
|
|
1020
|
-
const [authFailed, setAuthFailed] =
|
|
1028
|
+
const [connection, setConnection] = useState9(null);
|
|
1029
|
+
const [shouldConnect, setShouldConnect] = useState9(false);
|
|
1030
|
+
const [isStarting, setIsStarting] = useState9(false);
|
|
1031
|
+
const [isDisconnecting, setIsDisconnecting] = useState9(false);
|
|
1032
|
+
const [error, setError] = useState9("");
|
|
1033
|
+
const [errorCode, setErrorCode] = useState9(null);
|
|
1034
|
+
const [sessionId, setSessionId] = useState9(null);
|
|
1035
|
+
const [bearerToken, setBearerToken] = useState9(authToken ?? null);
|
|
1036
|
+
const [pendingScreenStream, setPendingScreenStream] = useState9(null);
|
|
1037
|
+
const [isPaused, setIsPaused] = useState9(false);
|
|
1038
|
+
const [isPausing, setIsPausing] = useState9(false);
|
|
1039
|
+
const [pauseTimeoutSeconds, setPauseTimeoutSeconds] = useState9(null);
|
|
1040
|
+
const [historyMessages, setHistoryMessages] = useState9([]);
|
|
1041
|
+
const [authFailed, setAuthFailed] = useState9(false);
|
|
1021
1042
|
const tokenRef = useRef4(authToken ? { token: authToken, expiresAt: null } : null);
|
|
1022
1043
|
const getUserTokenRef = useRef4(getUserToken);
|
|
1023
1044
|
getUserTokenRef.current = getUserToken ?? (userToken ? () => Promise.resolve(userToken) : undefined);
|
|
@@ -1098,7 +1119,7 @@ function useSession({
|
|
|
1098
1119
|
setAuthFailed(false);
|
|
1099
1120
|
return resp;
|
|
1100
1121
|
}, [canExchange, getValidBearer, reExchange]);
|
|
1101
|
-
|
|
1122
|
+
useEffect9(() => {
|
|
1102
1123
|
let stale = false;
|
|
1103
1124
|
if (authToken) {
|
|
1104
1125
|
tokenRef.current = { token: authToken, expiresAt: null };
|
|
@@ -1120,7 +1141,7 @@ function useSession({
|
|
|
1120
1141
|
const isStartingRef = useRef4(false);
|
|
1121
1142
|
const pauseOnUnloadRef = useRef4(null);
|
|
1122
1143
|
pauseOnUnloadRef.current = connection !== null && !isPaused && sessionId && bearerToken ? { sessionId, bearerToken } : null;
|
|
1123
|
-
|
|
1144
|
+
useEffect9(() => {
|
|
1124
1145
|
const onPageHide = () => {
|
|
1125
1146
|
const pending = pauseOnUnloadRef.current;
|
|
1126
1147
|
if (!pending)
|
|
@@ -1301,7 +1322,7 @@ function useSession({
|
|
|
1301
1322
|
}
|
|
1302
1323
|
|
|
1303
1324
|
// src/hooks/useSessionHistory.ts
|
|
1304
|
-
import { useEffect as
|
|
1325
|
+
import { useEffect as useEffect10, useState as useState10 } from "react";
|
|
1305
1326
|
var API_URL5 = "https://specialist.skippr.ai/api";
|
|
1306
1327
|
var EMPTY = { messages: [], phases: [] };
|
|
1307
1328
|
function useSessionHistory({
|
|
@@ -1309,11 +1330,11 @@ function useSessionHistory({
|
|
|
1309
1330
|
enabled,
|
|
1310
1331
|
authedFetch
|
|
1311
1332
|
}) {
|
|
1312
|
-
const [history2, setHistory] =
|
|
1313
|
-
const [loadedAgentId, setLoadedAgentId] =
|
|
1333
|
+
const [history2, setHistory] = useState10(EMPTY);
|
|
1334
|
+
const [loadedAgentId, setLoadedAgentId] = useState10(null);
|
|
1314
1335
|
const activeAgentId = enabled && agentId ? agentId : null;
|
|
1315
1336
|
const isLoading = activeAgentId !== null && activeAgentId !== loadedAgentId;
|
|
1316
|
-
|
|
1337
|
+
useEffect10(() => {
|
|
1317
1338
|
if (!enabled || !agentId) {
|
|
1318
1339
|
setHistory(EMPTY);
|
|
1319
1340
|
setLoadedAgentId(null);
|
|
@@ -1661,7 +1682,7 @@ var __iconNode24 = [
|
|
|
1661
1682
|
];
|
|
1662
1683
|
var X = createLucideIcon("x", __iconNode24);
|
|
1663
1684
|
// src/components/AgentCursor.tsx
|
|
1664
|
-
import { useContext as useContext6, useEffect as
|
|
1685
|
+
import { useContext as useContext6, useEffect as useEffect11, useLayoutEffect, useRef as useRef5, useState as useState11 } from "react";
|
|
1665
1686
|
|
|
1666
1687
|
// src/capture/elementRef.ts
|
|
1667
1688
|
function safeGetIframeDocument(iframe) {
|
|
@@ -1733,6 +1754,34 @@ function getRectInTopViewport(el) {
|
|
|
1733
1754
|
return rect;
|
|
1734
1755
|
}
|
|
1735
1756
|
|
|
1757
|
+
// src/capture/labelPlacement.ts
|
|
1758
|
+
var GAP_FROM_RING_PX = 8;
|
|
1759
|
+
var MIN_DISTANCE_FROM_VIEWPORT_EDGE_PX = 8;
|
|
1760
|
+
var APPROX_LABEL_HEIGHT_PX = 26;
|
|
1761
|
+
function clampHorizontalCenterWithinViewport(desiredCenterX, labelWidth) {
|
|
1762
|
+
const halfLabelWidth = labelWidth / 2;
|
|
1763
|
+
const leftmostCenter = MIN_DISTANCE_FROM_VIEWPORT_EDGE_PX + halfLabelWidth;
|
|
1764
|
+
const rightmostCenter = window.innerWidth - MIN_DISTANCE_FROM_VIEWPORT_EDGE_PX - halfLabelWidth;
|
|
1765
|
+
if (rightmostCenter < leftmostCenter)
|
|
1766
|
+
return window.innerWidth / 2;
|
|
1767
|
+
return Math.min(rightmostCenter, Math.max(leftmostCenter, desiredCenterX));
|
|
1768
|
+
}
|
|
1769
|
+
function verticalPositionBelowOrAboveRing(ringBox) {
|
|
1770
|
+
const spaceBelowRing = window.innerHeight - ringBox.bottom;
|
|
1771
|
+
const fitsBelowRing = spaceBelowRing >= APPROX_LABEL_HEIGHT_PX + GAP_FROM_RING_PX;
|
|
1772
|
+
if (fitsBelowRing)
|
|
1773
|
+
return ringBox.bottom + GAP_FROM_RING_PX;
|
|
1774
|
+
const aboveRing = ringBox.top - GAP_FROM_RING_PX - APPROX_LABEL_HEIGHT_PX;
|
|
1775
|
+
return Math.max(MIN_DISTANCE_FROM_VIEWPORT_EDGE_PX, aboveRing);
|
|
1776
|
+
}
|
|
1777
|
+
function viewportClampedLabelStyle(ringBox, labelWidth) {
|
|
1778
|
+
const ringCenterX = ringBox.left + ringBox.width / 2;
|
|
1779
|
+
return {
|
|
1780
|
+
left: `${clampHorizontalCenterWithinViewport(ringCenterX, labelWidth)}px`,
|
|
1781
|
+
top: `${verticalPositionBelowOrAboveRing(ringBox)}px`
|
|
1782
|
+
};
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1736
1785
|
// src/capture/ringGeometry.ts
|
|
1737
1786
|
var RING_PAD = 6;
|
|
1738
1787
|
var MAX_CORNER_RADIUS = 16;
|
|
@@ -1798,9 +1847,9 @@ function traceRing(path, durationMs, onFrame, onDone) {
|
|
|
1798
1847
|
}
|
|
1799
1848
|
|
|
1800
1849
|
// src/components/AgentCursor.tsx
|
|
1801
|
-
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
1850
|
+
import { jsx as jsx4, jsxs, Fragment } from "react/jsx-runtime";
|
|
1802
1851
|
var Z_INDEX = 2147483646;
|
|
1803
|
-
var
|
|
1852
|
+
var BRAND_COLOR = "var(--skippr-brand, #2bc0ae)";
|
|
1804
1853
|
var GLIDE_EASE = "cubic-bezier(0.45, 0, 0.25, 1)";
|
|
1805
1854
|
var GLIDE_MIN_MS = 900;
|
|
1806
1855
|
var GLIDE_MAX_MS = 1500;
|
|
@@ -1844,11 +1893,13 @@ function AgentCursor({
|
|
|
1844
1893
|
animated = false
|
|
1845
1894
|
}) {
|
|
1846
1895
|
const ctx = useContext6(LiveAgentContext);
|
|
1847
|
-
const [cursor, setCursor] =
|
|
1848
|
-
const [glideMs, setGlideMs] =
|
|
1849
|
-
const [phase, setPhase] =
|
|
1850
|
-
const [ringBox, setRingBox] =
|
|
1851
|
-
const [clickPulse, setClickPulse] =
|
|
1896
|
+
const [cursor, setCursor] = useState11(null);
|
|
1897
|
+
const [glideMs, setGlideMs] = useState11(0);
|
|
1898
|
+
const [phase, setPhase] = useState11("idle");
|
|
1899
|
+
const [ringBox, setRingBox] = useState11(null);
|
|
1900
|
+
const [clickPulse, setClickPulse] = useState11(0);
|
|
1901
|
+
const [measuredLabelWidth, setMeasuredLabelWidth] = useState11(0);
|
|
1902
|
+
const labelRef = useRef5(null);
|
|
1852
1903
|
const cursorElRef = useRef5(null);
|
|
1853
1904
|
const pathRef = useRef5(null);
|
|
1854
1905
|
const prevCursorRef = useRef5(null);
|
|
@@ -1971,7 +2022,7 @@ function AgentCursor({
|
|
|
1971
2022
|
});
|
|
1972
2023
|
return cancelAnimation;
|
|
1973
2024
|
}, [target, animated]);
|
|
1974
|
-
|
|
2025
|
+
useEffect11(() => {
|
|
1975
2026
|
if (!target || target.kind === "gesture" || phase === "idle")
|
|
1976
2027
|
return;
|
|
1977
2028
|
const track = () => {
|
|
@@ -2003,7 +2054,15 @@ function AgentCursor({
|
|
|
2003
2054
|
}
|
|
2004
2055
|
};
|
|
2005
2056
|
}, [target, phase]);
|
|
2006
|
-
|
|
2057
|
+
useLayoutEffect(() => {
|
|
2058
|
+
if (phase !== "done")
|
|
2059
|
+
return;
|
|
2060
|
+
const renderedLabelWidth = labelRef.current?.getBoundingClientRect().width ?? 0;
|
|
2061
|
+
if (renderedLabelWidth > 0 && renderedLabelWidth !== measuredLabelWidth) {
|
|
2062
|
+
setMeasuredLabelWidth(renderedLabelWidth);
|
|
2063
|
+
}
|
|
2064
|
+
}, [phase, measuredLabelWidth, target?.label]);
|
|
2065
|
+
useEffect11(() => {
|
|
2007
2066
|
return () => {
|
|
2008
2067
|
traceRef.current?.cancel();
|
|
2009
2068
|
for (const t of timersRef.current)
|
|
@@ -2027,24 +2086,31 @@ function AgentCursor({
|
|
|
2027
2086
|
ref: pathRef,
|
|
2028
2087
|
d: ringPathD(ringBox),
|
|
2029
2088
|
fill: "none",
|
|
2030
|
-
stroke:
|
|
2089
|
+
stroke: BRAND_COLOR,
|
|
2031
2090
|
strokeWidth: 2,
|
|
2032
2091
|
strokeLinecap: "round",
|
|
2033
2092
|
style: { strokeDasharray: "0 99999" }
|
|
2034
2093
|
})
|
|
2035
2094
|
}),
|
|
2036
|
-
phase === "done" && ringBox && /* @__PURE__ */ jsxs(
|
|
2037
|
-
style: ringBoxStyle(ringBox, Z_INDEX),
|
|
2038
|
-
className: "skippr:relative",
|
|
2095
|
+
phase === "done" && ringBox && /* @__PURE__ */ jsxs(Fragment, {
|
|
2039
2096
|
children: [
|
|
2040
2097
|
/* @__PURE__ */ jsx4("div", {
|
|
2041
|
-
|
|
2098
|
+
style: ringBoxStyle(ringBox, Z_INDEX),
|
|
2099
|
+
children: /* @__PURE__ */ jsx4("div", {
|
|
2100
|
+
className: "skippr:absolute skippr:inset-0 skippr:rounded-[1rem] skippr:border-2 skippr:border-brand skippr:animate-skippr-annotation-pulse"
|
|
2101
|
+
})
|
|
2042
2102
|
}),
|
|
2043
2103
|
/* @__PURE__ */ jsx4("div", {
|
|
2104
|
+
ref: labelRef,
|
|
2044
2105
|
role: "status",
|
|
2045
|
-
className: "skippr:
|
|
2106
|
+
className: "skippr:fixed skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-brand skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.12)]",
|
|
2107
|
+
style: {
|
|
2108
|
+
...viewportClampedLabelStyle(ringBox, measuredLabelWidth),
|
|
2109
|
+
zIndex: Z_INDEX,
|
|
2110
|
+
pointerEvents: "none"
|
|
2111
|
+
},
|
|
2046
2112
|
children: /* @__PURE__ */ jsx4("span", {
|
|
2047
|
-
className: "skippr:text-[11px] skippr:font-medium skippr:text-
|
|
2113
|
+
className: "skippr:text-[11px] skippr:font-medium skippr:text-primary-foreground skippr:whitespace-nowrap",
|
|
2048
2114
|
children: target.label
|
|
2049
2115
|
})
|
|
2050
2116
|
})
|
|
@@ -2052,7 +2118,7 @@ function AgentCursor({
|
|
|
2052
2118
|
}),
|
|
2053
2119
|
target.kind === "gesture" && /* @__PURE__ */ jsx4("div", {
|
|
2054
2120
|
role: "status",
|
|
2055
|
-
className: "skippr:fixed skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-
|
|
2121
|
+
className: "skippr:fixed skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-brand skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.12)]",
|
|
2056
2122
|
style: {
|
|
2057
2123
|
left: `${cursor.x}px`,
|
|
2058
2124
|
top: `${cursor.y + 18}px`,
|
|
@@ -2061,7 +2127,7 @@ function AgentCursor({
|
|
|
2061
2127
|
transition: `left ${glideMs}ms ${GLIDE_EASE}, top ${glideMs}ms ${GLIDE_EASE}`
|
|
2062
2128
|
},
|
|
2063
2129
|
children: /* @__PURE__ */ jsx4("span", {
|
|
2064
|
-
className: "skippr:text-[11px] skippr:font-medium skippr:text-
|
|
2130
|
+
className: "skippr:text-[11px] skippr:font-medium skippr:text-primary-foreground skippr:whitespace-nowrap",
|
|
2065
2131
|
children: target.label
|
|
2066
2132
|
})
|
|
2067
2133
|
}),
|
|
@@ -2076,12 +2142,12 @@ function AgentCursor({
|
|
|
2076
2142
|
transition: `left ${glideMs}ms ${GLIDE_EASE}, top ${glideMs}ms ${GLIDE_EASE}`
|
|
2077
2143
|
},
|
|
2078
2144
|
children: /* @__PURE__ */ jsx4(MousePointer2, {
|
|
2079
|
-
className: `skippr:h-5 skippr:w-5 skippr:text-
|
|
2145
|
+
className: `skippr:h-5 skippr:w-5 skippr:text-brand skippr:drop-shadow-[0_2px_5px_rgba(0,0,0,0.4)] ${clickPulse > 0 ? "skippr:animate-skippr-press" : "skippr:animate-skippr-cursor-pop"}`,
|
|
2080
2146
|
fill: "currentColor"
|
|
2081
2147
|
}, clickPulse)
|
|
2082
2148
|
}),
|
|
2083
2149
|
clickPulse > 0 && rippleCenter && /* @__PURE__ */ jsx4("span", {
|
|
2084
|
-
className: "skippr:fixed skippr:h-7 skippr:w-7 skippr:rounded-full skippr:bg-
|
|
2150
|
+
className: "skippr:fixed skippr:h-7 skippr:w-7 skippr:rounded-full skippr:bg-brand/50 skippr:animate-skippr-click-ping",
|
|
2085
2151
|
style: {
|
|
2086
2152
|
left: `${rippleCenter.x}px`,
|
|
2087
2153
|
top: `${rippleCenter.y}px`,
|
|
@@ -2096,7 +2162,7 @@ function AgentCursor({
|
|
|
2096
2162
|
// src/components/AutoStartMedia.tsx
|
|
2097
2163
|
import { useConnectionState, useLocalParticipant as useLocalParticipant4 } from "@livekit/components-react/hooks";
|
|
2098
2164
|
import { ConnectionState, Track as Track2 } from "livekit-client";
|
|
2099
|
-
import { useEffect as
|
|
2165
|
+
import { useEffect as useEffect12, useRef as useRef6 } from "react";
|
|
2100
2166
|
function AutoStartMedia({
|
|
2101
2167
|
pendingScreenStream,
|
|
2102
2168
|
pushOrTapMicMode = false
|
|
@@ -2104,7 +2170,7 @@ function AutoStartMedia({
|
|
|
2104
2170
|
const { localParticipant } = useLocalParticipant4();
|
|
2105
2171
|
const connectionState = useConnectionState();
|
|
2106
2172
|
const didStartRef = useRef6(false);
|
|
2107
|
-
|
|
2173
|
+
useEffect12(() => {
|
|
2108
2174
|
if (didStartRef.current)
|
|
2109
2175
|
return;
|
|
2110
2176
|
if (connectionState !== ConnectionState.Connected)
|
|
@@ -2131,7 +2197,7 @@ function AutoStartMedia({
|
|
|
2131
2197
|
// src/components/DomCapture.tsx
|
|
2132
2198
|
import { useConnectionState as useConnectionState2, useLocalParticipant as useLocalParticipant5 } from "@livekit/components-react/hooks";
|
|
2133
2199
|
import { ConnectionState as ConnectionState2, ScreenSharePresets as ScreenSharePresets2, Track as Track3 } from "livekit-client";
|
|
2134
|
-
import { useEffect as
|
|
2200
|
+
import { useEffect as useEffect13, useRef as useRef7 } from "react";
|
|
2135
2201
|
|
|
2136
2202
|
// src/capture/a11yUtils.ts
|
|
2137
2203
|
var ROLE_BY_TAG = {
|
|
@@ -3039,7 +3105,7 @@ function DomCapture({ pushOrTapMicMode = false }) {
|
|
|
3039
3105
|
const pausedRef = useRef7(false);
|
|
3040
3106
|
const freezeCaptureRef = useRef7(null);
|
|
3041
3107
|
const resumeCaptureRef = useRef7(null);
|
|
3042
|
-
|
|
3108
|
+
useEffect13(() => {
|
|
3043
3109
|
if (didStartRef.current)
|
|
3044
3110
|
return;
|
|
3045
3111
|
if (connectionState !== ConnectionState2.Connected)
|
|
@@ -3157,7 +3223,7 @@ function DomCapture({ pushOrTapMicMode = false }) {
|
|
|
3157
3223
|
track.stop();
|
|
3158
3224
|
};
|
|
3159
3225
|
}, [connectionState, localParticipant, pushOrTapMicMode]);
|
|
3160
|
-
|
|
3226
|
+
useEffect13(() => {
|
|
3161
3227
|
if (isHeld) {
|
|
3162
3228
|
freezeCaptureRef.current?.();
|
|
3163
3229
|
} else {
|
|
@@ -3169,7 +3235,7 @@ function DomCapture({ pushOrTapMicMode = false }) {
|
|
|
3169
3235
|
|
|
3170
3236
|
// src/components/HighlightOverlay.tsx
|
|
3171
3237
|
import { useDataChannel } from "@livekit/components-react/hooks";
|
|
3172
|
-
import { useCallback as useCallback9, useEffect as
|
|
3238
|
+
import { useCallback as useCallback9, useEffect as useEffect14, useRef as useRef8 } from "react";
|
|
3173
3239
|
var HIGHLIGHT_AUTO_CLEAR_MS = 25000;
|
|
3174
3240
|
var textDecoder = new TextDecoder;
|
|
3175
3241
|
function parseHighlightMessage(payload) {
|
|
@@ -3225,7 +3291,7 @@ function HighlightOverlay() {
|
|
|
3225
3291
|
autoClearRef.current = setTimeout(clear, HIGHLIGHT_AUTO_CLEAR_MS);
|
|
3226
3292
|
}, [clear]);
|
|
3227
3293
|
useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
|
|
3228
|
-
|
|
3294
|
+
useEffect14(() => {
|
|
3229
3295
|
const onClick = (event) => {
|
|
3230
3296
|
const target = targetRef.current;
|
|
3231
3297
|
const node = event.target;
|
|
@@ -3235,15 +3301,15 @@ function HighlightOverlay() {
|
|
|
3235
3301
|
document.addEventListener("click", onClick, { capture: true });
|
|
3236
3302
|
return () => document.removeEventListener("click", onClick, { capture: true });
|
|
3237
3303
|
}, [clear]);
|
|
3238
|
-
|
|
3304
|
+
useEffect14(() => clear, [clear]);
|
|
3239
3305
|
return null;
|
|
3240
3306
|
}
|
|
3241
3307
|
|
|
3242
3308
|
// src/components/MinimizedBubble.tsx
|
|
3243
|
-
import { useContext as useContext7, useEffect as
|
|
3309
|
+
import { useContext as useContext7, useEffect as useEffect16, useRef as useRef10, useState as useState12 } from "react";
|
|
3244
3310
|
|
|
3245
3311
|
// src/hooks/useLauncherDrag.ts
|
|
3246
|
-
import { useEffect as
|
|
3312
|
+
import { useEffect as useEffect15, useRef as useRef9 } from "react";
|
|
3247
3313
|
import { flushSync } from "react-dom";
|
|
3248
3314
|
var DRAG_THRESHOLD_PX = 5;
|
|
3249
3315
|
function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
@@ -3254,7 +3320,7 @@ function useLauncherDrag(containerRef, onDrop, followRefs, reportDragging) {
|
|
|
3254
3320
|
followTargetsRef.current = followRefs;
|
|
3255
3321
|
const reportDraggingRef = useRef9(reportDragging);
|
|
3256
3322
|
reportDraggingRef.current = reportDragging;
|
|
3257
|
-
|
|
3323
|
+
useEffect15(() => {
|
|
3258
3324
|
const el = containerRef.current;
|
|
3259
3325
|
if (!el)
|
|
3260
3326
|
return;
|
|
@@ -3505,13 +3571,17 @@ var GOAL_APPEAR_STAGGER_MS = 150;
|
|
|
3505
3571
|
var GOAL_EXIT_STAGGER_MS = 250;
|
|
3506
3572
|
var MAX_GOAL_BUBBLES = 3;
|
|
3507
3573
|
var MAX_MODULE_PILLS = 3;
|
|
3508
|
-
function SkipprMark({ onStart }) {
|
|
3574
|
+
function SkipprMark({ onStart, logoUrl }) {
|
|
3509
3575
|
return /* @__PURE__ */ jsx7("button", {
|
|
3510
3576
|
type: "button",
|
|
3511
3577
|
onClick: onStart,
|
|
3512
3578
|
"aria-label": "Ask Me Anything",
|
|
3513
3579
|
className: "skippr:flex skippr:h-[36px] skippr:w-[36px] skippr:shrink-0 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:bg-transparent skippr:p-0",
|
|
3514
|
-
children: /* @__PURE__ */ jsx7("
|
|
3580
|
+
children: logoUrl ? /* @__PURE__ */ jsx7("img", {
|
|
3581
|
+
src: logoUrl,
|
|
3582
|
+
alt: "",
|
|
3583
|
+
className: "skippr:h-[36px] skippr:w-[36px] skippr:rounded-[11px] skippr:object-cover"
|
|
3584
|
+
}) : /* @__PURE__ */ jsx7("svg", {
|
|
3515
3585
|
viewBox: "0 0 15.4044 18.4853",
|
|
3516
3586
|
className: "skippr:h-[18.5px] skippr:w-[15.4px]",
|
|
3517
3587
|
fill: "none",
|
|
@@ -3562,11 +3632,12 @@ function ChatButton({
|
|
|
3562
3632
|
function IdleLauncher({
|
|
3563
3633
|
position,
|
|
3564
3634
|
isHovered,
|
|
3635
|
+
logoUrl,
|
|
3565
3636
|
onStart,
|
|
3566
3637
|
onChat
|
|
3567
3638
|
}) {
|
|
3568
3639
|
return /* @__PURE__ */ jsxs4("div", {
|
|
3569
|
-
className: cn("skippr:flex skippr:h-[48px] skippr:items-center", "skippr:bg-launcher skippr:p-1.5 skippr:shadow-[-6px_8px_30px_rgba(15,18,26,0.32)]", "skippr:[animation:skippr-orb-in_320ms_cubic-bezier(0.34,1.3,0.64,1)]", "skippr:transition-transform skippr:duration-[400ms] skippr:ease-[cubic-bezier(0.22,1,0.36,1)]", position === "right" ? "skippr:rounded-l-[18px] skippr:origin-right" : "skippr:rounded-r-[18px] skippr:origin-left", position === "right" ? isHovered ? "skippr:translate-x-3" : "skippr:translate-x-7" : isHovered ? "skippr:-translate-x-3" : "skippr:-translate-x-7"),
|
|
3640
|
+
className: cn("skippr:flex skippr:h-[48px] skippr:items-center", "skippr:bg-launcher skippr:p-1.5 skippr:shadow-[-6px_8px_30px_rgba(15,18,26,0.32)]", "skippr:[animation:skippr-orb-in_320ms_cubic-bezier(0.34,1.3,0.64,1)]", "skippr:transition-transform skippr:duration-[400ms] skippr:ease-[cubic-bezier(0.22,1,0.36,1)]", position === "right" ? "skippr:rounded-l-[18px] skippr:origin-right" : "skippr:rounded-r-[18px] skippr:origin-left", position === "right" ? isHovered || logoUrl ? "skippr:translate-x-3" : "skippr:translate-x-7" : isHovered || logoUrl ? "skippr:-translate-x-3" : "skippr:-translate-x-7"),
|
|
3570
3641
|
style: { gap: isHovered ? 8 : 0 },
|
|
3571
3642
|
children: [
|
|
3572
3643
|
/* @__PURE__ */ jsx7(ChatButton, {
|
|
@@ -3575,7 +3646,8 @@ function IdleLauncher({
|
|
|
3575
3646
|
onClick: onChat
|
|
3576
3647
|
}),
|
|
3577
3648
|
/* @__PURE__ */ jsx7(SkipprMark, {
|
|
3578
|
-
onStart
|
|
3649
|
+
onStart,
|
|
3650
|
+
logoUrl
|
|
3579
3651
|
})
|
|
3580
3652
|
]
|
|
3581
3653
|
});
|
|
@@ -3587,7 +3659,7 @@ function WelcomeBubble({
|
|
|
3587
3659
|
onDismiss,
|
|
3588
3660
|
onClick
|
|
3589
3661
|
}) {
|
|
3590
|
-
|
|
3662
|
+
useEffect16(() => {
|
|
3591
3663
|
const timer = setTimeout(onDismiss, 5000);
|
|
3592
3664
|
return () => clearTimeout(timer);
|
|
3593
3665
|
}, [onDismiss]);
|
|
@@ -3629,15 +3701,16 @@ function MinimizedBubble({
|
|
|
3629
3701
|
selectModule,
|
|
3630
3702
|
expandPanel,
|
|
3631
3703
|
setSidebarTab,
|
|
3632
|
-
commitLauncherDrop
|
|
3704
|
+
commitLauncherDrop,
|
|
3705
|
+
appearance
|
|
3633
3706
|
} = ctx;
|
|
3634
|
-
const [goalsAutoHidden, setGoalsAutoHidden] =
|
|
3635
|
-
const [isLauncherHovered, setIsLauncherHovered] =
|
|
3636
|
-
const [visitHref, setVisitHref] =
|
|
3707
|
+
const [goalsAutoHidden, setGoalsAutoHidden] = useState12(false);
|
|
3708
|
+
const [isLauncherHovered, setIsLauncherHovered] = useState12(false);
|
|
3709
|
+
const [visitHref, setVisitHref] = useState12(() => window.location.href);
|
|
3637
3710
|
const revealedHrefRef = useRef10(null);
|
|
3638
3711
|
const hoverContainerRef = useRef10(null);
|
|
3639
|
-
|
|
3640
|
-
|
|
3712
|
+
useEffect16(() => subscribeToLocationChange(() => setVisitHref(window.location.href)), []);
|
|
3713
|
+
useEffect16(() => {
|
|
3641
3714
|
const el = hoverContainerRef.current;
|
|
3642
3715
|
if (!el)
|
|
3643
3716
|
return;
|
|
@@ -3659,7 +3732,7 @@ function MinimizedBubble({
|
|
|
3659
3732
|
const onboardingModule = pillCandidates.find((module) => module.type === "onboarding");
|
|
3660
3733
|
const modulePills = onboardingModule ? [onboardingModule] : pillCandidates.slice(0, MAX_MODULE_PILLS).reverse();
|
|
3661
3734
|
const goalsEligible = adoptionGoals.length > 0 && !onboardingModule && hasResolvedModules;
|
|
3662
|
-
|
|
3735
|
+
useEffect16(() => {
|
|
3663
3736
|
if (!goalsEligible)
|
|
3664
3737
|
return;
|
|
3665
3738
|
if (revealedHrefRef.current === visitHref) {
|
|
@@ -3673,8 +3746,8 @@ function MinimizedBubble({
|
|
|
3673
3746
|
}, [goalsEligible, visitHref]);
|
|
3674
3747
|
const matchedGoals = goalsEligible ? adoptionGoals.slice(0, MAX_GOAL_BUBBLES) : [];
|
|
3675
3748
|
const goalsHidden = goalsAutoHidden && !isLauncherHovered;
|
|
3676
|
-
const [goalsUnmounted, setGoalsUnmounted] =
|
|
3677
|
-
|
|
3749
|
+
const [goalsUnmounted, setGoalsUnmounted] = useState12(false);
|
|
3750
|
+
useEffect16(() => {
|
|
3678
3751
|
if (!goalsHidden) {
|
|
3679
3752
|
setGoalsUnmounted(false);
|
|
3680
3753
|
return;
|
|
@@ -3740,6 +3813,7 @@ function MinimizedBubble({
|
|
|
3740
3813
|
/* @__PURE__ */ jsx7(IdleLauncher, {
|
|
3741
3814
|
position,
|
|
3742
3815
|
isHovered: isLauncherHovered,
|
|
3816
|
+
logoUrl: appearance?.logoUrl ?? null,
|
|
3743
3817
|
onStart: launchDefaultSession,
|
|
3744
3818
|
onChat: openChat
|
|
3745
3819
|
})
|
|
@@ -3749,7 +3823,7 @@ function MinimizedBubble({
|
|
|
3749
3823
|
|
|
3750
3824
|
// src/components/PageActionHandler.tsx
|
|
3751
3825
|
import { useDataChannel as useDataChannel2 } from "@livekit/components-react/hooks";
|
|
3752
|
-
import { useCallback as useCallback10, useEffect as
|
|
3826
|
+
import { useCallback as useCallback10, useEffect as useEffect17, useRef as useRef11 } from "react";
|
|
3753
3827
|
var STEP_MAX_WAIT_MS = 5000;
|
|
3754
3828
|
var POST_ACTION_SETTLE_SNAPSHOT_MS = 300;
|
|
3755
3829
|
var TRAILING_ACTION_FLUSH_AFTER_STOP_MS = 1000;
|
|
@@ -4073,7 +4147,7 @@ function PageActionHandler() {
|
|
|
4073
4147
|
queueRef.current.push(action);
|
|
4074
4148
|
drain();
|
|
4075
4149
|
}, [drain]);
|
|
4076
|
-
|
|
4150
|
+
useEffect17(() => {
|
|
4077
4151
|
mountedRef.current = true;
|
|
4078
4152
|
drainingRef.current = false;
|
|
4079
4153
|
return () => {
|
|
@@ -4085,7 +4159,7 @@ function PageActionHandler() {
|
|
|
4085
4159
|
setActionsBusy(false);
|
|
4086
4160
|
};
|
|
4087
4161
|
}, []);
|
|
4088
|
-
|
|
4162
|
+
useEffect17(() => {
|
|
4089
4163
|
return onActionsStopped(() => {
|
|
4090
4164
|
actionsStoppedRef.current = true;
|
|
4091
4165
|
ignoreActionsArrivingBeforeRef.current = Date.now() + TRAILING_ACTION_FLUSH_AFTER_STOP_MS;
|
|
@@ -4103,17 +4177,17 @@ function PageActionHandler() {
|
|
|
4103
4177
|
}
|
|
4104
4178
|
|
|
4105
4179
|
// src/components/SessionControlBar.tsx
|
|
4106
|
-
import { useCallback as useCallback13, useContext as useContext8, useEffect as
|
|
4180
|
+
import { useCallback as useCallback13, useContext as useContext8, useEffect as useEffect22, useState as useState15 } from "react";
|
|
4107
4181
|
|
|
4108
4182
|
// src/hooks/useActionControl.ts
|
|
4109
4183
|
import { useLocalParticipant as useLocalParticipant6 } from "@livekit/components-react/hooks";
|
|
4110
|
-
import { useCallback as useCallback11, useEffect as
|
|
4184
|
+
import { useCallback as useCallback11, useEffect as useEffect18, useState as useState13 } from "react";
|
|
4111
4185
|
var textEncoder5 = new TextEncoder;
|
|
4112
4186
|
function useActionControl() {
|
|
4113
4187
|
const { localParticipant } = useLocalParticipant6();
|
|
4114
4188
|
const plan = usePlanUpdates();
|
|
4115
|
-
const [busy, setBusy] =
|
|
4116
|
-
|
|
4189
|
+
const [busy, setBusy] = useState13(isActionsBusy);
|
|
4190
|
+
useEffect18(() => subscribeActionsBusy(setBusy), []);
|
|
4117
4191
|
const actionsActive = busy || plan?.state === "executing";
|
|
4118
4192
|
const requestStop = useCallback11(async () => {
|
|
4119
4193
|
stopActions();
|
|
@@ -4142,13 +4216,13 @@ function useAgentVoiceState() {
|
|
|
4142
4216
|
}
|
|
4143
4217
|
|
|
4144
4218
|
// src/hooks/useAudioLevelBars.ts
|
|
4145
|
-
import { useEffect as
|
|
4219
|
+
import { useEffect as useEffect19, useRef as useRef12, useState as useState14 } from "react";
|
|
4146
4220
|
var TALKING_LEVEL_THRESHOLD = 0.2;
|
|
4147
4221
|
var TALKING_HOLD_MS = 400;
|
|
4148
4222
|
function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowthPx, noiseGate }) {
|
|
4149
4223
|
const barRefs = useRef12([]);
|
|
4150
|
-
const [isTalking, setIsTalking] =
|
|
4151
|
-
|
|
4224
|
+
const [isTalking, setIsTalking] = useState14(false);
|
|
4225
|
+
useEffect19(() => {
|
|
4152
4226
|
if (!mediaStreamTrack) {
|
|
4153
4227
|
for (const bar of barRefs.current) {
|
|
4154
4228
|
if (bar)
|
|
@@ -4199,7 +4273,7 @@ function useAudioLevelBars(mediaStreamTrack, { barCount, idleHeightPx, maxGrowth
|
|
|
4199
4273
|
}
|
|
4200
4274
|
|
|
4201
4275
|
// src/hooks/useIdleAutoPause.ts
|
|
4202
|
-
import { useCallback as useCallback12, useEffect as
|
|
4276
|
+
import { useCallback as useCallback12, useEffect as useEffect20, useRef as useRef13 } from "react";
|
|
4203
4277
|
function useIdleAutoPause({
|
|
4204
4278
|
enabled,
|
|
4205
4279
|
active,
|
|
@@ -4223,7 +4297,7 @@ function useIdleAutoPause({
|
|
|
4223
4297
|
if (enabled && !isHeld)
|
|
4224
4298
|
armTimer();
|
|
4225
4299
|
}, [enabled, isHeld, armTimer]);
|
|
4226
|
-
|
|
4300
|
+
useEffect20(() => {
|
|
4227
4301
|
if (!enabled || isHeld || active) {
|
|
4228
4302
|
clearTimer();
|
|
4229
4303
|
return;
|
|
@@ -4235,7 +4309,7 @@ function useIdleAutoPause({
|
|
|
4235
4309
|
}
|
|
4236
4310
|
|
|
4237
4311
|
// src/hooks/useKeyboardPushToTalk.ts
|
|
4238
|
-
import { useEffect as
|
|
4312
|
+
import { useEffect as useEffect21, useRef as useRef14 } from "react";
|
|
4239
4313
|
function isEditableTarget() {
|
|
4240
4314
|
const el = document.activeElement;
|
|
4241
4315
|
if (!el)
|
|
@@ -4251,7 +4325,7 @@ function useKeyboardPushToTalk({
|
|
|
4251
4325
|
}) {
|
|
4252
4326
|
const handlers = useRef14({ onStart, onCommit, onKeyUsed });
|
|
4253
4327
|
handlers.current = { onStart, onCommit, onKeyUsed };
|
|
4254
|
-
|
|
4328
|
+
useEffect21(() => {
|
|
4255
4329
|
if (!enabled)
|
|
4256
4330
|
return;
|
|
4257
4331
|
let keyHeld = false;
|
|
@@ -4505,7 +4579,7 @@ function TapToTalkMic({ isCapturingSpeech, showLabel, onToggle }) {
|
|
|
4505
4579
|
}
|
|
4506
4580
|
|
|
4507
4581
|
// src/components/SessionControlBar.tsx
|
|
4508
|
-
import { jsx as jsx12, jsxs as jsxs10, Fragment } from "react/jsx-runtime";
|
|
4582
|
+
import { jsx as jsx12, jsxs as jsxs10, Fragment as Fragment2 } from "react/jsx-runtime";
|
|
4509
4583
|
var STANDBY_BAR_WIDTH = 168;
|
|
4510
4584
|
var READY_BAR_WIDTH = 238;
|
|
4511
4585
|
var PAUSED_BAR_WIDTH = 248;
|
|
@@ -4548,7 +4622,7 @@ function AgentActivity({
|
|
|
4548
4622
|
children: isActing ? /* @__PURE__ */ jsx12(MousePointerClick, {
|
|
4549
4623
|
strokeWidth: 2,
|
|
4550
4624
|
className: "skippr:size-5 skippr:[animation:skippr-finger-tap_1.1s_ease-in-out_infinite]"
|
|
4551
|
-
}) : /* @__PURE__ */ jsxs10(
|
|
4625
|
+
}) : /* @__PURE__ */ jsxs10(Fragment2, {
|
|
4552
4626
|
children: [
|
|
4553
4627
|
state === "speaking" && /* @__PURE__ */ jsx12("span", {
|
|
4554
4628
|
className: "skippr:flex skippr:h-5 skippr:items-center skippr:gap-[2px]",
|
|
@@ -4656,7 +4730,7 @@ function SessionControlBar() {
|
|
|
4656
4730
|
togglePause();
|
|
4657
4731
|
}
|
|
4658
4732
|
});
|
|
4659
|
-
const [pushToTalkHintSeen, setPushToTalkHintSeen] =
|
|
4733
|
+
const [pushToTalkHintSeen, setPushToTalkHintSeen] = useState15(false);
|
|
4660
4734
|
const startPushToTalk = useCallback13(() => {
|
|
4661
4735
|
start();
|
|
4662
4736
|
reportActivity();
|
|
@@ -4674,7 +4748,7 @@ function SessionControlBar() {
|
|
|
4674
4748
|
onCommit: commitPushToTalk,
|
|
4675
4749
|
onKeyUsed: dismissPushToTalkHint
|
|
4676
4750
|
});
|
|
4677
|
-
|
|
4751
|
+
useEffect22(() => {
|
|
4678
4752
|
if (isHeld)
|
|
4679
4753
|
minimizePanel();
|
|
4680
4754
|
}, [isHeld, minimizePanel]);
|
|
@@ -4774,14 +4848,14 @@ function SessionControlBar() {
|
|
|
4774
4848
|
fill: "currentColor"
|
|
4775
4849
|
})
|
|
4776
4850
|
}),
|
|
4777
|
-
isHeld ? /* @__PURE__ */ jsxs10(
|
|
4851
|
+
isHeld ? /* @__PURE__ */ jsxs10(Fragment2, {
|
|
4778
4852
|
children: [
|
|
4779
4853
|
/* @__PURE__ */ jsx12(PausedCountdown, {
|
|
4780
4854
|
secondsRemaining: countdown
|
|
4781
4855
|
}),
|
|
4782
4856
|
panelToggleButton
|
|
4783
4857
|
]
|
|
4784
|
-
}) : /* @__PURE__ */ jsxs10(
|
|
4858
|
+
}) : /* @__PURE__ */ jsxs10(Fragment2, {
|
|
4785
4859
|
children: [
|
|
4786
4860
|
!textMode && pushOrTapMicMode && /* @__PURE__ */ jsxs10("div", {
|
|
4787
4861
|
className: "skippr:flex skippr:h-[38px] skippr:items-center skippr:gap-2",
|
|
@@ -4927,9 +5001,30 @@ function SessionControlBar() {
|
|
|
4927
5001
|
}
|
|
4928
5002
|
|
|
4929
5003
|
// src/components/ShadowHost.tsx
|
|
4930
|
-
import { useLayoutEffect as useLayoutEffect2, useRef as useRef16, useState as
|
|
5004
|
+
import { useLayoutEffect as useLayoutEffect2, useRef as useRef16, useState as useState16 } from "react";
|
|
4931
5005
|
import { createPortal } from "react-dom";
|
|
4932
|
-
|
|
5006
|
+
|
|
5007
|
+
// src/lib/brandForeground.ts
|
|
5008
|
+
var DARK_FOREGROUND = "#2d2b3d";
|
|
5009
|
+
var LIGHT_FOREGROUND = "#ffffff";
|
|
5010
|
+
var LUMINANCE_THRESHOLD = 0.179;
|
|
5011
|
+
var HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
|
5012
|
+
function isHexColor(value) {
|
|
5013
|
+
return HEX_COLOR.test(value);
|
|
5014
|
+
}
|
|
5015
|
+
function linearChannel(hex, offset) {
|
|
5016
|
+
const channel = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
|
|
5017
|
+
return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
|
|
5018
|
+
}
|
|
5019
|
+
function brandForeground(accentColor) {
|
|
5020
|
+
const hex = accentColor.replace("#", "");
|
|
5021
|
+
const fullHex = hex.length === 3 ? hex.split("").map((char) => char + char).join("") : hex;
|
|
5022
|
+
const luminance = 0.2126 * linearChannel(fullHex, 0) + 0.7152 * linearChannel(fullHex, 2) + 0.0722 * linearChannel(fullHex, 4);
|
|
5023
|
+
return luminance > LUMINANCE_THRESHOLD ? DARK_FOREGROUND : LIGHT_FOREGROUND;
|
|
5024
|
+
}
|
|
5025
|
+
|
|
5026
|
+
// src/components/ShadowHost.tsx
|
|
5027
|
+
import { jsx as jsx13, Fragment as Fragment3 } from "react/jsx-runtime";
|
|
4933
5028
|
var PROPERTIES_STYLE_ID = "skippr-tw-properties";
|
|
4934
5029
|
var PROPERTY_RULE = /@property\s+[^{]+\{[^}]*\}/g;
|
|
4935
5030
|
function hoistTailwindProperties(css) {
|
|
@@ -4943,11 +5038,18 @@ function hoistTailwindProperties(css) {
|
|
|
4943
5038
|
}
|
|
4944
5039
|
return css.replace(PROPERTY_RULE, "");
|
|
4945
5040
|
}
|
|
4946
|
-
function ShadowHost({
|
|
5041
|
+
function ShadowHost({
|
|
5042
|
+
children,
|
|
5043
|
+
accentColor
|
|
5044
|
+
}) {
|
|
4947
5045
|
const hostRef = useRef16(null);
|
|
4948
|
-
const [shadowRoot, setShadowRoot] =
|
|
5046
|
+
const [shadowRoot, setShadowRoot] = useState16(null);
|
|
4949
5047
|
const css = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
4950
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-100:oklch(93.6% .032 17.717);--skippr-color-red-200:oklch(88.5% .062 18.334);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-500:oklch(63.7% .237 25.331);--skippr-color-red-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-500:oklch(55.6% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-full{top:100%}.skippr\\:-right-8{right:calc(var(--skippr-spacing)*-8)}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:-bottom-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:-bottom-9{bottom:calc(var(--skippr-spacing)*-9)}.skippr\\:bottom-3{bottom:calc(var(--skippr-spacing)*3)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:-left-8{left:calc(var(--skippr-spacing)*-8)}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-2{left:calc(var(--skippr-spacing)*2)}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:z-\\[10000\\]{z-index:10000}.skippr\\:order-first{order:-9999}.skippr\\:order-last{order:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:-mt-\\[27px\\]{margin-top:-27px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-2{margin-top:calc(var(--skippr-spacing)*2)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mt-3\\.5{margin-top:calc(var(--skippr-spacing)*3.5)}.skippr\\:mr-7{margin-right:calc(var(--skippr-spacing)*7)}.skippr\\:-mb-\\[5px\\]{margin-bottom:-5px}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:ml-1{margin-left:calc(var(--skippr-spacing)*1)}.skippr\\:ml-7{margin-left:calc(var(--skippr-spacing)*7)}.skippr\\:flex{display:flex}.skippr\\:hidden{display:none}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3{width:calc(var(--skippr-spacing)*3);height:calc(var(--skippr-spacing)*3)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[38px\\]{width:38px;height:38px}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-7{height:calc(var(--skippr-spacing)*7)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[36px\\]{height:36px}.skippr\\:h-\\[38px\\]{height:38px}.skippr\\:h-\\[48px\\]{height:48px}.skippr\\:h-\\[54px\\]{height:54px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:min-h-11{min-height:calc(var(--skippr-spacing)*11)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-6{width:calc(var(--skippr-spacing)*6)}.skippr\\:w-7{width:calc(var(--skippr-spacing)*7)}.skippr\\:w-8{width:calc(var(--skippr-spacing)*8)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[36px\\]{width:36px}.skippr\\:w-\\[38px\\]{width:38px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-fit{width:fit-content}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:max-w-\\[280px\\]{max-width:280px}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:min-w-11{min-width:calc(var(--skippr-spacing)*11)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-3{--tw-translate-x:calc(var(--skippr-spacing)*-3);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-3{--tw-translate-x:calc(var(--skippr-spacing)*3);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-\\[0\\.94\\]{scale:.94}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out\\]{animation:.2s ease-out skippr-agent-in}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-finger-tap_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-finger-tap}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_280ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.28s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-click-ping{animation:.5s ease-out forwards skippr-click-ping}.skippr\\:animate-skippr-cursor-pop{animation:.22s ease-out skippr-cursor-pop}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-ptt-transmit{animation:1.4s ease-out infinite skippr-ptt-transmit}.skippr\\:animate-skippr-rec-ring{animation:2s ease-out infinite skippr-rec-ring}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-default{cursor:default}.skippr\\:cursor-grab{cursor:grab}.skippr\\:cursor-not-allowed{cursor:not-allowed}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:touch-none{touch-action:none}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:justify-start{justify-content:flex-start}.skippr\\:gap-0\\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded{border-radius:.25rem}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[11px\\]{border-radius:11px}.skippr\\:rounded-\\[12px\\]{border-radius:12px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:rounded-l-\\[18px\\]{border-top-left-radius:18px;border-bottom-left-radius:18px}.skippr\\:rounded-tl-md{border-top-left-radius:.5rem}.skippr\\:rounded-r-\\[18px\\]{border-top-right-radius:18px;border-bottom-right-radius:18px}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-\\[\\#2bc0ae\\]{border-color:#2bc0ae}.skippr\\:border-black\\/25{border-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:border-black\\/25{border-color:color-mix(in oklab,var(--skippr-color-black)25%,transparent)}}.skippr\\:border-border,.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:oklab(29.9244% .0107414 -.0305411/.2)}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-\\[\\#2bc0ae\\]{background-color:#2bc0ae}.skippr\\:bg-\\[\\#2bc0ae\\]\\/50{background-color:oklab(72.9347% -.121518 -.00545585/.5)}.skippr\\:bg-\\[\\#f4ecd8\\]{background-color:#f4ecd8}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-launcher{background-color:#2d2d3f}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-neutral-100{background-color:var(--skippr-color-neutral-100)}.skippr\\:bg-primary{background-color:#2d2b3d}.skippr\\:bg-primary-foreground\\/20{background-color:oklab(100% 0 5.96046e-8/.2)}.skippr\\:bg-primary\\/10{background-color:oklab(29.9244% .0107414 -.0305411/.1)}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-100{background-color:var(--skippr-color-red-100)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-red-500{background-color:var(--skippr-color-red-500)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white,.skippr\\:bg-white\\/15{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-white\\/15{background-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:bg-white\\/70{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-white\\/70{background-color:color-mix(in oklab,var(--skippr-color-white)70%,transparent)}}.skippr\\:fill-brand{fill:#2bc0ae}.skippr\\:fill-primary\\/30{fill:oklab(29.9244% .0107414 -.0305411/.3)}.skippr\\:stroke-black\\/15{stroke:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:stroke-black\\/15{stroke:color-mix(in oklab,var(--skippr-color-black)15%,transparent)}}.skippr\\:stroke-bubble{stroke:#2d2b3d}.skippr\\:p-0{padding:calc(var(--skippr-spacing)*0)}.skippr\\:p-0\\.5{padding:calc(var(--skippr-spacing)*.5)}.skippr\\:p-1\\.5{padding:calc(var(--skippr-spacing)*1.5)}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-3\\.5{padding-inline:calc(var(--skippr-spacing)*3.5)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:py-6{padding-block:calc(var(--skippr-spacing)*6)}.skippr\\:pt-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pr-2\\.5{padding-right:calc(var(--skippr-spacing)*2.5)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-2\\.5{padding-left:calc(var(--skippr-spacing)*2.5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-none{--tw-leading:1;line-height:1}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-\\[\\#2bc0ae\\]{color:#2bc0ae}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black,.skippr\\:text-black\\/40{color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-black\\/40{color:color-mix(in oklab,var(--skippr-color-black)40%,transparent)}}.skippr\\:text-brand{color:#2bc0ae}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-500{color:var(--skippr-color-neutral-500)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.skippr\\:text-primary{color:#2d2b3d}.skippr\\:text-primary-foreground{color:#fff}.skippr\\:text-primary-foreground\\/70{color:oklab(100% 0 5.96046e-8/.7)}.skippr\\:text-red-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-600{color:var(--skippr-color-red-600)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white,.skippr\\:text-white\\/60{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-white\\/60{color:color-mix(in oklab,var(--skippr-color-white)60%,transparent)}}.skippr\\:capitalize{text-transform:capitalize}.skippr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-40{opacity:.4}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[-6px_8px_30px_rgba\\(15\\,18\\,26\\,0\\.32\\)\\]{--tw-shadow:-6px 8px 30px var(--tw-shadow-color,#0f121a52);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.28\\)\\]{--tw-shadow:0 2px 6px var(--tw-shadow-color,#00000047);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(239\\,68\\,68\\,0\\.45\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#ef444473);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-black\\/5{--tw-ring-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--skippr-color-black)5%,transparent)}}.skippr\\:ring-brand{--tw-ring-color:#2bc0ae}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-white\\/15{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-white\\/15{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:ring-white\\/30{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-white\\/30{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)30%,transparent)}}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_2px_5px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 5px var(--tw-drop-shadow-color,#0006));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[opacity\\,transform\\,height\\]{transition-property:opacity,transform,height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\,margin\\]{transition-property:width,margin;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-100{--tw-duration:.1s;transition-duration:.1s}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:duration-\\[400ms\\]{--tw-duration:.4s;transition-duration:.4s}.skippr\\:ease-\\[cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{--tw-ease:cubic-bezier(.22,1,.36,1);transition-timing-function:cubic-bezier(.22,1,.36,1)}.skippr\\:ease-\\[cubic-bezier\\(0\\.34\\,1\\.56\\,0\\.64\\,1\\)\\]{--tw-ease:cubic-bezier(.34,1.56,.64,1);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:select-none{-webkit-user-select:none;user-select:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:\\[overflow-anchor\\:none\\]{overflow-anchor:none}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:text-red-300:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-red-300)}.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-neutral-100:hover{background-color:var(--skippr-color-neutral-100)}.skippr\\:hover\\:bg-neutral-200:hover{background-color:var(--skippr-color-neutral-200)}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:oklab(29.9244% .0107414 -.0305411/.9)}.skippr\\:hover\\:bg-red-200:hover{background-color:var(--skippr-color-red-200)}.skippr\\:hover\\:bg-red-600:hover{background-color:var(--skippr-color-red-600)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:bg-white\\/10:hover{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-white\\/10:hover{background-color:color-mix(in oklab,var(--skippr-color-white)10%,transparent)}}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:#fff}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-brand:focus-visible{--tw-ring-color:#2bc0ae}.skippr\\:focus-visible\\:ring-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:motion-reduce\\:animate-none{animation:none}}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-cursor-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes skippr-click-ping{0%{opacity:.9;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-rec-ring{0%{box-shadow:0 0 #2bc0ae8c}70%{box-shadow:0 0 0 11px #2bc0ae00}to{box-shadow:0 0 #2bc0ae00}}@keyframes skippr-ptt-transmit{0%{box-shadow:0 0 #2bc0ae99,0 0 #2bc0ae59}70%{box-shadow:0 0 0 9px #2bc0ae00,0 0 0 16px #2bc0ae00}to{box-shadow:0 0 #2bc0ae00,0 0 #2bc0ae00}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 #2bc0ae80}50%{box-shadow:0 0 0 6px #2bc0ae00}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes skippr-finger-tap{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(2px)rotate(-6deg)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
5048
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--skippr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--skippr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--skippr-color-red-50:oklch(97.1% .013 17.38);--skippr-color-red-100:oklch(93.6% .032 17.717);--skippr-color-red-200:oklch(88.5% .062 18.334);--skippr-color-red-300:oklch(80.8% .114 19.571);--skippr-color-red-400:oklch(70.4% .191 22.216);--skippr-color-red-500:oklch(63.7% .237 25.331);--skippr-color-red-600:oklch(57.7% .245 27.325);--skippr-color-red-700:oklch(50.5% .213 27.518);--skippr-color-amber-50:oklch(98.7% .022 95.277);--skippr-color-amber-100:oklch(96.2% .059 95.617);--skippr-color-amber-400:oklch(82.8% .189 84.429);--skippr-color-amber-700:oklch(55.5% .163 48.998);--skippr-color-amber-950:oklch(27.9% .077 45.635);--skippr-color-emerald-400:oklch(76.5% .177 163.223);--skippr-color-neutral-100:oklch(97% 0 0);--skippr-color-neutral-200:oklch(92.2% 0 0);--skippr-color-neutral-500:oklch(55.6% 0 0);--skippr-color-neutral-700:oklch(37.1% 0 0);--skippr-color-black:#000;--skippr-color-white:#fff;--skippr-spacing:.25rem;--skippr-text-xs:.75rem;--skippr-text-xs--line-height:calc(1/.75);--skippr-text-sm:.875rem;--skippr-text-sm--line-height:calc(1.25/.875);--skippr-font-weight-medium:500;--skippr-font-weight-semibold:600;--skippr-leading-tight:1.25;--skippr-leading-snug:1.375;--skippr-leading-relaxed:1.625;--skippr-ease-out:cubic-bezier(0,0,.2,1);--skippr-ease-in-out:cubic-bezier(.4,0,.2,1);--skippr-animate-spin:spin 1s linear infinite;--skippr-animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--skippr-animate-bounce:bounce 1s infinite;--skippr-blur-sm:8px;--skippr-default-transition-duration:.15s;--skippr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--skippr-default-font-family:var(--skippr-font-sans);--skippr-default-mono-font-family:var(--skippr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--skippr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--skippr-default-font-feature-settings,normal);font-variation-settings:var(--skippr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--skippr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--skippr-default-mono-font-feature-settings,normal);font-variation-settings:var(--skippr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.skippr\\:pointer-events-none{pointer-events:none}.skippr\\:absolute{position:absolute}.skippr\\:fixed{position:fixed}.skippr\\:relative{position:relative}.skippr\\:sticky{position:sticky}.skippr\\:inset-0{inset:calc(var(--skippr-spacing)*0)}.skippr\\:inset-y-0{inset-block:calc(var(--skippr-spacing)*0)}.skippr\\:top-0{top:calc(var(--skippr-spacing)*0)}.skippr\\:top-1\\/2{top:50%}.skippr\\:top-full{top:100%}.skippr\\:-right-8{right:calc(var(--skippr-spacing)*-8)}.skippr\\:right-0{right:calc(var(--skippr-spacing)*0)}.skippr\\:right-3{right:calc(var(--skippr-spacing)*3)}.skippr\\:right-5{right:calc(var(--skippr-spacing)*5)}.skippr\\:right-6{right:calc(var(--skippr-spacing)*6)}.skippr\\:-bottom-1{bottom:calc(var(--skippr-spacing)*-1)}.skippr\\:bottom-3{bottom:calc(var(--skippr-spacing)*3)}.skippr\\:bottom-20{bottom:calc(var(--skippr-spacing)*20)}.skippr\\:bottom-full{bottom:100%}.skippr\\:-left-8{left:calc(var(--skippr-spacing)*-8)}.skippr\\:left-0{left:calc(var(--skippr-spacing)*0)}.skippr\\:left-1\\/2{left:50%}.skippr\\:left-2{left:calc(var(--skippr-spacing)*2)}.skippr\\:left-3{left:calc(var(--skippr-spacing)*3)}.skippr\\:left-5{left:calc(var(--skippr-spacing)*5)}.skippr\\:left-6{left:calc(var(--skippr-spacing)*6)}.skippr\\:z-10{z-index:10}.skippr\\:z-20{z-index:20}.skippr\\:z-\\[9998\\]{z-index:9998}.skippr\\:z-\\[9999\\]{z-index:9999}.skippr\\:z-\\[10000\\]{z-index:10000}.skippr\\:order-first{order:-9999}.skippr\\:order-last{order:9999}.skippr\\:mx-auto{margin-inline:auto}.skippr\\:-mt-\\[5px\\]{margin-top:-5px}.skippr\\:-mt-\\[27px\\]{margin-top:-27px}.skippr\\:mt-0\\.5{margin-top:calc(var(--skippr-spacing)*.5)}.skippr\\:mt-1{margin-top:calc(var(--skippr-spacing)*1)}.skippr\\:mt-1\\.5{margin-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:mt-2{margin-top:calc(var(--skippr-spacing)*2)}.skippr\\:mt-3{margin-top:calc(var(--skippr-spacing)*3)}.skippr\\:mt-3\\.5{margin-top:calc(var(--skippr-spacing)*3.5)}.skippr\\:mr-7{margin-right:calc(var(--skippr-spacing)*7)}.skippr\\:-mb-\\[5px\\]{margin-bottom:-5px}.skippr\\:mb-1\\.5{margin-bottom:calc(var(--skippr-spacing)*1.5)}.skippr\\:mb-2{margin-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:mb-3{margin-bottom:calc(var(--skippr-spacing)*3)}.skippr\\:mb-4{margin-bottom:calc(var(--skippr-spacing)*4)}.skippr\\:ml-0\\.5{margin-left:calc(var(--skippr-spacing)*.5)}.skippr\\:ml-1{margin-left:calc(var(--skippr-spacing)*1)}.skippr\\:ml-7{margin-left:calc(var(--skippr-spacing)*7)}.skippr\\:flex{display:flex}.skippr\\:hidden{display:none}.skippr\\:inline-flex{display:inline-flex}.skippr\\:size-1{width:calc(var(--skippr-spacing)*1);height:calc(var(--skippr-spacing)*1)}.skippr\\:size-1\\.5{width:calc(var(--skippr-spacing)*1.5);height:calc(var(--skippr-spacing)*1.5)}.skippr\\:size-2{width:calc(var(--skippr-spacing)*2);height:calc(var(--skippr-spacing)*2)}.skippr\\:size-2\\.5{width:calc(var(--skippr-spacing)*2.5);height:calc(var(--skippr-spacing)*2.5)}.skippr\\:size-3{width:calc(var(--skippr-spacing)*3);height:calc(var(--skippr-spacing)*3)}.skippr\\:size-3\\.5{width:calc(var(--skippr-spacing)*3.5);height:calc(var(--skippr-spacing)*3.5)}.skippr\\:size-4{width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}.skippr\\:size-5{width:calc(var(--skippr-spacing)*5);height:calc(var(--skippr-spacing)*5)}.skippr\\:size-6{width:calc(var(--skippr-spacing)*6);height:calc(var(--skippr-spacing)*6)}.skippr\\:size-7{width:calc(var(--skippr-spacing)*7);height:calc(var(--skippr-spacing)*7)}.skippr\\:size-8{width:calc(var(--skippr-spacing)*8);height:calc(var(--skippr-spacing)*8)}.skippr\\:size-9{width:calc(var(--skippr-spacing)*9);height:calc(var(--skippr-spacing)*9)}.skippr\\:size-10{width:calc(var(--skippr-spacing)*10);height:calc(var(--skippr-spacing)*10)}.skippr\\:size-12{width:calc(var(--skippr-spacing)*12);height:calc(var(--skippr-spacing)*12)}.skippr\\:size-\\[5px\\]{width:5px;height:5px}.skippr\\:size-\\[38px\\]{width:38px;height:38px}.skippr\\:size-full{width:100%;height:100%}.skippr\\:h-0{height:calc(var(--skippr-spacing)*0)}.skippr\\:h-0\\.5{height:calc(var(--skippr-spacing)*.5)}.skippr\\:h-1{height:calc(var(--skippr-spacing)*1)}.skippr\\:h-1\\.5{height:calc(var(--skippr-spacing)*1.5)}.skippr\\:h-2{height:calc(var(--skippr-spacing)*2)}.skippr\\:h-3{height:calc(var(--skippr-spacing)*3)}.skippr\\:h-3\\.5{height:calc(var(--skippr-spacing)*3.5)}.skippr\\:h-4{height:calc(var(--skippr-spacing)*4)}.skippr\\:h-5{height:calc(var(--skippr-spacing)*5)}.skippr\\:h-6{height:calc(var(--skippr-spacing)*6)}.skippr\\:h-7{height:calc(var(--skippr-spacing)*7)}.skippr\\:h-8{height:calc(var(--skippr-spacing)*8)}.skippr\\:h-9{height:calc(var(--skippr-spacing)*9)}.skippr\\:h-10{height:calc(var(--skippr-spacing)*10)}.skippr\\:h-\\[18\\.5px\\]{height:18.5px}.skippr\\:h-\\[36px\\]{height:36px}.skippr\\:h-\\[38px\\]{height:38px}.skippr\\:h-\\[48px\\]{height:48px}.skippr\\:h-\\[54px\\]{height:54px}.skippr\\:h-full{height:100%}.skippr\\:min-h-0{min-height:calc(var(--skippr-spacing)*0)}.skippr\\:min-h-11{min-height:calc(var(--skippr-spacing)*11)}.skippr\\:w-0{width:calc(var(--skippr-spacing)*0)}.skippr\\:w-3\\.5{width:calc(var(--skippr-spacing)*3.5)}.skippr\\:w-4{width:calc(var(--skippr-spacing)*4)}.skippr\\:w-5{width:calc(var(--skippr-spacing)*5)}.skippr\\:w-6{width:calc(var(--skippr-spacing)*6)}.skippr\\:w-7{width:calc(var(--skippr-spacing)*7)}.skippr\\:w-8{width:calc(var(--skippr-spacing)*8)}.skippr\\:w-10{width:calc(var(--skippr-spacing)*10)}.skippr\\:w-40{width:calc(var(--skippr-spacing)*40)}.skippr\\:w-\\[2px\\]{width:2px}.skippr\\:w-\\[3px\\]{width:3px}.skippr\\:w-\\[15\\.4px\\]{width:15.4px}.skippr\\:w-\\[36px\\]{width:36px}.skippr\\:w-\\[38px\\]{width:38px}.skippr\\:w-\\[50px\\]{width:50px}.skippr\\:w-fit{width:fit-content}.skippr\\:w-full{width:100%}.skippr\\:max-w-64{max-width:calc(var(--skippr-spacing)*64)}.skippr\\:max-w-72{max-width:calc(var(--skippr-spacing)*72)}.skippr\\:max-w-\\[80\\%\\]{max-width:80%}.skippr\\:max-w-\\[280px\\]{max-width:280px}.skippr\\:min-w-0{min-width:calc(var(--skippr-spacing)*0)}.skippr\\:min-w-11{min-width:calc(var(--skippr-spacing)*11)}.skippr\\:flex-1{flex:1}.skippr\\:shrink-0{flex-shrink:0}.skippr\\:origin-bottom-left{transform-origin:0 100%}.skippr\\:origin-bottom-right{transform-origin:100% 100%}.skippr\\:origin-center{transform-origin:50%}.skippr\\:origin-left{transform-origin:0}.skippr\\:origin-right{transform-origin:100%}.skippr\\:origin-top-left{transform-origin:0 0}.skippr\\:origin-top-right{transform-origin:100% 0}.skippr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-3{--tw-translate-x:calc(var(--skippr-spacing)*-3);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:-translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*-7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-3{--tw-translate-x:calc(var(--skippr-spacing)*3);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:translate-x-7{--tw-translate-x:calc(var(--skippr-spacing)*7);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:scale-\\[0\\.94\\]{scale:.94}.skippr\\:-rotate-90{rotate:-90deg}.skippr\\:rotate-45{rotate:45deg}.skippr\\:rotate-\\[225deg\\]{rotate:225deg}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out\\]{animation:.2s ease-out skippr-agent-in}.skippr\\:\\[animation\\:skippr-agent-in_200ms_ease-out_240ms_both\\]{animation:.2s ease-out .24s both skippr-agent-in}.skippr\\:\\[animation\\:skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:\\[animation\\:skippr-finger-tap_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-finger-tap}.skippr\\:\\[animation\\:skippr-orb-in_320ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)\\]{animation:.32s cubic-bezier(.34,1.3,.64,1) skippr-orb-in}.skippr\\:\\[animation\\:skippr-stage-fade_240ms_ease-out\\]{animation:.24s ease-out skippr-stage-fade}.skippr\\:\\[animation\\:skippr-tip-in_360ms_cubic-bezier\\(0\\.34\\,1\\.3\\,0\\.64\\,1\\)_backwards\\]{animation:.36s cubic-bezier(.34,1.3,.64,1) backwards skippr-tip-in}.skippr\\:\\[animation\\:skippr-toolset-pop_280ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.28s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:\\[animation\\:skippr-toolset-pop_440ms_cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{animation:.44s cubic-bezier(.22,1,.36,1) skippr-toolset-pop}.skippr\\:animate-\\[skippr-banner-look_2\\.4s_ease-in-out_infinite\\]{animation:2.4s ease-in-out infinite skippr-banner-look}.skippr\\:animate-\\[skippr-bubble-in_0\\.28s_ease-out\\]{animation:.28s ease-out skippr-bubble-in}.skippr\\:animate-\\[skippr-fade-in_0\\.3s_ease-out\\]{animation:.3s ease-out skippr-fade-in}.skippr\\:animate-\\[skippr-pill-content_0\\.22s_ease-out\\]{animation:.22s ease-out skippr-pill-content}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.3s_infinite\\]{animation:1.1s ease-in-out .3s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.6s_infinite\\]{animation:1.1s ease-in-out .6s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.15s_infinite\\]{animation:1.1s ease-in-out .15s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_0\\.45s_infinite\\]{animation:1.1s ease-in-out .45s infinite skippr-speak}.skippr\\:animate-\\[skippr-speak_1\\.1s_ease-in-out_infinite\\]{animation:1.1s ease-in-out infinite skippr-speak}.skippr\\:animate-bounce{animation:var(--skippr-animate-bounce)}.skippr\\:animate-ping{animation:var(--skippr-animate-ping)}.skippr\\:animate-skippr-annotation-pulse{animation:1.8s ease-in-out infinite skippr-annotation-pulse}.skippr\\:animate-skippr-click-ping{animation:.5s ease-out forwards skippr-click-ping}.skippr\\:animate-skippr-cursor-pop{animation:.22s ease-out skippr-cursor-pop}.skippr\\:animate-skippr-press{animation:.5s ease-in-out skippr-press}.skippr\\:animate-skippr-ptt-transmit{animation:1.4s ease-out infinite skippr-ptt-transmit}.skippr\\:animate-skippr-rec-ring{animation:2s ease-out infinite skippr-rec-ring}.skippr\\:animate-skippr-tab-fade{animation:.2s ease-out skippr-tab-fade}.skippr\\:animate-skippr-thinking-dot{animation:1.2s ease-in-out infinite skippr-thinking-dot}.skippr\\:animate-spin{animation:var(--skippr-animate-spin)}.skippr\\:cursor-default{cursor:default}.skippr\\:cursor-grab{cursor:grab}.skippr\\:cursor-not-allowed{cursor:not-allowed}.skippr\\:cursor-pointer{cursor:pointer}.skippr\\:touch-none{touch-action:none}.skippr\\:resize-none{resize:none}.skippr\\:flex-col{flex-direction:column}.skippr\\:flex-col-reverse{flex-direction:column-reverse}.skippr\\:items-center{align-items:center}.skippr\\:items-end{align-items:flex-end}.skippr\\:items-start{align-items:flex-start}.skippr\\:justify-between{justify-content:space-between}.skippr\\:justify-center{justify-content:center}.skippr\\:justify-end{justify-content:flex-end}.skippr\\:justify-start{justify-content:flex-start}.skippr\\:gap-0\\.5{gap:calc(var(--skippr-spacing)*.5)}.skippr\\:gap-1{gap:calc(var(--skippr-spacing)*1)}.skippr\\:gap-1\\.5{gap:calc(var(--skippr-spacing)*1.5)}.skippr\\:gap-2{gap:calc(var(--skippr-spacing)*2)}.skippr\\:gap-2\\.5{gap:calc(var(--skippr-spacing)*2.5)}.skippr\\:gap-3{gap:calc(var(--skippr-spacing)*3)}.skippr\\:gap-\\[2px\\]{gap:2px}.skippr\\:gap-\\[3px\\]{gap:3px}:where(.skippr\\:space-y-0\\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.skippr\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--skippr-spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--skippr-spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.skippr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.skippr\\:overflow-hidden{overflow:hidden}.skippr\\:overflow-y-auto{overflow-y:auto}.skippr\\:rounded{border-radius:.25rem}.skippr\\:rounded-2xl{border-radius:1.125rem}.skippr\\:rounded-\\[1rem\\]{border-radius:1rem}.skippr\\:rounded-\\[10px\\]{border-radius:10px}.skippr\\:rounded-\\[11px\\]{border-radius:11px}.skippr\\:rounded-\\[12px\\]{border-radius:12px}.skippr\\:rounded-\\[14px\\]{border-radius:14px}.skippr\\:rounded-\\[16px\\]{border-radius:16px}.skippr\\:rounded-\\[20px\\]{border-radius:20px}.skippr\\:rounded-full{border-radius:3.40282e38px}.skippr\\:rounded-lg{border-radius:.625rem}.skippr\\:rounded-md{border-radius:.5rem}.skippr\\:rounded-sm{border-radius:.375rem}.skippr\\:rounded-xl{border-radius:.875rem}.skippr\\:rounded-l-\\[18px\\]{border-top-left-radius:18px;border-bottom-left-radius:18px}.skippr\\:rounded-tl-md{border-top-left-radius:.5rem}.skippr\\:rounded-r-\\[18px\\]{border-top-right-radius:18px;border-bottom-right-radius:18px}.skippr\\:border{border-style:var(--tw-border-style);border-width:1px}.skippr\\:border-0{border-style:var(--tw-border-style);border-width:0}.skippr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.skippr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.skippr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.skippr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.skippr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.skippr\\:border-black\\/25{border-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:border-black\\/25{border-color:color-mix(in oklab,var(--skippr-color-black)25%,transparent)}}.skippr\\:border-border{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-brand{border-color:var(--skippr-brand,#2bc0ae)}.skippr\\:border-input{border-color:oklch(92.3% .003 48.717)}.skippr\\:border-primary\\/20{border-color:var(--skippr-brand,#2d2b3d)}@supports (color:color-mix(in lab, red, red)){.skippr\\:border-primary\\/20{border-color:color-mix(in oklab,var(--skippr-brand,#2d2b3d)20%,transparent)}}.skippr\\:border-r-border{border-right-color:oklch(92.3% .003 48.717)}.skippr\\:border-l-border{border-left-color:oklch(92.3% .003 48.717)}.skippr\\:bg-\\[\\#f4ecd8\\]{background-color:#f4ecd8}.skippr\\:bg-amber-50{background-color:var(--skippr-color-amber-50)}.skippr\\:bg-amber-400{background-color:var(--skippr-color-amber-400)}.skippr\\:bg-background{background-color:oklch(100% 0 0)}.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-black\\/\\[0\\.07\\]{background-color:color-mix(in oklab,var(--skippr-color-black)7.0%,transparent)}}.skippr\\:bg-brand,.skippr\\:bg-brand\\/50{background-color:var(--skippr-brand,#2bc0ae)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-brand\\/50{background-color:color-mix(in oklab,var(--skippr-brand,#2bc0ae)50%,transparent)}}.skippr\\:bg-bubble{background-color:#2d2b3d}.skippr\\:bg-bubble\\/95{background-color:oklab(29.9244% .0107414 -.0305411/.95)}.skippr\\:bg-card{background-color:oklch(100% 0 0)}.skippr\\:bg-current{background-color:currentColor}.skippr\\:bg-destructive{background-color:#d94f4f}.skippr\\:bg-emerald-400{background-color:var(--skippr-color-emerald-400)}.skippr\\:bg-foreground{background-color:oklch(14.7% .004 49.25)}.skippr\\:bg-launcher{background-color:#2d2d3f}.skippr\\:bg-muted-foreground\\/20{background-color:oklab(55.3% .00687528 .0110332/.2)}.skippr\\:bg-muted-foreground\\/40{background-color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:bg-muted\\/50{background-color:oklab(97% -.000282743 .000959196/.5)}.skippr\\:bg-neutral-100{background-color:var(--skippr-color-neutral-100)}.skippr\\:bg-primary{background-color:var(--skippr-brand,#2d2b3d)}.skippr\\:bg-primary-foreground\\/15{background-color:var(--skippr-brand-foreground,#fff)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-primary-foreground\\/15{background-color:color-mix(in oklab,var(--skippr-brand-foreground,#fff)15%,transparent)}}.skippr\\:bg-primary-foreground\\/20{background-color:var(--skippr-brand-foreground,#fff)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-primary-foreground\\/20{background-color:color-mix(in oklab,var(--skippr-brand-foreground,#fff)20%,transparent)}}.skippr\\:bg-primary\\/10{background-color:var(--skippr-brand,#2d2b3d)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-primary\\/10{background-color:color-mix(in oklab,var(--skippr-brand,#2d2b3d)10%,transparent)}}.skippr\\:bg-red-50{background-color:var(--skippr-color-red-50)}.skippr\\:bg-red-100{background-color:var(--skippr-color-red-100)}.skippr\\:bg-red-400{background-color:var(--skippr-color-red-400)}.skippr\\:bg-red-500{background-color:var(--skippr-color-red-500)}.skippr\\:bg-secondary{background-color:#ffdfb5}.skippr\\:bg-transparent{background-color:#0000}.skippr\\:bg-white,.skippr\\:bg-white\\/70{background-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:bg-white\\/70{background-color:color-mix(in oklab,var(--skippr-color-white)70%,transparent)}}.skippr\\:fill-brand{fill:var(--skippr-brand,#2bc0ae)}.skippr\\:fill-primary\\/30{fill:var(--skippr-brand,#2d2b3d)}@supports (color:color-mix(in lab, red, red)){.skippr\\:fill-primary\\/30{fill:color-mix(in oklab,var(--skippr-brand,#2d2b3d)30%,transparent)}}.skippr\\:stroke-black\\/15{stroke:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:stroke-black\\/15{stroke:color-mix(in oklab,var(--skippr-color-black)15%,transparent)}}.skippr\\:stroke-bubble{stroke:#2d2b3d}.skippr\\:object-cover{object-fit:cover}.skippr\\:p-0{padding:calc(var(--skippr-spacing)*0)}.skippr\\:p-0\\.5{padding:calc(var(--skippr-spacing)*.5)}.skippr\\:p-1\\.5{padding:calc(var(--skippr-spacing)*1.5)}.skippr\\:p-2{padding:calc(var(--skippr-spacing)*2)}.skippr\\:p-3{padding:calc(var(--skippr-spacing)*3)}.skippr\\:p-3\\.5{padding:calc(var(--skippr-spacing)*3.5)}.skippr\\:p-4{padding:calc(var(--skippr-spacing)*4)}.skippr\\:px-1{padding-inline:calc(var(--skippr-spacing)*1)}.skippr\\:px-1\\.5{padding-inline:calc(var(--skippr-spacing)*1.5)}.skippr\\:px-2{padding-inline:calc(var(--skippr-spacing)*2)}.skippr\\:px-2\\.5{padding-inline:calc(var(--skippr-spacing)*2.5)}.skippr\\:px-3{padding-inline:calc(var(--skippr-spacing)*3)}.skippr\\:px-3\\.5{padding-inline:calc(var(--skippr-spacing)*3.5)}.skippr\\:px-4{padding-inline:calc(var(--skippr-spacing)*4)}.skippr\\:px-6{padding-inline:calc(var(--skippr-spacing)*6)}.skippr\\:px-8{padding-inline:calc(var(--skippr-spacing)*8)}.skippr\\:py-0\\.5{padding-block:calc(var(--skippr-spacing)*.5)}.skippr\\:py-1{padding-block:calc(var(--skippr-spacing)*1)}.skippr\\:py-1\\.5{padding-block:calc(var(--skippr-spacing)*1.5)}.skippr\\:py-2{padding-block:calc(var(--skippr-spacing)*2)}.skippr\\:py-2\\.5{padding-block:calc(var(--skippr-spacing)*2.5)}.skippr\\:py-3{padding-block:calc(var(--skippr-spacing)*3)}.skippr\\:py-4{padding-block:calc(var(--skippr-spacing)*4)}.skippr\\:py-6{padding-block:calc(var(--skippr-spacing)*6)}.skippr\\:pt-1\\.5{padding-top:calc(var(--skippr-spacing)*1.5)}.skippr\\:pr-2\\.5{padding-right:calc(var(--skippr-spacing)*2.5)}.skippr\\:pr-3{padding-right:calc(var(--skippr-spacing)*3)}.skippr\\:pb-2{padding-bottom:calc(var(--skippr-spacing)*2)}.skippr\\:pl-1\\.5{padding-left:calc(var(--skippr-spacing)*1.5)}.skippr\\:pl-2\\.5{padding-left:calc(var(--skippr-spacing)*2.5)}.skippr\\:pl-3\\.5{padding-left:calc(var(--skippr-spacing)*3.5)}.skippr\\:text-center{text-align:center}.skippr\\:text-left{text-align:left}.skippr\\:font-mono{font-family:var(--skippr-font-mono)}.skippr\\:text-sm{font-size:var(--skippr-text-sm);line-height:var(--tw-leading,var(--skippr-text-sm--line-height))}.skippr\\:text-xs{font-size:var(--skippr-text-xs);line-height:var(--tw-leading,var(--skippr-text-xs--line-height))}.skippr\\:text-\\[10px\\]{font-size:10px}.skippr\\:text-\\[11px\\]{font-size:11px}.skippr\\:text-\\[13px\\]{font-size:13px}.skippr\\:leading-5{--tw-leading:calc(var(--skippr-spacing)*5);line-height:calc(var(--skippr-spacing)*5)}.skippr\\:leading-none{--tw-leading:1;line-height:1}.skippr\\:leading-relaxed{--tw-leading:var(--skippr-leading-relaxed);line-height:var(--skippr-leading-relaxed)}.skippr\\:leading-snug{--tw-leading:var(--skippr-leading-snug);line-height:var(--skippr-leading-snug)}.skippr\\:leading-tight{--tw-leading:var(--skippr-leading-tight);line-height:var(--skippr-leading-tight)}.skippr\\:font-medium{--tw-font-weight:var(--skippr-font-weight-medium);font-weight:var(--skippr-font-weight-medium)}.skippr\\:font-semibold{--tw-font-weight:var(--skippr-font-weight-semibold);font-weight:var(--skippr-font-weight-semibold)}.skippr\\:whitespace-nowrap{white-space:nowrap}.skippr\\:text-amber-700{color:var(--skippr-color-amber-700)}.skippr\\:text-amber-950{color:var(--skippr-color-amber-950)}.skippr\\:text-background{color:oklch(100% 0 0)}.skippr\\:text-black,.skippr\\:text-black\\/40{color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-black\\/40{color:color-mix(in oklab,var(--skippr-color-black)40%,transparent)}}.skippr\\:text-brand{color:var(--skippr-brand,#2bc0ae)}.skippr\\:text-bubble{color:#2d2b3d}.skippr\\:text-chart-3{color:oklch(66.6% .179 58.318)}.skippr\\:text-destructive{color:#d94f4f}.skippr\\:text-foreground{color:oklch(14.7% .004 49.25)}.skippr\\:text-muted-foreground{color:oklch(55.3% .013 58.071)}.skippr\\:text-muted-foreground\\/30{color:oklab(55.3% .00687528 .0110332/.3)}.skippr\\:text-muted-foreground\\/40{color:oklab(55.3% .00687528 .0110332/.4)}.skippr\\:text-muted-foreground\\/60{color:oklab(55.3% .00687528 .0110332/.6)}.skippr\\:text-muted-foreground\\/70{color:oklab(55.3% .00687528 .0110332/.7)}.skippr\\:text-neutral-500{color:var(--skippr-color-neutral-500)}.skippr\\:text-neutral-700{color:var(--skippr-color-neutral-700)}.skippr\\:text-primary{color:var(--skippr-brand,#2d2b3d)}.skippr\\:text-primary-foreground,.skippr\\:text-primary-foreground\\/70{color:var(--skippr-brand-foreground,#fff)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-primary-foreground\\/70{color:color-mix(in oklab,var(--skippr-brand-foreground,#fff)70%,transparent)}}.skippr\\:text-red-400{color:var(--skippr-color-red-400)}.skippr\\:text-red-600{color:var(--skippr-color-red-600)}.skippr\\:text-red-700{color:var(--skippr-color-red-700)}.skippr\\:text-secondary-foreground{color:#613700}.skippr\\:text-white,.skippr\\:text-white\\/60{color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:text-white\\/60{color:color-mix(in oklab,var(--skippr-color-white)60%,transparent)}}.skippr\\:capitalize{text-transform:capitalize}.skippr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.skippr\\:line-through{text-decoration-line:line-through}.skippr\\:placeholder-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}.skippr\\:opacity-0{opacity:0}.skippr\\:opacity-40{opacity:.4}.skippr\\:opacity-75{opacity:.75}.skippr\\:opacity-100{opacity:1}.skippr\\:shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[-6px_8px_30px_rgba\\(15\\,18\\,26\\,0\\.32\\)\\]{--tw-shadow:-6px 8px 30px var(--tw-shadow-color,#0f121a52);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_2px_6px_rgba\\(0\\,0\\,0\\,0\\.28\\)\\]{--tw-shadow:0 2px 6px var(--tw-shadow-color,#00000047);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 12px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#0000001f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_14px_rgba\\(239\\,68\\,68\\,0\\.45\\)\\]{--tw-shadow:0 4px 14px var(--tw-shadow-color,#ef444473);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_4px_16px_rgba\\(45\\,43\\,61\\,0\\.45\\)\\,0_2px_4px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow:0 4px 16px var(--tw-shadow-color,#2d2b3d73),0 2px 4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_24px_rgba\\(45\\,43\\,61\\,0\\.35\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#2d2b3d59);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_8px_30px_rgba\\(0\\,0\\,0\\,0\\.16\\)\\,0_4px_12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#00000029),0 4px 12px var(--tw-shadow-color,#00000014);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-\\[0_10px_32px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 32px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:ring-black\\/5{--tw-ring-color:var(--skippr-color-black)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-black\\/5{--tw-ring-color:color-mix(in oklab,var(--skippr-color-black)5%,transparent)}}.skippr\\:ring-brand{--tw-ring-color:var(--skippr-brand,#2bc0ae)}.skippr\\:ring-foreground\\/10{--tw-ring-color:oklab(14.7% .00261104 .00303026/.1)}.skippr\\:ring-primary-foreground\\/30{--tw-ring-color:var(--skippr-brand-foreground,#fff)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-primary-foreground\\/30{--tw-ring-color:color-mix(in oklab,var(--skippr-brand-foreground,#fff)30%,transparent)}}.skippr\\:ring-white\\/15{--tw-ring-color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:ring-white\\/15{--tw-ring-color:color-mix(in oklab,var(--skippr-color-white)15%,transparent)}}.skippr\\:ring-offset-background{--tw-ring-offset-color:oklch(100% 0 0)}.skippr\\:drop-shadow-\\[0_2px_5px_rgba\\(0\\,0\\,0\\,0\\.4\\)\\]{--tw-drop-shadow-size:drop-shadow(0 2px 5px var(--tw-drop-shadow-color,#0006));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.skippr\\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--skippr-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.skippr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[opacity\\,transform\\,height\\]{transition-property:opacity,transform,height;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\,margin\\]{transition-property:width,margin;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--skippr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--skippr-default-transition-duration))}.skippr\\:duration-75{--tw-duration:75ms;transition-duration:75ms}.skippr\\:duration-100{--tw-duration:.1s;transition-duration:.1s}.skippr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.skippr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.skippr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.skippr\\:duration-\\[400ms\\]{--tw-duration:.4s;transition-duration:.4s}.skippr\\:ease-\\[cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{--tw-ease:cubic-bezier(.22,1,.36,1);transition-timing-function:cubic-bezier(.22,1,.36,1)}.skippr\\:ease-\\[cubic-bezier\\(0\\.34\\,1\\.56\\,0\\.64\\,1\\)\\]{--tw-ease:cubic-bezier(.34,1.56,.64,1);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}.skippr\\:ease-in-out{--tw-ease:var(--skippr-ease-in-out);transition-timing-function:var(--skippr-ease-in-out)}.skippr\\:ease-out{--tw-ease:var(--skippr-ease-out);transition-timing-function:var(--skippr-ease-out)}.skippr\\:outline-none{--tw-outline-style:none;outline-style:none}.skippr\\:select-none{-webkit-user-select:none;user-select:none}.skippr\\:\\[animation-delay\\:0ms\\]{animation-delay:0s}.skippr\\:\\[animation-delay\\:150ms\\]{animation-delay:.15s}.skippr\\:\\[animation-delay\\:200ms\\]{animation-delay:.2s}.skippr\\:\\[animation-delay\\:300ms\\]{animation-delay:.3s}.skippr\\:\\[animation-delay\\:400ms\\]{animation-delay:.4s}.skippr\\:\\[overflow-anchor\\:none\\]{overflow-anchor:none}.skippr\\:group-focus-within\\:scale-100:is(:where(.skippr\\:group):focus-within *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-focus-within\\:opacity-100:is(:where(.skippr\\:group):focus-within *){opacity:1}@media (hover:hover){.skippr\\:group-hover\\:scale-100:is(:where(.skippr\\:group):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:group-hover\\:text-red-300:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-red-300)}.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:var(--skippr-color-white)}@supports (color:color-mix(in lab, red, red)){.skippr\\:group-hover\\:text-white\\/80:is(:where(.skippr\\:group):hover *){color:color-mix(in oklab,var(--skippr-color-white)80%,transparent)}}.skippr\\:group-hover\\:opacity-100:is(:where(.skippr\\:group):hover *){opacity:1}}.skippr\\:placeholder\\:text-muted-foreground::placeholder{color:oklch(55.3% .013 58.071)}@media (hover:hover){.skippr\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--skippr-spacing)*-.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:hover\\:bg-\\[\\#3a384b\\]:hover{background-color:#3a384b}.skippr\\:hover\\:bg-accent:hover{background-color:#e7e5e4}.skippr\\:hover\\:bg-amber-100:hover{background-color:var(--skippr-color-amber-100)}.skippr\\:hover\\:bg-bubble:hover{background-color:#2d2b3d}.skippr\\:hover\\:bg-destructive\\/90:hover{background-color:oklab(61.4357% .15892 .0698893/.9)}.skippr\\:hover\\:bg-muted:hover{background-color:oklch(97% .001 106.424)}.skippr\\:hover\\:bg-neutral-100:hover{background-color:var(--skippr-color-neutral-100)}.skippr\\:hover\\:bg-neutral-200:hover{background-color:var(--skippr-color-neutral-200)}.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:var(--skippr-brand-foreground,#fff)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-primary-foreground\\/10:hover{background-color:color-mix(in oklab,var(--skippr-brand-foreground,#fff)10%,transparent)}}.skippr\\:hover\\:bg-primary\\/90:hover{background-color:var(--skippr-brand,#2d2b3d)}@supports (color:color-mix(in lab, red, red)){.skippr\\:hover\\:bg-primary\\/90:hover{background-color:color-mix(in oklab,var(--skippr-brand,#2d2b3d)90%,transparent)}}.skippr\\:hover\\:bg-red-200:hover{background-color:var(--skippr-color-red-200)}.skippr\\:hover\\:bg-red-600:hover{background-color:var(--skippr-color-red-600)}.skippr\\:hover\\:bg-secondary\\/80:hover{background-color:oklab(91.9963% .0175391 .0626889/.8)}.skippr\\:hover\\:text-accent-foreground:hover{color:oklch(21.6% .006 56.043)}.skippr\\:hover\\:text-foreground:hover{color:oklch(14.7% .004 49.25)}.skippr\\:hover\\:text-primary-foreground:hover{color:var(--skippr-brand-foreground,#fff)}.skippr\\:hover\\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}}.skippr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.skippr\\:focus-visible\\:ring-bubble\\/60:focus-visible{--tw-ring-color:oklab(29.9244% .0107414 -.0305411/.6)}.skippr\\:focus-visible\\:ring-primary-foreground:focus-visible{--tw-ring-color:var(--skippr-brand-foreground,#fff)}.skippr\\:focus-visible\\:ring-ring:focus-visible{--tw-ring-color:oklch(70.9% .01 56.259)}.skippr\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.skippr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.skippr\\:active\\:translate-y-0:active{--tw-translate-y:calc(var(--skippr-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.skippr\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.skippr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.skippr\\:disabled\\:opacity-50:disabled{opacity:.5}.skippr\\:disabled\\:opacity-60:disabled{opacity:.6}@media (prefers-reduced-motion:reduce){.skippr\\:motion-reduce\\:hidden{display:none}.skippr\\:motion-reduce\\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.skippr\\:motion-reduce\\:animate-none{animation:none}}.skippr\\:\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.skippr\\:\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.skippr\\:\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--skippr-spacing)*4);height:calc(var(--skippr-spacing)*4)}}@keyframes skippr-tap{0%{transform:scale(1)}45%{transform:scale(.7)}to{transform:scale(1)}}@keyframes skippr-press{0%{transform:scale(1)}55%{transform:scale(1)}85%{transform:scale(.68)}to{transform:scale(1)}}@keyframes skippr-cursor-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes skippr-click-ping{0%{opacity:.9;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(-50%,-50%)scale(2.4)}}@keyframes skippr-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-speak{0%,to{opacity:.6;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-thinking-dot{0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}@keyframes skippr-pulse-ring{0%,to{box-shadow:0 0 #2d2b3d66}50%{box-shadow:0 0 0 10px #2d2b3d00}}@keyframes skippr-rec-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--skippr-brand,#2bc0ae)55%,transparent)}70%{box-shadow:0 0 0 11px #0000}to{box-shadow:0 0 #0000}}@keyframes skippr-ptt-transmit{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--skippr-brand,#2bc0ae)60%,transparent),0 0 0 0 color-mix(in srgb,var(--skippr-brand,#2bc0ae)35%,transparent)}70%{box-shadow:0 0 0 9px #0000,0 0 0 16px #0000}to{box-shadow:0 0 #0000,0 0 #0000}}@keyframes skippr-annotation-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb,var(--skippr-brand,#2bc0ae)50%,transparent)}50%{box-shadow:0 0 0 6px #0000}}@keyframes skippr-speak-ripple{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}@keyframes skippr-bar{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}@keyframes skippr-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes skippr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes skippr-wave{0%,to{opacity:.4;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes skippr-bubble-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-tip-in{0%{opacity:0;transform:translateY(14px)scale(.96)}60%{opacity:1;transform:translateY(-2px)scale(1.01)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes skippr-pill-content{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes skippr-banner-look{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes skippr-finger-tap{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(2px)rotate(-6deg)}}@keyframes skippr-toolset-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes skippr-stage-fade{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes skippr-agent-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes skippr-orb-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.skippr-no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.skippr-no-scrollbar::-webkit-scrollbar{display:none}:host{color:var(--color-foreground)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}`;
|
|
5049
|
+
const hostStyle = accentColor && isHexColor(accentColor) ? {
|
|
5050
|
+
"--skippr-brand": accentColor,
|
|
5051
|
+
"--skippr-brand-foreground": brandForeground(accentColor)
|
|
5052
|
+
} : undefined;
|
|
4951
5053
|
useLayoutEffect2(() => {
|
|
4952
5054
|
const host = hostRef.current;
|
|
4953
5055
|
if (!host || !css)
|
|
@@ -4962,17 +5064,18 @@ function ShadowHost({ children }) {
|
|
|
4962
5064
|
setShadowRoot(root);
|
|
4963
5065
|
}, [css]);
|
|
4964
5066
|
if (!css)
|
|
4965
|
-
return /* @__PURE__ */ jsx13(
|
|
5067
|
+
return /* @__PURE__ */ jsx13(Fragment3, {
|
|
4966
5068
|
children
|
|
4967
5069
|
});
|
|
4968
5070
|
return /* @__PURE__ */ jsx13("div", {
|
|
4969
5071
|
ref: hostRef,
|
|
5072
|
+
style: hostStyle,
|
|
4970
5073
|
children: shadowRoot && createPortal(children, shadowRoot)
|
|
4971
5074
|
});
|
|
4972
5075
|
}
|
|
4973
5076
|
|
|
4974
5077
|
// src/components/Sidebar.tsx
|
|
4975
|
-
import { useContext as useContext13, useEffect as
|
|
5078
|
+
import { useContext as useContext13, useEffect as useEffect29 } from "react";
|
|
4976
5079
|
|
|
4977
5080
|
// src/hooks/useCombinedMessages.ts
|
|
4978
5081
|
import { useContext as useContext9, useMemo as useMemo6 } from "react";
|
|
@@ -5075,7 +5178,7 @@ function useCombinedMessages() {
|
|
|
5075
5178
|
}
|
|
5076
5179
|
|
|
5077
5180
|
// src/hooks/usePhaseUpdates.ts
|
|
5078
|
-
import { useCallback as useCallback14, useContext as useContext10, useEffect as
|
|
5181
|
+
import { useCallback as useCallback14, useContext as useContext10, useEffect as useEffect23 } from "react";
|
|
5079
5182
|
function parsePhases(json) {
|
|
5080
5183
|
try {
|
|
5081
5184
|
const data = JSON.parse(json);
|
|
@@ -5089,7 +5192,7 @@ function usePhaseUpdates() {
|
|
|
5089
5192
|
const parse = useCallback14(parsePhases, []);
|
|
5090
5193
|
const livePhases = useAgentState("phases", parse, []);
|
|
5091
5194
|
const ctx = useContext10(LiveAgentContext);
|
|
5092
|
-
|
|
5195
|
+
useEffect23(() => {
|
|
5093
5196
|
if (livePhases.length > 0)
|
|
5094
5197
|
ctx?.setPhasesSnapshot(livePhases);
|
|
5095
5198
|
}, [livePhases, ctx?.setPhasesSnapshot]);
|
|
@@ -5098,7 +5201,7 @@ function usePhaseUpdates() {
|
|
|
5098
5201
|
}
|
|
5099
5202
|
|
|
5100
5203
|
// src/hooks/useSessionRemaining.ts
|
|
5101
|
-
import { useEffect as
|
|
5204
|
+
import { useEffect as useEffect24, useRef as useRef18, useState as useState17 } from "react";
|
|
5102
5205
|
|
|
5103
5206
|
// src/lib/format.ts
|
|
5104
5207
|
function formatTime(seconds) {
|
|
@@ -5115,8 +5218,8 @@ function parseNumber(s) {
|
|
|
5115
5218
|
function useSessionRemaining() {
|
|
5116
5219
|
const maxCallDuration = useAgentState("maxCallDuration", parseNumber, null);
|
|
5117
5220
|
const endTimeRef = useRef18(null);
|
|
5118
|
-
const [remaining, setRemaining] =
|
|
5119
|
-
|
|
5221
|
+
const [remaining, setRemaining] = useState17(null);
|
|
5222
|
+
useEffect24(() => {
|
|
5120
5223
|
if (maxCallDuration === null || endTimeRef.current !== null)
|
|
5121
5224
|
return;
|
|
5122
5225
|
const endTime = Date.now() + maxCallDuration * 1000;
|
|
@@ -5136,15 +5239,15 @@ function useSessionRemaining() {
|
|
|
5136
5239
|
import { useContext as useContext12, useRef as useRef21 } from "react";
|
|
5137
5240
|
|
|
5138
5241
|
// src/hooks/useElapsedSeconds.ts
|
|
5139
|
-
import { useEffect as
|
|
5242
|
+
import { useEffect as useEffect25, useRef as useRef19, useState as useState18 } from "react";
|
|
5140
5243
|
function useElapsedSeconds(isRunning, resetSignal) {
|
|
5141
|
-
const [elapsed, setElapsed] =
|
|
5244
|
+
const [elapsed, setElapsed] = useState18(0);
|
|
5142
5245
|
const accumulatedSecondsRef = useRef19(0);
|
|
5143
|
-
|
|
5246
|
+
useEffect25(() => {
|
|
5144
5247
|
accumulatedSecondsRef.current = 0;
|
|
5145
5248
|
setElapsed(0);
|
|
5146
5249
|
}, [resetSignal]);
|
|
5147
|
-
|
|
5250
|
+
useEffect25(() => {
|
|
5148
5251
|
if (!isRunning)
|
|
5149
5252
|
return;
|
|
5150
5253
|
const resumedAt = Date.now();
|
|
@@ -5261,7 +5364,7 @@ function ChatHeader() {
|
|
|
5261
5364
|
},
|
|
5262
5365
|
"aria-label": "Close",
|
|
5263
5366
|
title: "Close",
|
|
5264
|
-
className: "skippr:flex skippr:h-8 skippr:w-8 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-lg skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-
|
|
5367
|
+
className: "skippr:flex skippr:h-8 skippr:w-8 skippr:cursor-pointer skippr:items-center skippr:justify-center skippr:rounded-lg skippr:text-primary-foreground/70 skippr:transition-colors skippr:hover:bg-primary-foreground/10 skippr:hover:text-primary-foreground skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-primary-foreground",
|
|
5265
5368
|
children: /* @__PURE__ */ jsx14(X, {
|
|
5266
5369
|
className: "skippr:h-4 skippr:w-4"
|
|
5267
5370
|
})
|
|
@@ -5275,7 +5378,7 @@ function HeaderModeToggle() {
|
|
|
5275
5378
|
return /* @__PURE__ */ jsxs11("fieldset", {
|
|
5276
5379
|
"aria-label": "Response mode",
|
|
5277
5380
|
disabled: isHeld,
|
|
5278
|
-
className: "skippr:flex skippr:items-center skippr:gap-0.5 skippr:rounded-lg skippr:bg-
|
|
5381
|
+
className: "skippr:flex skippr:items-center skippr:gap-0.5 skippr:rounded-lg skippr:bg-primary-foreground/15 skippr:p-0.5 skippr:text-xs skippr:font-medium skippr:ring-1 skippr:ring-primary-foreground/30 skippr:disabled:opacity-50",
|
|
5279
5382
|
children: [
|
|
5280
5383
|
/* @__PURE__ */ jsx14("button", {
|
|
5281
5384
|
type: "button",
|
|
@@ -5285,7 +5388,7 @@ function HeaderModeToggle() {
|
|
|
5285
5388
|
if (textMode)
|
|
5286
5389
|
toggleTextMode();
|
|
5287
5390
|
},
|
|
5288
|
-
className: cn("skippr:rounded-md skippr:px-2.5 skippr:py-1 skippr:transition-colors skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-
|
|
5391
|
+
className: cn("skippr:rounded-md skippr:px-2.5 skippr:py-1 skippr:transition-colors skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-primary-foreground skippr:disabled:cursor-not-allowed", isHeld ? "skippr:cursor-not-allowed" : "skippr:cursor-pointer", textMode ? "skippr:font-semibold skippr:text-primary-foreground" : "skippr:bg-white skippr:text-foreground skippr:shadow-sm"),
|
|
5289
5392
|
children: "Voice"
|
|
5290
5393
|
}),
|
|
5291
5394
|
/* @__PURE__ */ jsx14("button", {
|
|
@@ -5296,7 +5399,7 @@ function HeaderModeToggle() {
|
|
|
5296
5399
|
if (!textMode)
|
|
5297
5400
|
toggleTextMode();
|
|
5298
5401
|
},
|
|
5299
|
-
className: cn("skippr:rounded-md skippr:px-2.5 skippr:py-1 skippr:transition-colors skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-
|
|
5402
|
+
className: cn("skippr:rounded-md skippr:px-2.5 skippr:py-1 skippr:transition-colors skippr:focus-visible:outline-none skippr:focus-visible:ring-2 skippr:focus-visible:ring-primary-foreground skippr:disabled:cursor-not-allowed", isHeld ? "skippr:cursor-not-allowed" : "skippr:cursor-pointer", textMode ? "skippr:bg-white skippr:text-foreground skippr:shadow-sm" : "skippr:font-semibold skippr:text-primary-foreground"),
|
|
5300
5403
|
children: "Text"
|
|
5301
5404
|
})
|
|
5302
5405
|
]
|
|
@@ -5332,7 +5435,7 @@ function LoadingDots({ label }) {
|
|
|
5332
5435
|
}
|
|
5333
5436
|
|
|
5334
5437
|
// src/components/LoginFlow.tsx
|
|
5335
|
-
import { useCallback as useCallback16, useEffect as
|
|
5438
|
+
import { useCallback as useCallback16, useEffect as useEffect26, useRef as useRef22, useState as useState19 } from "react";
|
|
5336
5439
|
|
|
5337
5440
|
// src/components/ui/button.tsx
|
|
5338
5441
|
import { forwardRef as forwardRef3 } from "react";
|
|
@@ -5368,8 +5471,8 @@ import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
|
5368
5471
|
var OTP_LENGTH = 6;
|
|
5369
5472
|
var DIGIT_KEYS = ["d0", "d1", "d2", "d3", "d4", "d5"];
|
|
5370
5473
|
function LoginFlow({ requestOtp, verifyOtp, error, isSubmitting }) {
|
|
5371
|
-
const [step, setStep] =
|
|
5372
|
-
const [email, setEmail] =
|
|
5474
|
+
const [step, setStep] = useState19("email");
|
|
5475
|
+
const [email, setEmail] = useState19("");
|
|
5373
5476
|
const handleRequestOtp = useCallback16(async (emailValue) => {
|
|
5374
5477
|
const success = await requestOtp(emailValue);
|
|
5375
5478
|
if (success)
|
|
@@ -5458,18 +5561,18 @@ function EmailStep({ email, onEmailChange, onSubmit, error, isSubmitting }) {
|
|
|
5458
5561
|
});
|
|
5459
5562
|
}
|
|
5460
5563
|
function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
5461
|
-
const [digits, setDigits] =
|
|
5462
|
-
const [resendCooldown, setResendCooldown] =
|
|
5564
|
+
const [digits, setDigits] = useState19(Array(OTP_LENGTH).fill(""));
|
|
5565
|
+
const [resendCooldown, setResendCooldown] = useState19(0);
|
|
5463
5566
|
const inputRefs = useRef22([]);
|
|
5464
5567
|
const submittedRef = useRef22(false);
|
|
5465
|
-
|
|
5568
|
+
useEffect26(() => {
|
|
5466
5569
|
inputRefs.current[0]?.focus();
|
|
5467
5570
|
}, []);
|
|
5468
|
-
|
|
5571
|
+
useEffect26(() => {
|
|
5469
5572
|
if (error)
|
|
5470
5573
|
submittedRef.current = false;
|
|
5471
5574
|
}, [error]);
|
|
5472
|
-
|
|
5575
|
+
useEffect26(() => {
|
|
5473
5576
|
if (resendCooldown <= 0)
|
|
5474
5577
|
return;
|
|
5475
5578
|
const timer = setTimeout(() => setResendCooldown((c) => c - 1), 1000);
|
|
@@ -5610,17 +5713,17 @@ function OtpStep({ email, onSubmit, onResend, onBack, error, isSubmitting }) {
|
|
|
5610
5713
|
}
|
|
5611
5714
|
|
|
5612
5715
|
// src/components/MessageList.tsx
|
|
5613
|
-
import { useCallback as useCallback17, useLayoutEffect as useLayoutEffect3, useRef as useRef24, useState as
|
|
5716
|
+
import { useCallback as useCallback17, useLayoutEffect as useLayoutEffect3, useRef as useRef24, useState as useState21 } from "react";
|
|
5614
5717
|
|
|
5615
5718
|
// src/components/ChatInput.tsx
|
|
5616
|
-
import { useEffect as
|
|
5719
|
+
import { useEffect as useEffect27, useRef as useRef23, useState as useState20 } from "react";
|
|
5617
5720
|
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
5618
5721
|
var MAX_INPUT_HEIGHT = 60;
|
|
5619
5722
|
function ChatInput({ sendChatMessage, isSendingChat, autoFocus = false }) {
|
|
5620
|
-
const [inputText, setInputText] =
|
|
5723
|
+
const [inputText, setInputText] = useState20("");
|
|
5621
5724
|
const textareaRef = useRef23(null);
|
|
5622
5725
|
const canSend = inputText.trim().length > 0 && !isSendingChat;
|
|
5623
|
-
|
|
5726
|
+
useEffect27(() => {
|
|
5624
5727
|
if (autoFocus)
|
|
5625
5728
|
textareaRef.current?.focus();
|
|
5626
5729
|
}, [autoFocus]);
|
|
@@ -5711,7 +5814,7 @@ function ChatMessage({ message }) {
|
|
|
5711
5814
|
}
|
|
5712
5815
|
|
|
5713
5816
|
// src/components/PlanCard.tsx
|
|
5714
|
-
import { useEffect as
|
|
5817
|
+
import { useEffect as useEffect28 } from "react";
|
|
5715
5818
|
import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
5716
5819
|
var APPROVE_MESSAGE = "Yes, go ahead.";
|
|
5717
5820
|
var CANCEL_MESSAGE = "No, cancel that.";
|
|
@@ -5738,7 +5841,7 @@ function StepIcon({ status }) {
|
|
|
5738
5841
|
}
|
|
5739
5842
|
function PlanCard({ plan, sendChatMessage, onDismiss }) {
|
|
5740
5843
|
const awaitingApproval = plan.state === "proposed";
|
|
5741
|
-
|
|
5844
|
+
useEffect28(() => {
|
|
5742
5845
|
if (plan.state !== "completed")
|
|
5743
5846
|
return;
|
|
5744
5847
|
const timer = setTimeout(onDismiss, COMPLETED_CARD_VISIBLE_MS);
|
|
@@ -5834,9 +5937,9 @@ function MessageList({
|
|
|
5834
5937
|
const containerRef = useRef24(null);
|
|
5835
5938
|
const isPinnedToBottom = useRef24(true);
|
|
5836
5939
|
const lastSeenMessageId = useRef24(undefined);
|
|
5837
|
-
const [showJumpToLatest, setShowJumpToLatest] =
|
|
5940
|
+
const [showJumpToLatest, setShowJumpToLatest] = useState21(false);
|
|
5838
5941
|
const lastMessage = messages.length > 0 ? messages[messages.length - 1] : undefined;
|
|
5839
|
-
const [dismissedPlanId, setDismissedPlanId] =
|
|
5942
|
+
const [dismissedPlanId, setDismissedPlanId] = useState21(null);
|
|
5840
5943
|
const dismissPlan = useCallback17(() => {
|
|
5841
5944
|
if (plan)
|
|
5842
5945
|
setDismissedPlanId(plan.planId);
|
|
@@ -5997,7 +6100,7 @@ function SessionWarningBanner({ remaining }) {
|
|
|
5997
6100
|
}
|
|
5998
6101
|
|
|
5999
6102
|
// src/components/Sidebar.tsx
|
|
6000
|
-
import { jsx as jsx25, jsxs as jsxs20, Fragment as
|
|
6103
|
+
import { jsx as jsx25, jsxs as jsxs20, Fragment as Fragment4 } from "react/jsx-runtime";
|
|
6001
6104
|
var PANEL_GAP_PX = 12;
|
|
6002
6105
|
var PANEL_VIEWPORT_MARGIN_PX = 24;
|
|
6003
6106
|
var PANEL_MAX_HEIGHT_PX = 460;
|
|
@@ -6032,6 +6135,7 @@ function Sidebar({
|
|
|
6032
6135
|
const defaultAgentId = internalCtx?.defaultAgentId ?? null;
|
|
6033
6136
|
const startDefaultSession = internalCtx?.startDefaultSession ?? (() => {});
|
|
6034
6137
|
const talkDisabled = !(internalCtx?.hasResolvedModules ?? false);
|
|
6138
|
+
const hasResolvedModules = useOnceTrue(internalCtx?.hasResolvedModules ?? false);
|
|
6035
6139
|
const usesHostAuth = internalCtx?.usesHostAuth ?? false;
|
|
6036
6140
|
const authFailed = internalCtx?.authFailed ?? false;
|
|
6037
6141
|
const idleHistory = internalCtx?.idleHistory ?? {
|
|
@@ -6057,7 +6161,7 @@ function Sidebar({
|
|
|
6057
6161
|
height: panelExpanded ? availableHeight : `min(${PANEL_MAX_HEIGHT_PX}px, ${availableHeight})`
|
|
6058
6162
|
};
|
|
6059
6163
|
}
|
|
6060
|
-
|
|
6164
|
+
useEffect29(() => {
|
|
6061
6165
|
if (!isSidebar)
|
|
6062
6166
|
return;
|
|
6063
6167
|
const prop = position === "right" ? "marginRight" : "marginLeft";
|
|
@@ -6077,7 +6181,7 @@ function Sidebar({
|
|
|
6077
6181
|
style: { width: isPanelOpen ? SIDEBAR_WIDTH : undefined, ...floatingStyle },
|
|
6078
6182
|
children: [
|
|
6079
6183
|
!hideHeader && /* @__PURE__ */ jsx25(ChatHeader, {}),
|
|
6080
|
-
authFailed ? /* @__PURE__ */ jsx25(AuthError, {}) : isAuthenticated ? /* @__PURE__ */ jsx25(AuthenticatedContent, {
|
|
6184
|
+
authFailed ? /* @__PURE__ */ jsx25(AuthError, {}) : isAuthenticated && hasResolvedModules ? /* @__PURE__ */ jsx25(AuthenticatedContent, {
|
|
6081
6185
|
isConnected,
|
|
6082
6186
|
isPaused,
|
|
6083
6187
|
isPausing,
|
|
@@ -6093,7 +6197,7 @@ function Sidebar({
|
|
|
6093
6197
|
onTalk: startDefaultSession,
|
|
6094
6198
|
talkLabel: startSessionLabel,
|
|
6095
6199
|
talkDisabled
|
|
6096
|
-
}) : usesHostAuth || isValidating ? /* @__PURE__ */ jsx25("div", {
|
|
6200
|
+
}) : usesHostAuth || isValidating || isAuthenticated ? /* @__PURE__ */ jsx25("div", {
|
|
6097
6201
|
className: "skippr:flex skippr:flex-1 skippr:items-center skippr:justify-center",
|
|
6098
6202
|
children: /* @__PURE__ */ jsx25(LoadingDots, {
|
|
6099
6203
|
label: "Loading..."
|
|
@@ -6130,7 +6234,7 @@ function AuthenticatedContent({
|
|
|
6130
6234
|
if (isStarting && !isConnected) {
|
|
6131
6235
|
transitionLabel = "Reconnecting...";
|
|
6132
6236
|
}
|
|
6133
|
-
return /* @__PURE__ */ jsxs20(
|
|
6237
|
+
return /* @__PURE__ */ jsxs20(Fragment4, {
|
|
6134
6238
|
children: [
|
|
6135
6239
|
isConnected && /* @__PURE__ */ jsx25(ConnectedBanner, {}),
|
|
6136
6240
|
showAgenda && /* @__PURE__ */ jsxs20("div", {
|
|
@@ -6173,7 +6277,7 @@ function AuthenticatedContent({
|
|
|
6173
6277
|
children: /* @__PURE__ */ jsx25(LoadingDots, {
|
|
6174
6278
|
label: "Ending session..."
|
|
6175
6279
|
})
|
|
6176
|
-
}) : inSession ? /* @__PURE__ */ jsxs20(
|
|
6280
|
+
}) : inSession ? /* @__PURE__ */ jsxs20(Fragment4, {
|
|
6177
6281
|
children: [
|
|
6178
6282
|
transitionLabel && /* @__PURE__ */ jsx25("div", {
|
|
6179
6283
|
className: "skippr:shrink-0 skippr:border-b skippr:border-border skippr:bg-muted/50 skippr:px-3 skippr:py-1.5 skippr:text-center skippr:text-xs skippr:text-muted-foreground",
|
|
@@ -6387,6 +6491,7 @@ function SidebarTrigger() {
|
|
|
6387
6491
|
const internalCtx = useContext14(LiveAgentContext);
|
|
6388
6492
|
const launcherBottomPx = internalCtx?.launcherBottomPx ?? DEFAULT_LAUNCHER_BOTTOM_PX;
|
|
6389
6493
|
const popsDown = internalCtx?.popsDown ?? false;
|
|
6494
|
+
const logoUrl = internalCtx?.appearance?.logoUrl ?? null;
|
|
6390
6495
|
if (isMinimized || isConnected || isStarting || isPausing)
|
|
6391
6496
|
return null;
|
|
6392
6497
|
const handleClick = isPanelOpen && minimizable ? minimizePanel : togglePanel;
|
|
@@ -6399,6 +6504,10 @@ function SidebarTrigger() {
|
|
|
6399
6504
|
className: cn("skippr:fixed skippr:z-[9998]", "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center", "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", isPanelOpen ? "skippr:rounded-[14px] skippr:bg-bubble skippr:text-white" : "skippr:rounded-[10px] skippr:overflow-hidden", position === "right" ? "skippr:right-6" : "skippr:left-6"),
|
|
6400
6505
|
children: isPanelOpen ? /* @__PURE__ */ jsx27(ChevronDown, {
|
|
6401
6506
|
className: "skippr:size-5"
|
|
6507
|
+
}) : logoUrl ? /* @__PURE__ */ jsx27("img", {
|
|
6508
|
+
src: logoUrl,
|
|
6509
|
+
alt: "",
|
|
6510
|
+
className: "skippr:size-12 skippr:object-cover"
|
|
6402
6511
|
}) : /* @__PURE__ */ jsx27(Logo, {
|
|
6403
6512
|
className: "skippr:size-12"
|
|
6404
6513
|
})
|
|
@@ -6407,6 +6516,14 @@ function SidebarTrigger() {
|
|
|
6407
6516
|
|
|
6408
6517
|
// src/components/LiveAgent.tsx
|
|
6409
6518
|
import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
6519
|
+
function readSavedPosition() {
|
|
6520
|
+
try {
|
|
6521
|
+
const saved = localStorage.getItem("skippr_widget_position");
|
|
6522
|
+
return saved === "left" || saved === "right" ? saved : null;
|
|
6523
|
+
} catch {
|
|
6524
|
+
return null;
|
|
6525
|
+
}
|
|
6526
|
+
}
|
|
6410
6527
|
function readSavedLauncherBottom() {
|
|
6411
6528
|
try {
|
|
6412
6529
|
const saved = Number.parseInt(localStorage.getItem("skippr_widget_bottom") ?? "", 10);
|
|
@@ -6425,7 +6542,7 @@ function PlanPanelOpener() {
|
|
|
6425
6542
|
const plan = usePlanUpdates();
|
|
6426
6543
|
const { expandPanel } = useLiveAgent();
|
|
6427
6544
|
const surfacedPlanIdRef = useRef25(null);
|
|
6428
|
-
|
|
6545
|
+
useEffect30(() => {
|
|
6429
6546
|
if (plan?.state !== "proposed" || surfacedPlanIdRef.current === plan.planId)
|
|
6430
6547
|
return;
|
|
6431
6548
|
surfacedPlanIdRef.current = plan.planId;
|
|
@@ -6440,8 +6557,7 @@ function LiveAgent(props) {
|
|
|
6440
6557
|
appKey,
|
|
6441
6558
|
getUserToken,
|
|
6442
6559
|
userToken,
|
|
6443
|
-
|
|
6444
|
-
verticalAlign = "bottom",
|
|
6560
|
+
verticalAlign: hostVerticalAlign,
|
|
6445
6561
|
variant = "floating",
|
|
6446
6562
|
minimizable = true,
|
|
6447
6563
|
defaultOpen = false,
|
|
@@ -6465,7 +6581,7 @@ function LiveAgent(props) {
|
|
|
6465
6581
|
const auth = useAuth({ appKey });
|
|
6466
6582
|
const usesHostAuth = !!getUserToken || !!userToken || !!authTokenProp;
|
|
6467
6583
|
const effectiveAuthToken = usesHostAuth ? authTokenProp : auth.authToken ?? undefined;
|
|
6468
|
-
const [activeModule, setActiveModule] =
|
|
6584
|
+
const [activeModule, setActiveModule] = useState22(null);
|
|
6469
6585
|
const minimizeOnSessionStart = useCallback18(() => {
|
|
6470
6586
|
if (minimizable) {
|
|
6471
6587
|
setIsMinimized(true);
|
|
@@ -6519,28 +6635,29 @@ function LiveAgent(props) {
|
|
|
6519
6635
|
disconnect();
|
|
6520
6636
|
}, [disconnect]);
|
|
6521
6637
|
const isSessionLive = connection !== null || isStarting || isPausing || isDisconnecting;
|
|
6522
|
-
const [isPanelOpen, setIsPanelOpen] =
|
|
6523
|
-
const [isMinimized, setIsMinimized] =
|
|
6524
|
-
const [sidebarTab, setSidebarTab] =
|
|
6525
|
-
const [phasesSnapshot, setPhasesSnapshot] =
|
|
6526
|
-
const [textMode, setTextMode] =
|
|
6527
|
-
const [panelExpanded, setPanelExpanded] =
|
|
6638
|
+
const [isPanelOpen, setIsPanelOpen] = useState22(defaultOpen);
|
|
6639
|
+
const [isMinimized, setIsMinimized] = useState22(minimizable && !defaultOpen);
|
|
6640
|
+
const [sidebarTab, setSidebarTab] = useState22("agenda");
|
|
6641
|
+
const [phasesSnapshot, setPhasesSnapshot] = useState22([]);
|
|
6642
|
+
const [textMode, setTextMode] = useState22(false);
|
|
6643
|
+
const [panelExpanded, setPanelExpanded] = useState22(false);
|
|
6528
6644
|
const togglePanelExpanded = useCallback18(() => setPanelExpanded((prev) => !prev), []);
|
|
6529
6645
|
const panelRef = useRef25(null);
|
|
6530
6646
|
const controlBarRef = useRef25(null);
|
|
6531
|
-
const [isDragging, setIsDragging] =
|
|
6647
|
+
const [isDragging, setIsDragging] = useState22(false);
|
|
6532
6648
|
const setTextModeState = useCallback18((enabled) => {
|
|
6533
6649
|
setTextMode(enabled);
|
|
6534
6650
|
}, []);
|
|
6535
6651
|
const isConnected = connection !== null;
|
|
6536
6652
|
const showControlBar = isConnected || isStarting || isPausing;
|
|
6537
|
-
|
|
6653
|
+
useEffect30(() => {
|
|
6538
6654
|
if (!isConnected)
|
|
6539
6655
|
setTextModeState(false);
|
|
6540
6656
|
}, [isConnected, setTextModeState]);
|
|
6541
6657
|
const {
|
|
6542
6658
|
modules: availableModules,
|
|
6543
6659
|
defaultSelection,
|
|
6660
|
+
appearance,
|
|
6544
6661
|
isLoading: isLoadingModules,
|
|
6545
6662
|
hasResolved: hasResolvedModules,
|
|
6546
6663
|
error: modulesError,
|
|
@@ -6551,6 +6668,10 @@ function LiveAgent(props) {
|
|
|
6551
6668
|
authedFetch,
|
|
6552
6669
|
agentId: hostAgentId ?? undefined
|
|
6553
6670
|
});
|
|
6671
|
+
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
6672
|
+
const isBootAuthPending = usesHostAuth ? !!appKey && !isAuthenticated && !authFailed : !!appKey && !auth.hasResolvedStoredToken;
|
|
6673
|
+
const isAwaitingModules = isAuthenticated ? !hasResolvedModules : isBootAuthPending;
|
|
6674
|
+
const isLauncherRevealed = useOnceTrue(!isAwaitingModules);
|
|
6554
6675
|
const { goals: adoptionGoals, attendGoal } = useAdoptionGoals({
|
|
6555
6676
|
enabled: !isSessionLive,
|
|
6556
6677
|
bearerToken,
|
|
@@ -6596,27 +6717,38 @@ function LiveAgent(props) {
|
|
|
6596
6717
|
adoptionGoalId: goal.goalId
|
|
6597
6718
|
});
|
|
6598
6719
|
}, [attendGoal, availableModules, startSession]);
|
|
6599
|
-
const [welcomeDismissed, setWelcomeDismissed] =
|
|
6720
|
+
const [welcomeDismissed, setWelcomeDismissed] = useState22(false);
|
|
6600
6721
|
const dismissWelcome = useCallback18(() => setWelcomeDismissed(true), []);
|
|
6601
|
-
const [
|
|
6602
|
-
|
|
6603
|
-
|
|
6604
|
-
if (saved === "left" || saved === "right")
|
|
6605
|
-
return saved;
|
|
6606
|
-
} catch {}
|
|
6607
|
-
return position;
|
|
6608
|
-
});
|
|
6722
|
+
const [savedPosition] = useState22(readSavedPosition);
|
|
6723
|
+
const [currentPosition, setCurrentPosition] = useState22(savedPosition ?? "right");
|
|
6724
|
+
const positionLockedRef = useRef25(savedPosition !== null);
|
|
6609
6725
|
const setPositionWithPersist = useCallback18((pos) => {
|
|
6726
|
+
positionLockedRef.current = true;
|
|
6610
6727
|
setCurrentPosition(pos);
|
|
6611
6728
|
try {
|
|
6612
6729
|
localStorage.setItem("skippr_widget_position", pos);
|
|
6613
6730
|
} catch {}
|
|
6614
6731
|
}, []);
|
|
6615
|
-
const
|
|
6732
|
+
const serverPosition = appearance?.position ?? null;
|
|
6733
|
+
useEffect30(() => {
|
|
6734
|
+
if (!serverPosition || positionLockedRef.current)
|
|
6735
|
+
return;
|
|
6736
|
+
setCurrentPosition(serverPosition);
|
|
6737
|
+
}, [serverPosition]);
|
|
6738
|
+
const [savedLauncherBottom] = useState22(readSavedLauncherBottom);
|
|
6616
6739
|
const hasDraggedRef = useRef25(savedLauncherBottom !== null);
|
|
6617
|
-
const verticalAlignRef = useRef25(
|
|
6618
|
-
const [launcherBottomPx, setLauncherBottomPxState] =
|
|
6619
|
-
const [popsDown, setPopsDown] =
|
|
6740
|
+
const verticalAlignRef = useRef25(hostVerticalAlign ?? "bottom");
|
|
6741
|
+
const [launcherBottomPx, setLauncherBottomPxState] = useState22(() => savedLauncherBottom !== null ? clampLauncherBottom(savedLauncherBottom) : verticalAlignToBottomPx(verticalAlignRef.current));
|
|
6742
|
+
const [popsDown, setPopsDown] = useState22(() => launcherPopsDown(launcherBottomPx));
|
|
6743
|
+
const serverVerticalAlign = appearance?.verticalAlign ?? null;
|
|
6744
|
+
useEffect30(() => {
|
|
6745
|
+
if (!serverVerticalAlign || hostVerticalAlign !== undefined || hasDraggedRef.current)
|
|
6746
|
+
return;
|
|
6747
|
+
verticalAlignRef.current = serverVerticalAlign;
|
|
6748
|
+
const next = verticalAlignToBottomPx(serverVerticalAlign);
|
|
6749
|
+
setLauncherBottomPxState(next);
|
|
6750
|
+
setPopsDown(launcherPopsDown(next));
|
|
6751
|
+
}, [serverVerticalAlign, hostVerticalAlign]);
|
|
6620
6752
|
const setLauncherBottomPx = useCallback18((px) => {
|
|
6621
6753
|
hasDraggedRef.current = true;
|
|
6622
6754
|
setLauncherBottomPxState(px);
|
|
@@ -6631,7 +6763,7 @@ function LiveAgent(props) {
|
|
|
6631
6763
|
setPositionWithPersist(side);
|
|
6632
6764
|
setLauncherBottomPx(bottomPx);
|
|
6633
6765
|
}, [setPositionWithPersist, setLauncherBottomPx]);
|
|
6634
|
-
|
|
6766
|
+
useEffect30(() => {
|
|
6635
6767
|
const syncToViewport = () => {
|
|
6636
6768
|
const next = hasDraggedRef.current ? clampLauncherBottom(launcherBottomPxRef.current) : verticalAlignToBottomPx(verticalAlignRef.current);
|
|
6637
6769
|
setLauncherBottomPxState(next);
|
|
@@ -6658,7 +6790,6 @@ function LiveAgent(props) {
|
|
|
6658
6790
|
await pauseSession();
|
|
6659
6791
|
minimizePanel();
|
|
6660
6792
|
}, [pauseSession, minimizePanel]);
|
|
6661
|
-
const isAuthenticated = bearerToken !== null || auth.isAuthenticated;
|
|
6662
6793
|
const defaultAgentId = hostAgentId ?? defaultSelection.agentId;
|
|
6663
6794
|
const startDefaultSession = useCallback18(() => {
|
|
6664
6795
|
const target = availableModules.find((m) => m.id === defaultAgentId);
|
|
@@ -6755,6 +6886,7 @@ function LiveAgent(props) {
|
|
|
6755
6886
|
refetchModules,
|
|
6756
6887
|
selectModule,
|
|
6757
6888
|
hasResolvedModules,
|
|
6889
|
+
appearance,
|
|
6758
6890
|
adoptionGoals,
|
|
6759
6891
|
startAdoptionSession
|
|
6760
6892
|
}), [
|
|
@@ -6820,6 +6952,7 @@ function LiveAgent(props) {
|
|
|
6820
6952
|
refetchModules,
|
|
6821
6953
|
selectModule,
|
|
6822
6954
|
hasResolvedModules,
|
|
6955
|
+
appearance,
|
|
6823
6956
|
adoptionGoals,
|
|
6824
6957
|
startAdoptionSession
|
|
6825
6958
|
]);
|
|
@@ -6843,6 +6976,7 @@ function LiveAgent(props) {
|
|
|
6843
6976
|
pushOrTapMicMode: isRequestResponseMicMode(agentControls?.micMode)
|
|
6844
6977
|
}),
|
|
6845
6978
|
/* @__PURE__ */ jsxs22(ShadowHost, {
|
|
6979
|
+
accentColor: appearance?.accentColor ?? null,
|
|
6846
6980
|
children: [
|
|
6847
6981
|
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.highlight && /* @__PURE__ */ jsx28(HighlightOverlay, {}),
|
|
6848
6982
|
connection && captureMode === CAPTURE_MODE.Auto && agentControls?.actions && /* @__PURE__ */ jsx28(PageActionHandler, {}),
|
|
@@ -6855,7 +6989,7 @@ function LiveAgent(props) {
|
|
|
6855
6989
|
children: /* @__PURE__ */ jsxs22("div", {
|
|
6856
6990
|
id: WIDGET_ROOT_ID,
|
|
6857
6991
|
children: [
|
|
6858
|
-
isMinimized && !showControlBar && /* @__PURE__ */ jsx28(MinimizedBubble, {
|
|
6992
|
+
isMinimized && !showControlBar && isLauncherRevealed && /* @__PURE__ */ jsx28(MinimizedBubble, {
|
|
6859
6993
|
welcomeMessage,
|
|
6860
6994
|
welcomeDismissed,
|
|
6861
6995
|
onDismissWelcome: dismissWelcome
|