feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles

- Implemented Button component with various props for customization.
- Created Modal component with header, content, and footer subcomponents.
- Added Spinner component for loading indicators.
- Developed Toast component for displaying notifications.
- Introduced Tooltip component for contextual hints with keyboard shortcuts.
- Added corresponding CSS modules for styling each component.
- Updated index file to export new components.
- Configured TypeScript settings for the UI package.

packages/shared/src/components/voice/ScreenSharePreview.module.css

@@ -0,0 +1,86 @@
+/* ── ScreenSharePreview ──────────────────────────────────────────
+   Local preview of the user's own screen share, rendered above
+   the participant grid in the voice call view. Matches the new UI:
+   rounded card, solid dark surface, accent border, label pill. */
+
+.wrap {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+	padding: 10px 12px 14px;
+	width: min(100%, 640px);
+	margin: 0 auto;
+}
+
+.videoFrame {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: #000;
+	border-radius: 10px;
+	overflow: hidden;
+	box-shadow:
+		0 0 0 1px var(--background-modifier-accent, rgba(0, 0, 0, 0.3)),
+		0 6px 18px rgba(0, 0, 0, 0.35);
+}
+
+.video {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	display: block;
+}
+
+.placeholder {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--text-tertiary, #a0a3a8);
+	font-size: 13px;
+	background: rgba(0, 0, 0, 0.55);
+}
+
+.pauseOverlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	background: rgba(0, 0, 0, 0.78);
+	color: var(--text-primary, #ffffff);
+	padding: 16px;
+	text-align: center;
+}
+
+.pauseTitle {
+	font-size: 16px;
+	font-weight: 700;
+	color: #ffffff;
+}
+
+.pauseBody {
+	font-size: 13px;
+	color: var(--text-secondary, #b5bac1);
+	max-width: 320px;
+	line-height: 1.4;
+}
+
+.label {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 3px 10px;
+	border-radius: 999px;
+	background: var(--status-danger, #ed4245);
+	color: #ffffff;
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}