ooxml-ui 1.13.0 → 1.14.0

package/dist/{chunk-D7JPVAYS.js → chunk-C3MXKNNK.js}

@@ -1,12 +1,12 @@
 import { THEME_CSS, installOfficeUiTheme } from './chunk-7E3HU7RL.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-BFPHRWEB.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-LAVVSCRJ.js';
 import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
 import { initialsOf, definePresence } from './chunk-KNC2UEUR.js';
 import { definer, OfficeElement, controlStyles } from './chunk-CWBSXK7P.js';
 import { nothing, html, LitElement, unsafeCSS, svg } from 'lit';
+import { filterActivity, ACTIVITY_FILTERS, describeActivity, localZone, startOfDay, occurrencesBetween, DAY_MS as DAY_MS$1, dayKey, zonedToUtc, viewDays, zonedParts, shiftAnchor, layoutDay, mentionQueryAt, filterMentionTargets, insertMention, MAX_ATTACHMENTS, mentionsUser, mentionSegments, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, STATUS_DURATION_LABELS, PRESENCE_LABELS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, MAX_CHAT_MEMBERS, occurrenceAt, MAX_RECURRENCE_COUNT, MINUTE_MS, MAX_MEETING_TITLE, MAX_MEETING_DESCRIPTION, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
-import { MAX_ATTACHMENTS, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, STATUS_DURATION_LABELS, PRESENCE_LABELS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
 import { keyed } from 'lit/directives/keyed.js';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/reset.css?raw
@@ -42,6 +42,17 @@ function formatSize(bytes) {
   if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
   return `${(bytes / 1048576).toFixed(1)} MB`;
 }
+var timeOnly = (ts) => new Date(ts).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+function formatWhen(start, end) {
+  const day = new Date(start).toLocaleDateString([], {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+  const sameDay = new Date(start).toDateString() === new Date(end).toDateString();
+  const tail = sameDay ? timeOnly(end) : `${new Date(end).toLocaleDateString([], { month: "short", day: "numeric" })}, ${timeOnly(end)}`;
+  return `${day}, ${timeOnly(start)} - ${tail}`;
+}
 var GLYPHS = {
   back: "M12.5 4 6.5 10l6 6",
   pin: "M7 3h6l-1 5 3 3H5l3-3ZM10 11v6",
@@ -62,7 +73,9 @@ var GLYPHS = {
   screenShare: "M3 4h14v9H3ZM7 17h6M10 13v4M10 10V6M8 8l2-2 2 2",
   hand: "M7 10V4.5a1 1 0 0 1 2 0V9M9 9V3.5a1 1 0 0 1 2 0V9M11 9V4.5a1 1 0 0 1 2 0V10M13 8.5a1 1 0 0 1 2 0V12a5 5 0 0 1-5 5h-.5A4.5 4.5 0 0 1 5 13.5L4 10.5a1 1 0 0 1 2-.5l1 2",
   phoneOff: "M3 11c4-3 10-3 14 0l-1.5 2.5-3-1V10a9 9 0 0 0-5 0v2.5l-3 1Z",
-  chat: "M3 4h14v9H8l-5 4z"
+  chat: "M3 4h14v9H8l-5 4z",
+  bell: "M5 14h10l-1.5-2V8.5a3.5 3.5 0 0 0-7 0V12ZM8.5 16.5a1.5 1.5 0 0 0 3 0",
+  at: "M13 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM13 10v1.2a1.8 1.8 0 0 0 3.6 0V10a6.6 6.6 0 1 0-2.6 5.2"
 };
 for (const [name, d] of Object.entries(GLYPHS)) registerIcon(name, d);
 function icon(name) {
@@ -73,54 +86,232 @@ function icon(name) {
 	</svg>`;
 }
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/activity-feed.css?raw
+var activity_feed_default = ":host {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	overflow: hidden;\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-3) var(--office-space-1);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.read-all {\n	padding: var(--office-space-1) var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-brand);\n	font-size: var(--office-font-size-sm);\n}\n.read-all:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.read-all:disabled {\n	color: var(--office-teams-text-subtle);\n	cursor: default;\n}\n.filters {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1) var(--office-space-3) var(--office-space-2);\n}\n.filters button {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	font-size: var(--office-font-size-sm);\n}\n.filters button:hover {\n	background: var(--office-selected);\n}\n.filters button[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.count {\n	min-width: 1.4em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\nul {\n	flex: 1;\n	min-height: 0;\n	margin: 0;\n	padding: 0 var(--office-space-2) var(--office-space-2);\n	overflow-y: auto;\n	list-style: none;\n}\nli {\n	position: relative;\n}\n.item {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-3);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: inherit;\n	text-align: start;\n}\n.item:hover {\n	background: var(--office-selected);\n}\n.item[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n}\n.face {\n	position: relative;\n	flex: none;\n}\n.kind {\n	position: absolute;\n	inset-block-end: calc(-1 * var(--office-space-1));\n	inset-inline-end: calc(-1 * var(--office-space-1));\n	display: grid;\n	place-items: center;\n	width: 1.5em;\n	height: 1.5em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.kind svg {\n	width: 0.9em;\n	height: 0.9em;\n}\n.text {\n	display: flex;\n	flex: 1;\n	flex-direction: column;\n	min-width: 0;\n}\n.line {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\nli[data-unread='true'] .line {\n	font-weight: var(--office-font-weight-bold);\n}\n.preview {\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.when {\n	display: flex;\n	flex: none;\n	flex-direction: column;\n	align-items: flex-end;\n	gap: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.dot {\n	width: 0.7em;\n	height: 0.7em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.toggle {\n	position: absolute;\n	inset-block-end: var(--office-space-1);\n	inset-inline-end: var(--office-space-2);\n	display: none;\n	place-items: center;\n	width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: var(--office-popover);\n	color: var(--office-teams-text-subtle);\n	box-shadow: var(--office-shadow-teams);\n}\nli:hover .toggle,\nli:focus-within .toggle {\n	display: grid;\n}\n.empty {\n	margin: 0;\n	padding: var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n@media (pointer: coarse) {\n	.filters button,\n	.read-all {\n		min-height: var(--office-touch-target, 44px);\n	}\n	.toggle {\n		display: grid;\n		width: var(--office-touch-target, 44px);\n		height: var(--office-touch-target, 44px);\n	}\n}\n";
+
+// src/teams/activity-feed.ts
+var FILTER_LABEL = {
+  all: "All",
+  unread: "Unread",
+  mentions: "Mentions",
+  replies: "Replies",
+  reactions: "Reactions"
+};
+var KIND_ICON = {
+  mention: "at",
+  reply: "reply",
+  reaction: "smile",
+  pin: "pin",
+  meeting: "calendar"
+};
+var EMPTY = {
+  all: "No activity yet. Mentions, replies, reactions and pinned messages show up here.",
+  unread: "You are all caught up.",
+  mentions: "Nobody has mentioned you yet.",
+  replies: "No replies to your messages or followed threads yet.",
+  reactions: "No reactions to your messages yet."
+};
+function activityTime(ts, now = Date.now()) {
+  const day = dayLabel(ts, now);
+  if (day === "Today") return formatTime(ts);
+  if (day === "Yesterday") return day;
+  return new Date(ts).toLocaleDateString([], { month: "short", day: "numeric" });
+}
+var OfficeUiActivityFeed = class extends TeamsElement {
+  static styles = withStyles(activity_feed_default);
+  static properties = {
+    items: { attribute: false },
+    filter: { type: String, reflect: true },
+    selectedId: { type: String, attribute: "selected-id" }
+  };
+  constructor() {
+    super();
+    this.items = [];
+    this.filter = "all";
+    this.selectedId = "";
+  }
+  get unread() {
+    return this.items.filter((item) => !item.read).length;
+  }
+  render() {
+    const shown = filterActivity(this.items, this.filter);
+    const unread = this.unread;
+    return html`
+			<header>
+				<h2>Activity</h2>
+				<button
+					type="button"
+					class="read-all"
+					?disabled=${unread === 0}
+					@click=${() => this.fire("office-activity-read-all", {})}
+				>
+					Mark all as read
+				</button>
+			</header>
+			<div class="filters" role="group" aria-label="Filter activity">
+				${ACTIVITY_FILTERS.map(
+      (value) => html`<button
+							type="button"
+							aria-pressed=${String(this.filter === value)}
+							@click=${() => {
+        this.filter = value;
+        this.fire("office-activity-filter", { filter: value });
+      }}
+						>
+							${FILTER_LABEL[value]}${value === "unread" && unread ? html` <span class="count">${unread}</span>` : nothing}
+						</button>`
+    )}
+			</div>
+			${shown.length ? html`<ul aria-label="Activity feed">
+							${shown.map((item) => this.row(item))}
+						</ul>` : html`<p class="empty" role="status">${EMPTY[this.filter]}</p>`}
+		`;
+  }
+  row(item) {
+    const line = describeActivity(item);
+    return html`<li data-unread=${String(!item.read)} data-kind=${item.kind}>
+			<button
+				type="button"
+				class="item"
+				aria-current=${this.selectedId === item.id ? "true" : "false"}
+				aria-label=${`${item.read ? "" : "Unread. "}${line}. ${item.preview}`}
+				@click=${() => this.fire("office-activity-open", { id: item.id })}
+			>
+				<span class="face">
+					<office-ui-avatar
+						size="md"
+						name=${item.actorName}
+						seed=${item.actorId}
+					></office-ui-avatar>
+					<span class="kind" aria-hidden="true">${icon(KIND_ICON[item.kind])}</span>
+				</span>
+				<span class="text">
+					<span class="line">${line}</span>
+					<span class="preview">${item.preview}</span>
+				</span>
+				<span class="when">
+					<time datetime=${new Date(item.ts).toISOString()}>${activityTime(item.ts)}</time>
+					${item.read ? nothing : html`<span class="dot" aria-hidden="true"></span>`}
+				</span>
+			</button>
+			<button
+				type="button"
+				class="toggle"
+				title=${item.read ? "Mark as unread" : "Mark as read"}
+				aria-label=${item.read ? "Mark as unread" : "Mark as read"}
+				@click=${() => this.fire("office-activity-read", { id: item.id, read: !item.read })}
+			>
+				${icon(item.read ? "bell" : "check")}
+			</button>
+		</li>`;
+  }
+};
+var defineActivityFeed = definer("office-ui-activity-feed", () => OfficeUiActivityFeed);
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app-rail.css?raw
-var app_rail_default = ":host {\n	display: block;\n	width: 5em;\n	background: var(--office-teams-rail);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nul {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: var(--office-space-2) 0;\n	list-style: none;\n}\nbutton {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-0);\n	width: 4.4em;\n	padding: var(--office-space-2) 0;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton[aria-current='page'] {\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nbutton[aria-current='page']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: calc(-1 * var(--office-space-1));\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.glyph {\n	position: relative;\n	display: grid;\n	place-items: center;\n	font-size: 1.3em;\n}\n.label {\n	font-size: var(--office-font-size-2xs);\n}\n:host([hide-labels]) .label {\n	display: none;\n}\n.badge {\n	position: absolute;\n	inset-block-start: -0.4em;\n	inset-inline-end: -0.9em;\n	min-width: 1.5em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\n\n.short {\n	display: none;\n}\n\n/* Compact shell: the rail becomes a bottom navigation bar with short labels. */\n@media (max-width: 56em) {\n	:host {\n		width: auto;\n		padding-block-end: env(safe-area-inset-bottom, 0);\n		padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);\n		border-inline-end: 0;\n		border-block-start: var(--office-border-width) solid var(--office-teams-divider);\n	}\n	ul {\n		flex-direction: row;\n		justify-content: space-around;\n		align-items: stretch;\n		gap: 0;\n		padding: var(--office-space-1) var(--office-space-1);\n	}\n	li {\n		flex: 1 1 0;\n		min-width: 0;\n	}\n	button {\n		width: 100%;\n		min-height: var(--office-touch-target, 44px);\n		padding: var(--office-space-1) 0;\n		justify-content: center;\n	}\n	button[aria-current='page']::before {\n		inset-inline: 25%;\n		inset-block: 0 auto;\n		width: auto;\n		height: var(--office-space-1);\n	}\n	.label.has-short {\n		display: none;\n	}\n	.short {\n		display: inline;\n		font-size: var(--office-font-size-2xs);\n		overflow: hidden;\n		text-overflow: ellipsis;\n		white-space: nowrap;\n		max-width: 100%;\n	}\n}\n@media (max-width: 56em) and (max-height: 30em) {\n	.label,\n	.short {\n		display: none;\n	}\n	button {\n		min-height: 2.4em;\n	}\n}\n";
+var app_rail_default = ":host {\n	display: block;\n	width: 5em;\n	background: var(--office-teams-rail);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nul {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: var(--office-space-2) 0;\n	list-style: none;\n}\nbutton {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-0);\n	width: 4.4em;\n	padding: var(--office-space-2) 0;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton[aria-current='page'] {\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nbutton[aria-current='page']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: calc(-1 * var(--office-space-1));\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.glyph {\n	position: relative;\n	display: grid;\n	place-items: center;\n	font-size: 1.3em;\n}\n.label {\n	font-size: var(--office-font-size-2xs);\n}\n:host([hide-labels]) .label {\n	display: none;\n}\n.badge {\n	position: absolute;\n	inset-block-start: -0.4em;\n	inset-inline-end: -0.9em;\n	min-width: 1.5em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\n\n.short {\n	display: none;\n}\n\n/* Compact shell: the rail becomes a bottom navigation bar with short labels. */\n@media (max-width: 56em) {\n	:host {\n		width: auto;\n		padding-block-end: env(safe-area-inset-bottom, 0);\n		padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);\n		border-inline-end: 0;\n		border-block-start: var(--office-border-width) solid var(--office-teams-divider);\n	}\n	ul {\n		flex-direction: row;\n		justify-content: space-around;\n		align-items: stretch;\n		gap: 0;\n		padding: var(--office-space-1) var(--office-space-1);\n	}\n	li {\n		flex: 1 1 0;\n		min-width: 0;\n	}\n	button {\n		width: 100%;\n		min-height: var(--office-touch-target, 44px);\n		padding: var(--office-space-1) 0;\n		justify-content: center;\n	}\n	button[aria-current='page']::before {\n		inset-inline: 25%;\n		inset-block: 0 auto;\n		width: auto;\n		height: var(--office-space-1);\n	}\n	.label.has-short {\n		display: none;\n	}\n	.short {\n		display: inline;\n		font-size: var(--office-font-size-2xs);\n		overflow: hidden;\n		text-overflow: ellipsis;\n		white-space: nowrap;\n		max-width: 100%;\n	}\n}\n@media (max-width: 56em) and (max-height: 30em) {\n	.label,\n	.short {\n		display: none;\n	}\n	button {\n		min-height: 2.4em;\n	}\n}\n\n/* The More sheet exists only on the phone bar. */\n.more-item {\n	display: none;\n}\n.sheet {\n	box-sizing: border-box;\n	width: 100%;\n	max-width: 100%;\n	margin: auto 0 0;\n	padding: var(--office-space-3) var(--office-space-3)\n		calc(var(--office-space-3) + env(safe-area-inset-bottom, 0));\n	border: 0;\n	border-start-start-radius: var(--office-radius-lg);\n	border-start-end-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-teams);\n}\n.sheet::backdrop {\n	background: var(--office-overlay);\n}\n.sheet ul {\n	flex-direction: column;\n	align-items: stretch;\n	padding: 0;\n}\n.sheet li {\n	flex: none;\n}\n.sheet button {\n	flex-direction: row;\n	justify-content: flex-start;\n	gap: var(--office-space-3);\n	width: 100%;\n	min-height: var(--office-touch-target, 44px);\n	padding: var(--office-space-2) var(--office-space-3);\n	font-size: var(--office-font-size);\n}\n.sheet button.close {\n	justify-content: center;\n	margin-top: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n}\n.sheet .label {\n	display: inline;\n	font-size: var(--office-font-size);\n}\n@media (max-width: 56em) {\n	li[data-secondary='true'] {\n		display: none;\n	}\n	.more-item {\n		display: block;\n		flex: 1 1 0;\n		min-width: 0;\n	}\n	.more .glyph {\n		font-size: 1.3em;\n	}\n}\n";
 
 // src/teams/app-rail.ts
+var total = (n) => n > 99 ? "99+" : String(n);
 var OfficeUiAppRail = class extends TeamsElement {
   static styles = withStyles(app_rail_default);
   static properties = {
     items: { attribute: false },
     selected: { type: String },
-    hideLabels: { type: Boolean, attribute: "hide-labels", reflect: true }
+    hideLabels: { type: Boolean, attribute: "hide-labels", reflect: true },
+    moreOpen: { state: true }
   };
   constructor() {
     super();
     this.items = [];
     this.selected = "";
     this.hideLabels = false;
+    this.moreOpen = false;
   }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "navigation");
     this.setAttribute("aria-label", "App bar");
   }
+  updated(changed) {
+    const dialog = this.renderRoot.querySelector("dialog");
+    if (!dialog || !changed.has("moreOpen")) return;
+    if (this.moreOpen && !dialog.open) dialog.showModal();
+    else if (!this.moreOpen && dialog.open) dialog.close();
+  }
+  closeMore() {
+    this.moreOpen = false;
+    void this.updateComplete.then(
+      () => this.renderRoot.querySelector(".more")?.focus()
+    );
+  }
+  select(id) {
+    this.moreOpen = false;
+    this.fire("office-rail-select", { id });
+  }
   render() {
+    const secondary = this.items.filter((i) => i.secondary);
+    const badge = secondary.reduce((n, i) => n + (i.badge ?? 0), 0);
+    const inMore = secondary.some((i) => i.id === this.selected);
     return html`
 			<ul>
 				${this.items.map(
       (item) => html`
-						<li>
-							<button
-								type="button"
-								aria-label=${item.label}
-								title=${item.label}
-								aria-current=${this.selected === item.id ? "page" : "false"}
-								@click=${() => this.fire("office-rail-select", { id: item.id })}
-							>
-								<span class="glyph">
-									${icon(item.icon)}
-									${item.badge ? html`<span class="badge">${item.badge > 99 ? "99+" : item.badge}</span>` : ""}
-								</span>
-								<span class=${item.shortLabel ? "label has-short" : "label"}>${item.label}</span>
-								${item.shortLabel ? html`<span class="short" aria-hidden="true">${item.shortLabel}</span>` : nothing}
-							</button>
-						</li>
+						<li data-secondary=${String(item.secondary === true)}>${this.button(item)}</li>
 					`
     )}
+				${secondary.length ? html`<li class="more-item">
+								<button
+									type="button"
+									class="more"
+									aria-label=${badge ? `More, ${badge} unread` : "More"}
+									aria-haspopup="dialog"
+									aria-expanded=${String(this.moreOpen)}
+									aria-current=${inMore ? "page" : "false"}
+									@click=${() => this.moreOpen = true}
+								>
+									<span class="glyph">
+										${icon("more")}
+										${badge ? html`<span class="badge">${total(badge)}</span>` : nothing}
+									</span>
+									<span class="short" aria-hidden="true">More</span>
+								</button>
+							</li>` : nothing}
 			</ul>
+			${secondary.length ? html`<dialog
+							class="sheet"
+							aria-label="More apps"
+							@cancel=${(e) => {
+      e.preventDefault();
+      this.closeMore();
+    }}
+							@click=${(e) => {
+      if (e.target === e.currentTarget) this.closeMore();
+    }}
+						>
+							<ul>
+								${secondary.map((item) => html`<li>${this.button(item, true)}</li>`)}
+							</ul>
+							<button type="button" class="close" @click=${() => this.closeMore()}>Close</button>
+						</dialog>` : nothing}
 		`;
   }
+  button(item, sheet = false) {
+    return html`<button
+			type="button"
+			aria-label=${item.label}
+			title=${item.label}
+			aria-current=${this.selected === item.id ? "page" : "false"}
+			@click=${() => this.select(item.id)}
+		>
+			<span class="glyph">
+				${icon(item.icon)}
+				${item.badge ? html`<span class="badge">${total(item.badge)}</span>` : nothing}
+			</span>
+			<span class=${item.shortLabel && !sheet ? "label has-short" : "label"}>${item.label}</span>
+			${item.shortLabel && !sheet ? html`<span class="short" aria-hidden="true">${item.shortLabel}</span>` : nothing}
+		</button>`;
+  }
 };
 var defineAppRail = definer("office-ui-app-rail", () => OfficeUiAppRail);
 
@@ -179,10 +370,10 @@ var call_controls_default = ":host {\n	display: flex;\n	align-items: center;\n	j
 
 // src/teams/call-controls.ts
 var formatElapsed = (ms) => {
-  const total = Math.max(0, Math.floor(ms / 1e3));
+  const total2 = Math.max(0, Math.floor(ms / 1e3));
   const pad = (n) => String(n).padStart(2, "0");
-  const h = Math.floor(total / 3600);
-  return `${h ? `${h}:` : ""}${pad(Math.floor(total % 3600 / 60))}:${pad(total % 60)}`;
+  const h = Math.floor(total2 / 3600);
+  return `${h ? `${h}:` : ""}${pad(Math.floor(total2 % 3600 / 60))}:${pad(total2 % 60)}`;
 };
 var OfficeUiCallControls = class extends TeamsElement {
   static styles = withStyles(call_controls_default);
@@ -266,6 +457,346 @@ var OfficeUiCallControls = class extends TeamsElement {
 };
 var defineCallControls = definer("office-ui-call-controls", () => OfficeUiCallControls);
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/calendar-agenda.css?raw
+var calendar_agenda_default = ":host {\n	display: block;\n	overflow: auto;\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-3) var(--office-space-3) var(--office-space-2) var(--office-space-4);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nh3 {\n	margin: var(--office-space-3) var(--office-space-4) var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	font-weight: var(--office-font-weight-bold);\n}\n.new {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-brand);\n	cursor: pointer;\n}\n.new:hover {\n	background: var(--office-selected);\n}\n.empty {\n	margin: var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\nul {\n	display: grid;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\nli {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.row {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	border-radius: var(--office-radius);\n	background: var(--office-teams-bubble);\n	color: inherit;\n	font: inherit;\n	text-align: start;\n	cursor: pointer;\n}\n.row:hover {\n	background: var(--office-selected);\n}\n.row[data-live='true'] {\n	border-inline-start-color: var(--office-call-live);\n}\n.time,\n.who {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.title {\n	overflow: hidden;\n	font-weight: var(--office-font-weight-bold);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.join {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font: inherit;\n	cursor: pointer;\n}\n.join:hover {\n	background: var(--office-teams-brand-hover);\n}\n@media (pointer: coarse) {\n	.new,\n	.row,\n	.join {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
+
+// src/teams/calendar-agenda.ts
+var HORIZON_DAYS = 14;
+var JOIN_WINDOW_MS = 15 * 6e4;
+var OfficeUiCalendarAgenda = class extends TeamsElement {
+  static styles = withStyles(calendar_agenda_default);
+  static properties = {
+    meetings: { attribute: false },
+    zone: { type: String },
+    now: { type: Number }
+  };
+  constructor() {
+    super();
+    this.meetings = [];
+    this.zone = localZone();
+    this.now = 0;
+  }
+  render() {
+    const now = this.now || Date.now();
+    const from = startOfDay(now, this.zone);
+    const rows = this.meetings.flatMap(
+      (m) => occurrencesBetween(m, from, from + HORIZON_DAYS * DAY_MS$1).map((o) => ({ o, m }))
+    ).filter(({ o }) => o.end > now).sort((a, b) => a.o.start - b.o.start);
+    const groups = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const key = dayKey(row.o.start, this.zone);
+      let group = groups.get(key);
+      if (!group) {
+        const label = new Intl.DateTimeFormat([], {
+          weekday: "long",
+          month: "short",
+          day: "numeric",
+          timeZone: this.zone
+        }).format(row.o.start);
+        groups.set(
+          key,
+          group = { label: key === dayKey(now, this.zone) ? `Today, ${label}` : label, rows: [] }
+        );
+      }
+      group.rows.push(row);
+    }
+    return html`
+			<header>
+				<h2>Calendar</h2>
+				<button
+					class="new"
+					type="button"
+					title="New meeting"
+					aria-label="New meeting"
+					@click=${() => this.fire("office-agenda-new", {})}
+				>
+					${icon("plus")}
+				</button>
+			</header>
+			${groups.size === 0 ? html`<p class="empty">No upcoming meetings. Schedule one with the plus button.</p>` : [...groups.values()].map(
+      (g) => html`<section>
+									<h3>${g.label}</h3>
+									<ul>
+										${g.rows.map(({ o, m }) => this.row(o, m, now))}
+									</ul>
+								</section>`
+    )}
+		`;
+  }
+  row(o, m, now) {
+    const title = o.title ?? m.title;
+    const time = `${this.clock(o.start)} - ${this.clock(o.end)}`;
+    const joinable = m.live || o.start - now <= JOIN_WINDOW_MS && o.end > now;
+    return html`<li>
+			<button
+				type="button"
+				class="row"
+				data-live=${String(m.live)}
+				aria-label=${`${title}, ${time}`}
+				@click=${() => this.fire("office-agenda-open", { meetingId: m.id, start: o.start })}
+			>
+				<span class="time">${time}</span>
+				<span class="title">${title}</span>
+				<span class="who">${m.mine ? "You organized" : m.organizerName}</span>
+			</button>
+			${joinable ? html`<button
+							type="button"
+							class="join"
+							aria-label=${`Join ${title}`}
+							@click=${() => this.fire("office-agenda-join", { meetingId: m.id })}
+						>
+							${m.live ? "Join now" : "Join"}
+						</button>` : ""}
+		</li>`;
+  }
+  clock(ms) {
+    return new Date(ms).toLocaleTimeString([], {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZone: this.zone
+    });
+  }
+};
+var defineCalendarAgenda = definer(
+  "office-ui-calendar-agenda",
+  () => OfficeUiCalendarAgenda
+);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/calendar-view.css?raw
+var calendar_view_default = ":host {\n	--_hour: 4em;\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n	background: var(--office-background);\n}\n.bar {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-4);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.range {\n	flex: 1 1 12em;\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton:hover {\n	background: var(--office-selected);\n}\n.step {\n	display: grid;\n	place-items: center;\n	padding: var(--office-space-2);\n}\n.step.next .modes {\n	display: inline-flex;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	overflow: hidden;\n}\n.modes button {\n	border: 0;\n	border-radius: 0;\n}\n.modes button[aria-pressed='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.new {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.new:hover {\n	background: var(--office-teams-brand-hover);\n}\n.step.next svg {\n	transform: scaleX(-1);\n}\n\n.scroller {\n	flex: 1;\n	min-height: 0;\n	overflow: auto;\n}\n.grid {\n	display: grid;\n	grid-template-columns: 4em repeat(var(--cols), minmax(0, 1fr));\n	grid-template-rows: auto auto;\n	min-width: 0;\n}\n.corner,\n.head {\n	position: sticky;\n	inset-block-start: 0;\n	z-index: 3;\n	background: var(--office-background);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.head {\n	display: grid;\n	justify-items: center;\n	padding: var(--office-space-2) 0;\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.dow {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.dom {\n	display: grid;\n	place-items: center;\n	min-width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-full);\n	font-size: var(--office-font-size-lg);\n}\n.head[data-today='true'] .dom {\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.hours {\n	display: grid;\n	grid-template-rows: repeat(24, var(--_hour));\n}\n.hours span {\n	white-space: nowrap;\n	padding-inline-end: var(--office-space-2);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n	text-align: end;\n	transform: translateY(-0.6em);\n}\n.column {\n	position: relative;\n	height: calc(24 * var(--_hour));\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n	background-image: linear-gradient(\n		to bottom,\n		var(--office-teams-divider) var(--office-border-width),\n		transparent var(--office-border-width)\n	);\n	background-size: 100% var(--_hour);\n}\n.column[data-today='true'] {\n	background-color: var(--office-teams-brand-subtle);\n}\n.event {\n	position: absolute;\n	inset-block-start: calc(var(--top) * 1%);\n	inset-inline-start: calc(var(--col) / var(--span) * 100%);\n	box-sizing: border-box;\n	width: calc(100% / var(--span));\n	height: calc(var(--height) * 1%);\n	min-height: 1.6em;\n	display: grid;\n	align-content: start;\n	padding: var(--office-space-1) var(--office-space-2);\n	overflow: hidden;\n	border: var(--office-border-width) solid var(--office-teams-brand);\n	border-inline-start-width: var(--office-border-width-thick);\n	border-radius: var(--office-radius);\n	background: var(--office-popover);\n	text-align: start;\n	z-index: 1;\n}\n.event[data-mine='true'] {\n	background: var(--office-teams-bubble-own);\n}\n.event[data-live='true'] {\n	border-color: var(--office-call-live);\n}\n.event-title {\n	overflow: hidden;\n	font-weight: var(--office-font-weight-bold);\n	font-size: var(--office-font-size-sm);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.event[data-short='true'] {\n	align-content: center;\n}\n.event[data-short='true'] .event-time {\n	display: none;\n}\n.event-time {\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.now {\n	position: absolute;\n	inset-block-start: calc(var(--top) * 1%);\n	inset-inline: 0;\n	z-index: 2;\n	height: var(--office-border-width-thick);\n	background: var(--office-danger);\n	pointer-events: none;\n}\n.now::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: calc(-1 * var(--office-space-1));\n	inset-block-start: calc(-1 * var(--office-space-1));\n	width: var(--office-space-2);\n	height: var(--office-space-2);\n	border-radius: var(--office-radius-full);\n	background: var(--office-danger);\n}\n@media (max-width: 40em) {\n	:host {\n		--_hour: 4em;\n	}\n	.grid {\n		grid-template-columns: 3.8em repeat(var(--cols), minmax(0, 1fr));\n	}\n	.bar button {\n		min-height: 2.75em;\n	}\n	.modes button {\n		padding-inline: var(--office-space-2);\n	}\n}\n";
+
+// src/teams/calendar-view.ts
+var MODES = [
+  { id: "workweek", label: "Work week" },
+  { id: "week", label: "Week" },
+  { id: "day", label: "Day" }
+];
+var SLOT_MINUTES = 30;
+var FIRST_VISIBLE_HOUR = 8;
+var OfficeUiCalendarView = class extends TeamsElement {
+  static styles = withStyles(calendar_view_default);
+  static properties = {
+    meetings: { attribute: false },
+    zone: { type: String },
+    now: { type: Number },
+    mode: { type: String, reflect: true },
+    anchor: { state: true },
+    tick: { state: true }
+  };
+  timer;
+  scrolled = false;
+  resize;
+  constructor() {
+    super();
+    this.meetings = [];
+    this.zone = localZone();
+    this.now = 0;
+    this.mode = "workweek";
+    this.anchor = 0;
+    this.tick = 0;
+  }
+  clock() {
+    return this.now || Date.now();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "region");
+    this.setAttribute("aria-label", "Calendar");
+    if (!this.anchor) this.anchor = this.clock();
+    if (globalThis.matchMedia?.("(max-width: 40em)").matches && this.mode === "workweek")
+      this.mode = "day";
+    this.timer = setInterval(() => this.tick = this.clock(), 6e4);
+    if (typeof ResizeObserver !== "undefined") {
+      this.resize = new ResizeObserver(() => this.scrollToWorkday());
+      this.resize.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    clearInterval(this.timer);
+    this.resize?.disconnect();
+    super.disconnectedCallback();
+  }
+  updated() {
+    this.scrollToWorkday();
+  }
+  /** Start the day at 8:00, once the grid has a size. */
+  scrollToWorkday() {
+    const scroller = this.renderRoot.querySelector(".scroller");
+    if (this.scrolled || !scroller || scroller.clientHeight === 0) return;
+    scroller.scrollTop = scroller.scrollHeight / 24 * FIRST_VISIBLE_HOUR;
+    this.scrolled = true;
+  }
+  willUpdate(changed) {
+    if (changed.has("now") && this.now && changed.get("now") === 0) this.anchor = this.now;
+  }
+  setMode(mode) {
+    this.mode = mode;
+    this.fire("office-calendar-mode", { mode });
+  }
+  range(days) {
+    const first = days[0];
+    const last = days[days.length - 1];
+    const fmt = (opts, ms) => new Intl.DateTimeFormat([], { ...opts, timeZone: this.zone }).format(ms);
+    if (days.length === 1)
+      return fmt({ weekday: "long", month: "long", day: "numeric", year: "numeric" }, first.start);
+    return new Intl.DateTimeFormat([], {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      timeZone: this.zone
+    }).formatRange(first.start, last.start);
+  }
+  newAt(day, event) {
+    const column = event.currentTarget;
+    const box = column.getBoundingClientRect();
+    const fraction = box.height ? (event.clientY - box.top) / box.height : 0;
+    const minute = Math.floor(Math.max(0, fraction) * 1440 / SLOT_MINUTES) * SLOT_MINUTES;
+    const start = zonedToUtc(
+      { year: day.year, month: day.month, day: day.day, hour: 0, minute },
+      this.zone
+    );
+    this.fire("office-calendar-new", { start });
+  }
+  render() {
+    const now = this.clock();
+    const days = viewDays(this.anchor || now, this.mode, this.zone);
+    const todayStart = startOfDay(now, this.zone);
+    const nowParts = zonedParts(now, this.zone);
+    return html`
+			<div class="bar">
+				<h2 class="range" aria-live="polite">${this.range(days)}</h2>
+				<button type="button" class="today" @click=${() => this.anchor = this.clock()}>
+					Today
+				</button>
+				<button
+					type="button"
+					class="step"
+					aria-label=${this.mode === "day" ? "Previous day" : "Previous week"}
+					@click=${() => this.anchor = shiftAnchor(this.anchor || now, this.mode, -1, this.zone)}
+				>
+					${icon("back")}
+				</button>
+				<button
+					type="button"
+					class="step next"
+					aria-label=${this.mode === "day" ? "Next day" : "Next week"}
+					@click=${() => this.anchor = shiftAnchor(this.anchor || now, this.mode, 1, this.zone)}
+				>
+					${icon("back")}
+				</button>
+				<div class="modes" role="group" aria-label="Calendar view">
+					${MODES.map(
+      (m) => html`<button
+								type="button"
+								aria-pressed=${String(this.mode === m.id)}
+								@click=${() => this.setMode(m.id)}
+							>
+								${m.label}
+							</button>`
+    )}
+				</div>
+				<button
+					type="button"
+					class="new"
+					@click=${() => this.fire("office-calendar-new", { start: 0 })}
+				>
+					${icon("plus")} New meeting
+				</button>
+			</div>
+			<div class="scroller">
+				<div class="grid" style=${`--cols:${days.length}`}>
+					<div class="corner"></div>
+					${days.map((d) => this.dayHead(d, d.start === todayStart))}
+					<div class="hours" aria-hidden="true">
+						${Array.from({ length: 24 }, (_, h) => html`<span>${this.hourLabel(h)}</span>`)}
+					</div>
+					${days.map((d) => this.column(d, d.start === todayStart, nowParts.hour * 60 + nowParts.minute))}
+				</div>
+			</div>
+		`;
+  }
+  hourLabel(hour) {
+    if (hour === 0) return "";
+    return new Date(Date.UTC(2e3, 0, 1, hour)).toLocaleTimeString([], {
+      hour: "numeric",
+      timeZone: "UTC"
+    });
+  }
+  dayHead(day, today) {
+    const name = new Intl.DateTimeFormat([], { weekday: "short", timeZone: this.zone }).format(
+      day.start
+    );
+    return html`<div class="head" data-today=${String(today)}>
+			<span class="dow">${name}</span>
+			<span class="dom">${day.day}</span>
+		</div>`;
+  }
+  column(day, today, nowMinute) {
+    const occurrences = this.meetings.flatMap(
+      (m) => occurrencesBetween(m, day.start, day.end).map((o) => ({ o, m }))
+    );
+    const placed = layoutDay(
+      occurrences.map((x) => x.o),
+      day,
+      this.zone
+    );
+    const byKey = new Map(occurrences.map((x) => [x.o.key, x.m]));
+    const label = new Intl.DateTimeFormat([], {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      timeZone: this.zone
+    }).format(day.start);
+    return html`<div
+			class="column"
+			role="group"
+			aria-label=${label}
+			data-today=${String(today)}
+			@click=${(e) => {
+      if (e.target === e.currentTarget) this.newAt(day, e);
+    }}
+		>
+			${placed.map((p) => {
+      const meeting = byKey.get(p.occurrence.key);
+      const title = p.occurrence.title ?? meeting.title;
+      const time = `${this.clockText(p.occurrence.start)} - ${this.clockText(p.occurrence.end)}`;
+      return html`<button
+					type="button"
+					class="event"
+					data-live=${String(meeting.live)}
+					data-mine=${String(meeting.mine)}
+					data-short=${String(p.endMinute - p.startMinute <= 30)}
+					aria-label=${`${title}, ${time}`}
+					style=${`--top:${p.startMinute / 1440 * 100};--height:${(p.endMinute - p.startMinute) / 1440 * 100};--col:${p.column};--span:${p.columns}`}
+					@click=${(e) => {
+        e.stopPropagation();
+        this.fire("office-calendar-open", {
+          meetingId: meeting.id,
+          start: p.occurrence.start
+        });
+      }}
+				>
+					<span class="event-title">${title}</span>
+					<span class="event-time">${time}</span>
+				</button>`;
+    })}
+			${today ? html`<span
+							class="now"
+							style=${`--top:${nowMinute / 1440 * 100}`}
+							aria-hidden="true"
+						></span>` : nothing}
+		</div>`;
+  }
+  clockText(ms) {
+    return new Date(ms).toLocaleTimeString([], {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZone: this.zone
+    });
+  }
+};
+var defineCalendarView = definer("office-ui-calendar-view", () => OfficeUiCalendarView);
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/call-grid.css?raw
 var call_grid_default = ":host {\n	display: block;\n	min-height: 0;\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n.empty {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	margin: 0;\n	color: var(--office-call-muted-foreground);\n}\n.grid {\n	display: grid;\n	gap: var(--office-space-2);\n	height: 100%;\n	padding: var(--office-space-2);\n	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));\n	grid-auto-rows: minmax(0, 1fr);\n}\n.grid[data-spotlight='true'] {\n	grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);\n	grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));\n}\n.grid[data-spotlight='true'] .tile[data-main='true'] {\n	grid-row: 1 / span var(--rows, 1);\n}\n\n.tile {\n	position: relative;\n	display: grid;\n	place-items: center;\n	min-height: 6em;\n	overflow: hidden;\n	border-radius: var(--office-radius-lg);\n	background: var(--office-call-tile);\n}\nvideo {\n	position: absolute;\n	inset: 0;\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	background: var(--office-call-background);\n}\n.tile[data-screen='true'] video {\n	object-fit: contain;\n}\n.tile[data-self='true'] video {\n	transform: scaleX(-1);\n}\n.tile[data-self='true'][data-screen='true'] video {\n	transform: none;\n}\n\n.name {\n	position: absolute;\n	inset-inline-start: var(--office-space-2);\n	inset-block-end: var(--office-space-2);\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	max-width: calc(100% - 2 * var(--office-space-2));\n	padding: var(--office-space-0) var(--office-space-2);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-scrim);\n	font-size: var(--office-font-size-sm);\n}\n.name span:last-child {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.muted {\n	display: grid;\n	color: var(--office-call-danger);\n}\n.hand {\n	position: absolute;\n	inset-block-start: var(--office-space-2);\n	inset-inline-end: var(--office-space-2);\n	font-size: 1.5em;\n}\n.status {\n	position: absolute;\n	inset-block-start: var(--office-space-2);\n	inset-inline-start: var(--office-space-2);\n	padding: 0 var(--office-space-2);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-scrim);\n	font-size: var(--office-font-size-xs);\n}\n";
 
@@ -399,7 +930,7 @@ var OfficeUiChannelList = class extends TeamsElement {
 var defineChannelList = definer("office-ui-channel-list", () => OfficeUiChannelList);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-composer.css?raw
-var chat_composer_default = ":host {\n	display: block;\n	min-width: 0;\n	flex: none;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	overflow-y: auto;\n	line-height: 1.5;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n\ntextarea:focus-visible {\n	outline: none;\n}\n.box:focus-within {\n	border-color: var(--office-teams-brand);\n}\n.pending {\n	max-height: 7em;\n	overflow-y: auto;\n	padding-block-end: var(--office-space-2);\n}\n.pending li {\n	min-width: 0;\n	max-width: 100%;\n}\n.pending button {\n	max-width: 100%;\n	height: auto;\n	min-height: 2.4em;\n}\n.file-label {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	min-width: 0;\n}\n@media (max-width: 600px) {\n	:host {\n		padding: 0 var(--office-space-2) var(--office-space-2);\n	}\n	textarea {\n		font-size: var(--office-font-size-touch);\n		min-height: 3em;\n	}\n}\n@media (pointer: coarse) {\n	.bar button,\n	.banner button,\n	.pending button,\n	.picker button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
+var chat_composer_default = ":host {\n	display: block;\n	min-width: 0;\n	flex: none;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	overflow-y: auto;\n	line-height: 1.5;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n\ntextarea:focus-visible {\n	outline: none;\n}\n.box:focus-within {\n	border-color: var(--office-teams-brand);\n}\n.pending {\n	max-height: 7em;\n	overflow-y: auto;\n	padding-block-end: var(--office-space-2);\n}\n.pending li {\n	min-width: 0;\n	max-width: 100%;\n}\n.pending button {\n	max-width: 100%;\n	height: auto;\n	min-height: 2.4em;\n}\n.file-label {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	min-width: 0;\n}\n@media (max-width: 600px) {\n	:host {\n		padding: 0 var(--office-space-2) var(--office-space-2);\n	}\n	textarea {\n		font-size: var(--office-font-size-touch);\n		min-height: 3em;\n	}\n}\n@media (pointer: coarse) {\n	.bar button,\n	.banner button,\n	.pending button,\n	.picker button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* The @ picker: a listbox of people above the compose box. */\n.mentions {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline: 0;\n	z-index: 3;\n	max-height: 16em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow-y: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.mentions li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: 2.6em;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-radius: var(--office-radius);\n	cursor: pointer;\n}\n.mentions li[aria-selected='true'],\n.mentions li:hover {\n	background: var(--office-selected);\n}\n.mentions .name {\n	font-weight: 600;\n}\n.mentions .hint {\n	margin-inline-start: auto;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.mentions .everyone {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 2em;\n	height: 2em;\n	border-radius: 50%;\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: 700;\n}\n@media (pointer: coarse) {\n	.mentions li {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
 var EMOJI = [
   "\u{1F600}",
   "\u{1F604}",
@@ -434,8 +965,12 @@ var OfficeUiChatComposer = class extends TeamsElement {
     value: { type: String },
     files: { state: true },
     missingFiles: { attribute: false },
-    emojiOpen: { state: true }
+    emojiOpen: { state: true },
+    mentionTargets: { attribute: false },
+    picker: { state: true },
+    pickerIndex: { state: true }
   };
+  inserted = [];
   lastTyping = 0;
   constructor() {
     super();
@@ -448,6 +983,9 @@ var OfficeUiChatComposer = class extends TeamsElement {
     this.files = [];
     this.missingFiles = [];
     this.emojiOpen = false;
+    this.mentionTargets = [];
+    this.picker = null;
+    this.pickerIndex = 0;
   }
   focusMessage() {
     void this.updateComplete.then(
@@ -472,15 +1010,19 @@ var OfficeUiChatComposer = class extends TeamsElement {
   }
   submit() {
     if (!this.canSend) return;
-    const { value: text, files } = this;
+    const { value: text, files, inserted: mentions } = this;
     this.value = "";
     this.files = [];
+    this.inserted = [];
     this.emojiOpen = false;
-    this.fire("office-chat-send", { text, files });
+    this.picker = null;
+    const detail = { text, files, ...mentions.length ? { mentions } : {} };
+    this.fire("office-chat-send", detail);
     this.focusMessage();
   }
   onInput(event) {
     this.value = event.target.value;
+    this.syncPicker();
     this.saveDraft();
     const now = Date.now();
     if (now - this.lastTyping > 2e3) {
@@ -488,7 +1030,51 @@ var OfficeUiChatComposer = class extends TeamsElement {
       this.fire("office-chat-typing", {});
     }
   }
+  /** Open the picker while the caret sits in an `@query` that somebody matches. */
+  syncPicker() {
+    const area = this.renderRoot.querySelector("textarea");
+    const query = area ? mentionQueryAt(this.value, area.selectionStart) : null;
+    if (!query || filterMentionTargets(this.mentionTargets, query.query).length === 0) {
+      this.picker = null;
+      return;
+    }
+    if (this.picker?.start !== query.start || this.picker.query !== query.query)
+      this.pickerIndex = 0;
+    this.picker = query;
+  }
+  pickerOptions() {
+    return this.picker ? filterMentionTargets(this.mentionTargets, this.picker.query) : [];
+  }
+  chooseMention(target) {
+    const area = this.renderRoot.querySelector("textarea");
+    const picker = this.picker;
+    if (!area || !picker) return;
+    const next = insertMention(this.value, picker, area.selectionStart, target);
+    this.value = next.text;
+    this.inserted = [...this.inserted, target];
+    this.picker = null;
+    this.saveDraft();
+    void this.updateComplete.then(() => {
+      area.focus({ preventScroll: true });
+      area.setSelectionRange(next.caret, next.caret);
+    });
+  }
+  /** Picker keys; true when the key was used. */
+  pickerKey(event) {
+    const options = this.pickerOptions();
+    if (!this.picker || options.length === 0) return false;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      this.pickerIndex = (this.pickerIndex + step + options.length) % options.length;
+    } else if (event.key === "Enter" && !event.shiftKey && !event.isComposing || event.key === "Tab") {
+      this.chooseMention(options[Math.min(this.pickerIndex, options.length - 1)]);
+    } else if (event.key === "Escape") this.picker = null;
+    else return false;
+    event.preventDefault();
+    return true;
+  }
   onKeydown(event) {
+    if (this.pickerKey(event)) return;
     if (event.key === "Escape" && this.emojiOpen) {
       this.emojiOpen = false;
       this.focusMessage();
@@ -527,6 +1113,34 @@ var OfficeUiChatComposer = class extends TeamsElement {
     if (n.length === 0) return "";
     return n.length === 1 ? `${n[0]} is typing\u2026` : `${n.join(", ")} are typing\u2026`;
   }
+  mentionList() {
+    const options = this.pickerOptions();
+    if (options.length === 0) return nothing;
+    return html`<ul
+			id="mention-list"
+			class="mentions"
+			role="listbox"
+			aria-label="People to mention"
+			@mousedown=${(event) => event.preventDefault()}
+		>
+			${options.map(
+      (target, index) => html`<li
+						id=${`mention-option-${index}`}
+						role="option"
+						aria-selected=${String(index === this.pickerIndex)}
+						@click=${() => this.chooseMention(target)}
+					>
+						${target.kind === "user" ? html`<office-ui-avatar
+										size="sm"
+										name=${target.name}
+										seed=${target.id}
+									></office-ui-avatar>` : html`<span class="everyone" aria-hidden="true">@</span>`}
+						<span class="name">${target.name}</span>
+						${target.kind === "user" ? nothing : html`<span class="hint">${target.kind === "channel" ? "Notify everyone in this channel" : "Notify the whole team"}</span>`}
+					</li>`
+    )}
+		</ul>`;
+  }
   render() {
     const banner = this.editing ? "Editing message" : this.replyingTo !== null ? `Replying to ${this.replyingTo}` : "";
     return html`
@@ -576,9 +1190,13 @@ var OfficeUiChatComposer = class extends TeamsElement {
 									${icon("close")}
 								</button>
 							</div>` : nothing}
+				${this.mentionList()}
 				<textarea
 					rows="1"
 					aria-label="Message"
+					aria-haspopup="listbox"
+					aria-controls=${this.pickerOptions().length ? "mention-list" : nothing}
+					aria-activedescendant=${this.pickerOptions().length ? `mention-option-${this.pickerIndex}` : nothing}
 					.value=${live(this.value)}
 					placeholder=${this.placeholder}
 					?disabled=${this.disabled}
@@ -590,6 +1208,11 @@ var OfficeUiChatComposer = class extends TeamsElement {
       }
     }}
 					@keydown=${this.onKeydown}
+					@keyup=${(event) => {
+      if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) this.syncPicker();
+    }}
+					@click=${this.syncPicker}
+					@blur=${() => this.picker = null}
 				></textarea>
 				${this.files.length ? html`<ul class="pending">
 								${this.files.map(
@@ -672,7 +1295,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
 var defineChatComposer = definer("office-ui-chat-composer", () => OfficeUiChatComposer);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-list.css?raw
-var chat_list_default = ":host {\n	display: block;\n	min-height: 0;\n	overflow: auto;\n	padding: var(--office-space-2) var(--office-space-5);\n}\n.thread-link {\n	align-self: flex-start;\n	font: inherit;\n	color: var(--office-foreground);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2);\n	cursor: pointer;\n}\n.empty {\n	margin: var(--office-space-6) 0;\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n\n.day {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin: var(--office-space-4) 0 var(--office-space-2);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.day::before,\n.day::after {\n	content: '';\n	flex: 1;\n	height: var(--office-border-width);\n	background: var(--office-teams-divider);\n}\n\n.msg {\n	position: relative;\n	display: grid;\n	grid-template-columns: 2.3em minmax(0, 1fr);\n	column-gap: var(--office-space-3);\n	padding: var(--office-space-0) 0;\n}\n.msg[data-grouped='false'] {\n	margin-top: var(--office-teams-message-gap, var(--office-space-3));\n}\n.gutter {\n	padding-top: var(--office-space-1);\n}\nheader {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-0);\n}\n.author {\n	font-weight: var(--office-font-weight-bold);\n}\ntime,\n.edited,\n.file-size {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n\n.bubble {\n	display: inline-block;\n	max-width: min(100%, 44em);\n	padding: var(--office-teams-message-padding, var(--office-space-2) var(--office-space-3));\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-bubble);\n	line-height: var(--office-line-height);\n	overflow-wrap: anywhere;\n}\n.text {\n	white-space: pre-wrap;\n}\n.msg[data-own='true'] .bubble {\n	background: var(--office-teams-bubble-own);\n}\n.deleted {\n	color: var(--office-teams-text-subtle);\n	font-style: italic;\n}\nblockquote {\n	margin: 0 0 var(--office-space-1);\n	padding-inline-start: var(--office-space-2);\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	white-space: normal;\n}\nblockquote strong {\n	display: block;\n	color: var(--office-foreground);\n}\n\n.files {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n	white-space: normal;\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 14em;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	text-align: start;\n}\n.file:hover {\n	border-color: var(--office-teams-brand);\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius);\n	background: var(--office-file-other);\n	color: var(--office-call-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\n.meta {\n	display: grid;\n}\n\n.reactions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin-top: var(--office-space-1);\n}\n.pill {\n	display: inline-flex;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	font-size: var(--office-font-size-sm);\n}\n.pill[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n}\n\n.toolbar {\n	position: absolute;\n	inset-block-start: calc(-1 * var(--office-space-3));\n	inset-inline-end: 0;\n	display: none;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.msg:hover .toolbar,\n.msg:focus-within .toolbar {\n	display: flex;\n}\n.toolbar button {\n	display: grid;\n	place-items: center;\n	min-width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n}\n.toolbar button:hover {\n	background: var(--office-selected);\n}\n\n.msg:focus {\n	outline: none;\n}\n.pin-mark {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	color: var(--office-teams-brand);\n	font-size: var(--office-font-size-xs);\n}\n.pin-mark svg {\n	width: 1em;\n	height: 1em;\n}\n@media (pointer: coarse) {\n	.toolbar button {\n		min-width: var(--office-touch-target, 44px);\n		height: var(--office-touch-target, 44px);\n	}\n}\n";
+var chat_list_default = ":host {\n	display: block;\n	min-height: 0;\n	overflow: auto;\n	padding: var(--office-space-2) var(--office-space-5);\n}\n.thread-link {\n	align-self: flex-start;\n	font: inherit;\n	color: var(--office-foreground);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2);\n	cursor: pointer;\n}\n.empty {\n	margin: var(--office-space-6) 0;\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n\n.day {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin: var(--office-space-4) 0 var(--office-space-2);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.day::before,\n.day::after {\n	content: '';\n	flex: 1;\n	height: var(--office-border-width);\n	background: var(--office-teams-divider);\n}\n\n.msg {\n	position: relative;\n	display: grid;\n	grid-template-columns: 2.3em minmax(0, 1fr);\n	column-gap: var(--office-space-3);\n	padding: var(--office-space-0) 0;\n}\n.msg[data-grouped='false'] {\n	margin-top: var(--office-teams-message-gap, var(--office-space-3));\n}\n.gutter {\n	padding-top: var(--office-space-1);\n}\nheader {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-0);\n}\n.author {\n	font-weight: var(--office-font-weight-bold);\n}\ntime,\n.edited,\n.file-size {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n\n.bubble {\n	display: inline-block;\n	max-width: min(100%, 44em);\n	padding: var(--office-teams-message-padding, var(--office-space-2) var(--office-space-3));\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-bubble);\n	line-height: var(--office-line-height);\n	overflow-wrap: anywhere;\n}\n.text {\n	white-space: pre-wrap;\n}\n.msg[data-own='true'] .bubble {\n	background: var(--office-teams-bubble-own);\n}\n.deleted {\n	color: var(--office-teams-text-subtle);\n	font-style: italic;\n}\nblockquote {\n	margin: 0 0 var(--office-space-1);\n	padding-inline-start: var(--office-space-2);\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	white-space: normal;\n}\nblockquote strong {\n	display: block;\n	color: var(--office-foreground);\n}\n\n.files {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n	white-space: normal;\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 14em;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	text-align: start;\n}\n.file:hover {\n	border-color: var(--office-teams-brand);\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius);\n	background: var(--office-file-other);\n	color: var(--office-call-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\n.meta {\n	display: grid;\n}\n\n.reactions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin-top: var(--office-space-1);\n}\n.pill {\n	display: inline-flex;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	font-size: var(--office-font-size-sm);\n}\n.pill[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n}\n\n.toolbar {\n	position: absolute;\n	inset-block-start: calc(-1 * var(--office-space-3));\n	inset-inline-end: 0;\n	display: none;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.msg:hover .toolbar,\n.msg:focus-within .toolbar {\n	display: flex;\n}\n.toolbar button {\n	display: grid;\n	place-items: center;\n	min-width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n}\n.toolbar button:hover {\n	background: var(--office-selected);\n}\n\n.msg:focus {\n	outline: none;\n}\n.pin-mark {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	color: var(--office-teams-brand);\n	font-size: var(--office-font-size-xs);\n}\n.pin-mark svg {\n	width: 1em;\n	height: 1em;\n}\n@media (pointer: coarse) {\n	.toolbar button {\n		min-width: var(--office-touch-target, 44px);\n		height: var(--office-touch-target, 44px);\n	}\n}\n\n/* @mentions: the name in the brand colour; a mention of you (or of everyone) gets a chip. */\n.mention {\n	color: var(--office-teams-brand);\n	font-weight: 600;\n}\n.mention[data-self='true'] {\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius);\n	background: var(--office-teams-brand-subtle);\n}\n.msg[data-mentions-you='true'] .bubble {\n	box-shadow: inset var(--office-border-width-thick) 0 0 var(--office-teams-brand);\n}\n\n/* A message opened from Activity or the pinned bar flashes once. */\n.msg[data-highlight='true'] .bubble {\n	animation: flash 2.4s ease-out;\n}\n@keyframes flash {\n	from {\n		background: var(--office-teams-brand-subtle);\n		outline: var(--office-border-width-thick) solid var(--office-teams-brand);\n	}\n	to {\n		outline: var(--office-border-width-thick) solid transparent;\n	}\n}\n\n.system {\n	margin: var(--office-space-3) 0;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	text-align: center;\n}\n.system:focus {\n	outline: none;\n}\n\n.meeting-card {\n	display: grid;\n	grid-template-columns: auto minmax(0, 1fr) auto auto;\n	align-items: center;\n	gap: var(--office-space-2) var(--office-space-3);\n	min-width: min(22em, 100%);\n	margin-top: var(--office-space-2);\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	white-space: normal;\n}\n.meeting-card[data-gone='true'] {\n	grid-template-columns: auto minmax(0, 1fr);\n	color: var(--office-teams-text-subtle);\n}\n.meeting-icon {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius);\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n}\n.meeting-meta {\n	display: grid;\n	min-width: 0;\n}\n.meeting-title {\n	font-weight: var(--office-font-weight-bold);\n}\n.meeting-time {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meeting-open,\n.meeting-join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.meeting-join {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.meeting-join:hover {\n	background: var(--office-teams-brand-hover);\n}\n@media (max-width: 40em) {\n	.meeting-card {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.meeting-open,\n	.meeting-join {\n		grid-column: 1 / -1;\n		min-height: 2.75em;\n	}\n}\n";
 
 // src/teams/chat-list.ts
 var QUICK_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"];
@@ -690,7 +1313,9 @@ var OfficeUiChatList = class extends TeamsElement {
     messages: { attribute: false },
     selfId: { type: String, attribute: "self-id" },
     replyCounts: { attribute: false },
-    pinnedIds: { attribute: false }
+    pinnedIds: { attribute: false },
+    highlightId: { type: String, attribute: "highlight-id" },
+    meetings: { attribute: false }
   };
   stickToBottom = true;
   constructor() {
@@ -699,6 +1324,8 @@ var OfficeUiChatList = class extends TeamsElement {
     this.selfId = "";
     this.replyCounts = {};
     this.pinnedIds = [];
+    this.highlightId = "";
+    this.meetings = {};
   }
   connectedCallback() {
     super.connectedCallback();
@@ -718,6 +1345,11 @@ var OfficeUiChatList = class extends TeamsElement {
     const rows = [];
     let previous;
     for (const m of this.messages) {
+      if (m.system && !m.deleted) {
+        rows.push(html`<div class="system" data-message-id=${m.id} tabindex="-1">${m.text}</div>`);
+        previous = void 0;
+        continue;
+      }
       if (!previous || dayLabel(previous.ts) !== dayLabel(m.ts))
         rows.push(html`<div class="day"><span>${dayLabel(m.ts)}</span></div>`);
       const grouped = previous !== void 0 && previous.authorId === m.authorId && m.ts - previous.ts < GROUP_MS && !m.replyTo && dayLabel(previous.ts) === dayLabel(m.ts);
@@ -735,7 +1367,9 @@ var OfficeUiChatList = class extends TeamsElement {
 				tabindex="-1"
 				data-message-id=${m.id}
 				data-own=${String(own)}
+				data-highlight=${String(m.id === this.highlightId)}
 				data-grouped=${String(grouped)}
+				data-mentions-you=${String(!m.deleted && mentionsUser(m, this.selfId) && !own)}
 			>
 				<div class="gutter">
 					${grouped ? nothing : html`<office-ui-avatar name=${m.authorName} seed=${m.authorId}></office-ui-avatar>`}
@@ -751,7 +1385,8 @@ var OfficeUiChatList = class extends TeamsElement {
 										<strong>${parent.authorName}</strong
 										>${parent.deleted ? "This message was deleted" : parent.text.slice(0, 120)}
 									</blockquote>` : nothing}
-						${m.deleted ? html`<span class="deleted">This message was deleted</span>` : html`<span class="text">${m.text}</span>${m.editedAt ? html` <span class="edited">(edited)</span>` : nothing}`}
+						${m.deleted ? html`<span class="deleted">This message was deleted</span>` : html`<span class="text">${this.body(m)}</span>${m.editedAt ? html` <span class="edited">(edited)</span>` : nothing}`}
+						${!m.deleted && m.meetingId ? this.meetingCard(m.meetingId) : nothing}
 						${!m.deleted && m.attachments?.length ? this.files(m.attachments) : nothing}
 						${!m.deleted && m.tabId ? html`<button class="thread-link" type="button" @click=${() => this.fire("office-chat-open-tab", { tabId: m.tabId })}>Open tab</button>` : nothing}
 					</div>
@@ -776,6 +1411,47 @@ var OfficeUiChatList = class extends TeamsElement {
 			</article>
 		`;
   }
+  /** Plain runs and highlighted mentions (the name without its `@`, as in Teams), with no whitespace between them. */
+  body(m) {
+    return mentionSegments(m.text, m.mentions).map(
+      (segment) => segment.mention ? html`<span
+						class="mention"
+						data-self=${String(segment.mention.kind !== "user" || segment.mention.id === this.selfId)}
+						>${segment.text.slice(1)}</span
+					>` : segment.text
+    );
+  }
+  meetingCard(meetingId) {
+    const card = this.meetings[meetingId];
+    if (!card)
+      return html`<div class="meeting-card" data-gone="true">
+				<span class="meeting-icon">${icon("calendar")}</span>
+				<span class="meeting-meta">
+					<span class="meeting-title">This meeting was canceled or is not in your calendar</span>
+				</span>
+			</div>`;
+    return html`<div class="meeting-card">
+			<span class="meeting-icon">${icon("calendar")}</span>
+			<span class="meeting-meta">
+				<span class="meeting-title">${card.title}</span>
+				<span class="meeting-time">${formatWhen(card.start, card.end)}</span>
+			</span>
+			<button
+				type="button"
+				class="meeting-open"
+				@click=${() => this.fire("office-chat-meeting", { meetingId, action: "open" })}
+			>
+				Details
+			</button>
+			<button
+				type="button"
+				class="meeting-join"
+				@click=${() => this.fire("office-chat-meeting", { meetingId, action: "join" })}
+			>
+				${card.live ? "Join now" : "Join"}
+			</button>
+		</div>`;
+  }
   toolbar(m, own) {
     return html`
 			<div class="toolbar" role="toolbar" aria-label="Message actions">
@@ -855,6 +1531,161 @@ var OfficeUiChatList = class extends TeamsElement {
 };
 var defineChatList = definer("office-ui-chat-list", () => OfficeUiChatList);
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-sidebar.css?raw
+var chat_sidebar_default = ":host {\n	display: block;\n	overflow: auto;\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-3) var(--office-space-3) var(--office-space-2) var(--office-space-4);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.new {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-brand);\n}\n.new:hover {\n	background: var(--office-selected);\n}\nul {\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\n.empty {\n	margin: var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.row {\n	position: relative;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n	text-align: start;\n}\n.row:hover {\n	background: var(--office-selected);\n}\n.row[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-foreground);\n}\n.row[aria-current='true']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: 0;\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.group {\n	display: grid;\n	place-items: center;\n	flex: none;\n	width: 2.3em;\n	height: 2.3em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-bubble);\n	color: var(--office-teams-brand);\n}\n.text {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n}\n.line {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n}\n.title {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-foreground);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\ntime {\n	font-size: var(--office-font-size-xs);\n}\n.preview {\n	overflow: hidden;\n	font-size: var(--office-font-size-sm);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.row[data-unread='true'] .title,\n.row[data-unread='true'] .preview {\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.live {\n	display: grid;\n	color: var(--office-call-live);\n}\n.count {\n	min-width: 1.6em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-xs);\n	line-height: 1.6;\n	text-align: center;\n}\n@media (pointer: coarse) {\n	.new,\n	.row {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
+
+// src/teams/chat-sidebar.ts
+function stamp(ts) {
+  if (!ts) return "";
+  return dayLabel(ts) === "Today" ? formatTime(ts) : new Date(ts).toLocaleDateString([], { month: "short", day: "numeric" });
+}
+var OfficeUiChatSidebar = class extends TeamsElement {
+  static styles = withStyles(chat_sidebar_default);
+  static properties = {
+    chats: { attribute: false },
+    selectedId: { type: String, attribute: "selected-id" }
+  };
+  constructor() {
+    super();
+    this.chats = [];
+    this.selectedId = "";
+  }
+  render() {
+    return html`
+			<header>
+				<h2>Chat</h2>
+				<button
+					class="new"
+					type="button"
+					title="New chat"
+					aria-label="New chat"
+					@click=${() => this.fire("office-chat-new", {})}
+				>
+					${icon("plus")}
+				</button>
+			</header>
+			${this.chats.length === 0 ? html`<p class="empty">No chats yet. Start one with the plus button.</p>` : html`<ul>
+							${this.chats.map((c) => this.row(c))}
+						</ul>`}
+		`;
+  }
+  row(c) {
+    const other = c.kind === "direct" ? c.members.find((m) => !m.self) : void 0;
+    const preview = c.lastMessage ? c.lastMessage.system ? c.lastMessage.text : c.lastMessage.mine ? `You: ${c.lastMessage.text}` : c.kind === "direct" ? c.lastMessage.text : `${c.lastMessage.authorName}: ${c.lastMessage.text}` : "No messages yet";
+    return html`
+			<li>
+				<button
+					class="row"
+					type="button"
+					aria-current=${c.id === this.selectedId ? "true" : "false"}
+					data-unread=${c.unread ? "true" : "false"}
+					@click=${() => this.fire("office-chat-select", { id: c.id })}
+				>
+					${other ? html`<office-ui-avatar
+									name=${other.name}
+									seed=${other.id}
+									presence=${other.availability}
+								></office-ui-avatar>` : html`<span class="group" aria-hidden="true"
+									>${icon(c.meetingId ? "calendar" : "users")}</span
+								>`}
+					<span class="text">
+						<span class="line">
+							<span class="title">${c.title}</span>
+							<time>${stamp(c.ts)}</time>
+						</span>
+						<span class="preview">${preview}</span>
+					</span>
+					${c.live ? html`<span class="live" title="Call in progress">${icon("video")}</span>` : nothing}
+					${c.unread ? html`<span class="count" aria-label=${`${c.unread} unread`}
+									>${c.unread > 99 ? "99+" : c.unread}</span
+								>` : nothing}
+				</button>
+			</li>
+		`;
+  }
+};
+var defineChatSidebar = definer("office-ui-chat-sidebar", () => OfficeUiChatSidebar);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/people-picker.css?raw
+var people_picker_default = ":host {\n	display: grid;\n	gap: var(--office-space-2);\n	min-width: 0;\n}\ninput[type='search'] {\n	min-width: 0;\n	box-sizing: border-box;\n	padding: var(--office-space-3);\n	font: inherit;\n	color: inherit;\n	background: var(--office-field-background);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius-md);\n}\n.chips,\n.list {\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.chips {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n}\n.chip {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand-subtle);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.list {\n	max-height: 14em;\n	overflow: auto;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.list label {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.list label:hover {\n	background: var(--office-selected);\n}\n.name {\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.none {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n@media (pointer: coarse) {\n	.list label,\n	.chip {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
+
+// src/teams/people-picker.ts
+var OfficeUiPeoplePicker = class extends TeamsElement {
+  static styles = withStyles(people_picker_default);
+  static properties = {
+    contacts: { attribute: false },
+    selected: { attribute: false },
+    exclude: { attribute: false },
+    label: { type: String },
+    query: { state: true }
+  };
+  constructor() {
+    super();
+    this.contacts = [];
+    this.selected = [];
+    this.exclude = [];
+    this.label = "People";
+    this.query = "";
+  }
+  toggle(id) {
+    const next = this.selected.includes(id) ? this.selected.filter((s) => s !== id) : [...this.selected, id];
+    this.fire("office-people-change", { selected: next });
+  }
+  render() {
+    const q = this.query.trim().toLocaleLowerCase();
+    const offered = this.contacts.filter(
+      (c) => !this.exclude.includes(c.id) && (!q || c.name.toLocaleLowerCase().includes(q))
+    );
+    const chosen = this.contacts.filter((c) => this.selected.includes(c.id));
+    return html`
+			${chosen.length ? html`<ul class="chips" aria-label="Selected people">
+							${chosen.map(
+      (c) => html`<li>
+										<button
+											type="button"
+											class="chip"
+											aria-label=${`Remove ${c.name}`}
+											@click=${() => this.toggle(c.id)}
+										>
+											${c.name} <span aria-hidden="true">×</span>
+										</button>
+									</li>`
+    )}
+						</ul>` : nothing}
+			<input
+				type="search"
+				placeholder="Search people"
+				aria-label=${`Search ${this.label.toLocaleLowerCase()}`}
+				.value=${this.query}
+				@input=${(e) => this.query = e.target.value}
+			/>
+			${offered.length === 0 ? html`<p class="none">
+							${this.contacts.length === 0 ? "Nobody else has joined this workspace yet." : "No one matches that search."}
+						</p>` : html`<ul class="list" role="group" aria-label=${this.label}>
+							${offered.map(
+      (c) => html`<li>
+										<label>
+											<input
+												type="checkbox"
+												.checked=${this.selected.includes(c.id)}
+												@change=${() => this.toggle(c.id)}
+											/>
+											<office-ui-avatar
+												size="sm"
+												name=${c.name}
+												seed=${c.id}
+												presence=${c.availability}
+											></office-ui-avatar>
+											<span class="name">${c.name}</span>
+										</label>
+									</li>`
+    )}
+						</ul>`}
+		`;
+  }
+};
+var definePeoplePicker = definer("office-ui-people-picker", () => OfficeUiPeoplePicker);
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/prejoin.css?raw
 var prejoin_default = ":host {\n	display: grid;\n	place-items: center;\n	padding: var(--office-space-5);\n	background: var(--office-teams-panel);\n}\n.card {\n	display: grid;\n	grid-template-columns: minmax(0, 3fr) minmax(16em, 2fr);\n	width: min(60em, 100%);\n	overflow: hidden;\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.stage {\n	position: relative;\n	display: grid;\n	place-content: center;\n	justify-items: center;\n	gap: var(--office-space-3);\n	min-height: 18em;\n	background: var(--office-call-background);\n	color: var(--office-call-muted-foreground);\n}\n.stage video {\n	position: absolute;\n	inset: 0;\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	transform: scaleX(-1);\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.for {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.switch {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	cursor: pointer;\n}\n.what {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.switch input {\n	position: absolute;\n	inset: 0;\n	margin: 0;\n	opacity: 0;\n	cursor: pointer;\n}\n.track {\n	position: relative;\n	width: 2.6em;\n	height: 1.4em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-border);\n	transition: background var(--office-duration-fast);\n}\n.track::after {\n	content: '';\n	position: absolute;\n	inset-block-start: 0.2em;\n	inset-inline-start: 0.2em;\n	width: 1em;\n	height: 1em;\n	border-radius: 50%;\n	background: var(--office-background);\n	transition: transform var(--office-duration-fast);\n}\n.switch input:checked ~ .track {\n	background: var(--office-teams-brand);\n}\n.switch input:checked ~ .track::after {\n	transform: translateX(1.2em);\n}\n.switch:has(input:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n	margin-top: auto;\n}\n.actions button {\n	padding: var(--office-space-2) var(--office-space-5);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	font-weight: var(--office-font-weight-bold);\n}\n.actions .join {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.actions .join:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.actions button:disabled {\n	opacity: 0.6;\n	cursor: wait;\n}\n@media (max-width: 767px) {\n	.card {\n		grid-template-columns: 1fr;\n	}\n}\n";
 
@@ -937,13 +1768,15 @@ var OfficeUiPrejoin = class extends TeamsElement {
 };
 var definePrejoin = definer("office-ui-prejoin", () => OfficeUiPrejoin);
 var TeamsController = class {
-  constructor(host, onNotice) {
+  constructor(host, onNotice, onNotification = () => void 0) {
     this.host = host;
     this.onNotice = onNotice;
+    this.onNotification = onNotification;
     host.addController(this);
   }
   host;
   onNotice;
+  onNotification;
   client = null;
   state = null;
   off = [];
@@ -958,7 +1791,8 @@ var TeamsController = class {
         this.state = client.getState();
         this.host.requestUpdate();
       }),
-      client.on("notice", this.onNotice)
+      client.on("notice", this.onNotice),
+      client.on("notification", this.onNotification)
     ];
     this.host.requestUpdate();
   }
@@ -1954,7 +2788,7 @@ function defineTeamsFilesPanel() {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-settings.css?raw
-var teams_settings_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(76em, 94vw);\n	max-height: 90dvh;\n	overflow: hidden;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\n:host([embedded]) {\n	display: block;\n	height: 100%;\n	min-height: 0;\n}\n:host([embedded]:not([open])) {\n	display: none;\n}\n:host([embedded]) dialog {\n	position: relative;\n	width: 100%;\n	height: 100%;\n	max-width: none;\n	max-height: none;\n	margin: 0;\n	border: 0;\n	border-radius: 0;\n	box-shadow: none;\n}\n:host([embedded]) dialog[open] {\n	display: flex;\n	flex-direction: column;\n}\n:host([embedded]) .settings-layout {\n	flex: 1;\n	height: auto;\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	gap: var(--office-space-3);\n}\nheader input {\n	margin-inline-start: auto;\n	width: min(24em, 50%);\n	min-width: 0;\n}\n.settings-results ul {\n	list-style: none;\n	padding: 0;\n	display: grid;\n	gap: var(--office-space-3);\n}\n.settings-results button {\n	display: grid;\n	gap: var(--office-space-2);\n	width: 100%;\n	text-align: start;\n}\n.settings-results button:hover {\n	background: var(--office-selected);\n}\nh1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.settings-layout {\n	display: grid;\n	grid-template-columns: 19em minmax(0, 1fr);\n	height: min(42em, calc(90dvh - 5em));\n	min-height: 0;\n}\nnav {\n	min-height: 0;\n	overflow-y: auto;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nnav button {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: 3em;\n	text-align: start;\n	border: 0;\n	background: transparent;\n}\nnav button:hover {\n	background: var(--office-selected);\n}\n.icon {\n	width: 1.4em;\n	height: 1.4em;\n	flex-shrink: 0;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nnav button[aria-selected='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.settings-content {\n	min-width: 0;\n	min-height: 0;\n	overflow: auto;\n	overscroll-behavior: contain;\n}\nsection {\n	padding: var(--office-space-5);\n}\nsection h3 {\n	margin: var(--office-space-5) 0 var(--office-space-3);\n	font-size: var(--office-font-size);\n}\nsection h2 + h3 {\n	margin-top: var(--office-space-4);\n}\n[hidden] {\n	display: none !important;\n}\n.description {\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\noffice-ui-switch {\n	--office-switch-track-on: var(--office-teams-brand);\n}\n.preference {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	font-weight: normal;\n}\nh2 {\n	position: sticky;\n	top: 0;\n	z-index: 1;\n	margin: calc(-1 * var(--office-space-5)) calc(-1 * var(--office-space-5)) var(--office-space-4);\n	padding: var(--office-space-5);\n	background: var(--office-popover);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	font-size: var(--office-font-size-lg);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	font-weight: var(--office-font-weight-bold);\n}\nsmall {\n	color: var(--office-teams-text-subtle);\n	font-weight: normal;\n}\ninput,\ntextarea,\nselect {\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\ntextarea {\n	min-height: 5.5em;\n	font-family: ui-monospace, monospace;\n	font-size: 0.9em;\n}\n.issues {\n	margin: 0;\n	padding-inline-start: 1.2em;\n	color: var(--office-danger);\n	font-size: var(--office-font-size-sm);\n}\n.actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton.primary {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\nbutton.primary:hover {\n	background: var(--office-teams-brand-hover);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 48em) {\n	.settings-layout {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: auto minmax(0, 1fr);\n		min-height: 0;\n	}\n	nav {\n		max-height: 30dvh;\n		border-inline-end: 0;\n		border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	}\n}\n";
+var teams_settings_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(76em, 94vw);\n	max-height: 90dvh;\n	overflow: hidden;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\n:host([embedded]) {\n	display: block;\n	height: 100%;\n	min-height: 0;\n}\n:host([embedded]:not([open])) {\n	display: none;\n}\n:host([embedded]) dialog {\n	position: relative;\n	width: 100%;\n	height: 100%;\n	max-width: none;\n	max-height: none;\n	margin: 0;\n	border: 0;\n	border-radius: 0;\n	box-shadow: none;\n}\n:host([embedded]) dialog[open] {\n	display: flex;\n	flex-direction: column;\n}\n:host([embedded]) .settings-layout {\n	flex: 1;\n	height: auto;\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	gap: var(--office-space-3);\n}\nheader input {\n	margin-inline-start: auto;\n	width: min(24em, 50%);\n	min-width: 0;\n}\n.settings-results ul {\n	list-style: none;\n	padding: 0;\n	display: grid;\n	gap: var(--office-space-3);\n}\n.settings-results button {\n	display: grid;\n	gap: var(--office-space-2);\n	width: 100%;\n	text-align: start;\n}\n.settings-results button:hover {\n	background: var(--office-selected);\n}\nh1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.settings-layout {\n	display: grid;\n	grid-template-columns: 19em minmax(0, 1fr);\n	height: min(42em, calc(90dvh - 5em));\n	min-height: 0;\n}\nnav {\n	min-height: 0;\n	overflow-y: auto;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nnav button {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: 3em;\n	text-align: start;\n	border: 0;\n	background: transparent;\n}\nnav button:hover {\n	background: var(--office-selected);\n}\n.icon {\n	width: 1.4em;\n	height: 1.4em;\n	flex-shrink: 0;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nnav button[aria-selected='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.settings-content {\n	min-width: 0;\n	min-height: 0;\n	overflow: auto;\n	overscroll-behavior: contain;\n}\nsection {\n	padding: var(--office-space-5);\n}\nsection h3 {\n	margin: var(--office-space-5) 0 var(--office-space-3);\n	font-size: var(--office-font-size);\n}\nsection h2 + h3 {\n	margin-top: var(--office-space-4);\n}\n[hidden] {\n	display: none !important;\n}\n.description {\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\noffice-ui-switch {\n	--office-switch-track-on: var(--office-teams-brand);\n}\n.preference {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	font-weight: normal;\n}\nh2 {\n	position: sticky;\n	top: 0;\n	z-index: 1;\n	margin: calc(-1 * var(--office-space-5)) calc(-1 * var(--office-space-5)) var(--office-space-4);\n	padding: var(--office-space-5);\n	background: var(--office-popover);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	font-size: var(--office-font-size-lg);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	font-weight: var(--office-font-weight-bold);\n}\nsmall {\n	color: var(--office-teams-text-subtle);\n	font-weight: normal;\n}\ninput,\ntextarea,\nselect {\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\ntextarea {\n	min-height: 5.5em;\n	font-family: ui-monospace, monospace;\n	font-size: 0.9em;\n}\n.issues {\n	margin: 0;\n	padding-inline-start: 1.2em;\n	color: var(--office-danger);\n	font-size: var(--office-font-size-sm);\n}\n.actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton.primary {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\nbutton.primary:hover {\n	background: var(--office-teams-brand-hover);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 48em) {\n	.settings-layout {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: auto minmax(0, 1fr);\n		min-height: 0;\n	}\n	nav {\n		max-height: 30dvh;\n		border-inline-end: 0;\n		border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	}\n}\n\n.notification-level {\n	display: grid;\n	gap: var(--office-space-2);\n	margin: var(--office-space-3) 0 0;\n	padding: 0;\n	border: 0;\n}\n.notification-level legend {\n	margin-bottom: var(--office-space-2);\n	padding: 0;\n	font-weight: var(--office-font-weight-bold);\n}\n.notification-choice {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	cursor: pointer;\n	font-weight: normal;\n}\n.notification-choice:has(input:checked) {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n}\n.notification-choice input {\n	margin-block-start: var(--office-space-1);\n	accent-color: var(--office-teams-brand);\n}\n.notification-choice span {\n	display: grid;\n	gap: var(--office-space-1);\n}\n.notification-choice small {\n	color: var(--office-teams-text-subtle);\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/settings-previews.css?raw
 var settings_previews_default = ".theme-options,\n.density-options {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-3);\n}\n.theme-options button {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2);\n	text-align: start;\n	min-width: 9em;\n}\n.theme-options button[aria-pressed='true'],\n.density-choice:has(input:checked) {\n	border-color: var(--office-teams-brand);\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-teams-brand);\n}\n.theme-swatch {\n	--preview-paper: var(--office-call-foreground);\n	--preview-ink: var(--office-call-background);\n	display: grid;\n	grid-template-columns: 0.7em 2.4em 1fr;\n	grid-template-rows: 0.7em 1fr;\n	width: 9em;\n	height: 5.5em;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius);\n	overflow: hidden;\n	background: var(--preview-paper);\n}\n.theme-swatch[data-theme='dark'] {\n	--preview-paper: var(--office-call-background);\n	--preview-ink: var(--office-call-foreground);\n}\n.theme-swatch[data-theme='system'] {\n	background: linear-gradient(\n		90deg,\n		var(--office-call-foreground) 50%,\n		var(--office-call-background) 50%\n	);\n}\n.preview-toolbar {\n	grid-column: 1 / -1;\n	background: var(--office-teams-brand);\n}\n.preview-rail,\n.preview-sidebar {\n	background: color-mix(in srgb, var(--preview-ink) 8%, var(--preview-paper));\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.preview-sidebar,\n.preview-conversation {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2);\n}\n.preview-sidebar i,\n.preview-conversation i {\n	height: 0.4em;\n	border-radius: var(--office-radius);\n	background: color-mix(in srgb, var(--preview-ink) 25%, var(--preview-paper));\n}\n.preview-conversation i {\n	height: 0.8em;\n	width: 80%;\n}\n.preview-conversation i:nth-child(2) {\n	align-self: flex-end;\n	background: var(--office-teams-brand-subtle);\n}\n.density-options {\n	margin: var(--office-space-5) 0 0;\n	padding: var(--office-space-5) 0 0;\n	border: 0;\n	border-top: var(--office-border-width) solid var(--office-teams-divider);\n}\n.density-options legend {\n	float: inline-start;\n	width: 100%;\n	font-weight: var(--office-font-weight-bold);\n	margin-bottom: var(--office-space-3);\n}\n.density-choice {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-3);\n	width: 13em;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	cursor: pointer;\n	font-weight: normal;\n}\n.density-choice input {\n	position: absolute;\n	inset-inline-end: var(--office-space-2);\n	inset-block-end: var(--office-space-2);\n	accent-color: var(--office-teams-brand);\n}\n.density-caption {\n	display: grid;\n	gap: var(--office-space-1);\n	padding-inline-end: var(--office-space-5);\n}\n.density-preview {\n	display: flex;\n	flex-direction: column;\n	justify-content: center;\n	gap: var(--office-space-3);\n	height: 7em;\n	padding: var(--office-space-3);\n	border-radius: var(--office-radius);\n	background: var(--office-teams-panel);\n}\n.preview-message {\n	display: flex;\n	gap: var(--office-space-2);\n	align-items: flex-start;\n}\n.preview-message > i {\n	width: 1.1em;\n	height: 1.1em;\n	border-radius: 50%;\n	background: var(--office-teams-brand-subtle);\n	border: var(--office-border-width) solid var(--office-teams-brand);\n}\n.preview-message > span {\n	display: grid;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n.preview-message b {\n	height: 0.3em;\n	width: 75%;\n	background: var(--office-teams-text-subtle);\n	border-radius: var(--office-radius);\n}\n.preview-message b + b {\n	width: 100%;\n	opacity: 0.4;\n}\n.density-preview[data-density='compact'] {\n	gap: var(--office-space-1);\n}\n.density-preview[data-density='compact'] .preview-message > i {\n	width: 0.7em;\n	height: 0.7em;\n}\n.density-preview[data-density='compact'] .preview-message > span {\n	display: flex;\n	align-items: center;\n}\n@media (forced-colors: active) {\n	.theme-options button[aria-pressed='true'],\n	.density-choice:has(input:checked) {\n		outline: var(--office-focus-width) solid Highlight;\n	}\n}\n";
@@ -2023,6 +2857,53 @@ function densityChoices(density, change) {
   )}
 	</fieldset>`;
 }
+var LEVELS = [
+  ["all", "All activity", "Mentions, replies, reactions and pinned messages"],
+  ["mentions", "Mentions only", "Only when someone mentions you"],
+  ["off", "Off", "Activity still collects in the Activity feed"]
+];
+var PERMISSION_TEXT = {
+  granted: "Desktop notifications are on for this browser. They appear when this tab is in the background.",
+  default: "Desktop notifications appear when this tab is in the background. Your browser asks first.",
+  denied: "Desktop notifications are blocked for this site. Allow them in your browser settings to turn them on.",
+  unsupported: "This browser does not support desktop notifications."
+};
+var desktopPermission = () => globalThis.Notification?.permission ?? "unsupported";
+function notificationChoices(settings, permission, handlers) {
+  return html`<fieldset class="notification-level">
+			<legend>Notify me about</legend>
+			${LEVELS.map(
+    ([level, label, description]) => html`<label class="notification-choice">
+						<input
+							type="radio"
+							name="notification-level"
+							value=${level}
+							.checked=${settings.level === level}
+							@change=${() => handlers.change({ level })}
+						/>
+						<span><strong>${label}</strong><small>${description}</small></span>
+					</label>`
+  )}
+		</fieldset>
+		<h3>Sound</h3>
+		<label class="preference"
+			><span>Play a sound for new notifications</span
+			><office-ui-switch
+				aria-label="Notification sound"
+				.checked=${settings.sound}
+				@change=${(event) => handlers.change({ sound: event.target.checked })}
+			></office-ui-switch
+		></label>
+		<h3>Desktop notifications</h3>
+		<p class="description" role="status">${PERMISSION_TEXT[permission]}</p>
+		${permission === "default" ? html`<button type="button" class="primary" @click=${handlers.requestPermission}>
+						Enable desktop notifications
+					</button>` : ""}
+		<p class="description">
+			Do not disturb silences every notification. Email and mobile push notifications are not
+			available.
+		</p>`;
+}
 var SETTINGS_CATEGORIES = [
   ["general", "General"],
   ["appearance", "Appearance and accessibility"],
@@ -2047,6 +2928,21 @@ var TOPICS = [
     title: "Show app names",
     description: "Display labels beneath app bar icons"
   },
+  {
+    category: "notifications",
+    title: "Activity notifications",
+    description: "Notify for all activity, mentions only or nothing"
+  },
+  {
+    category: "notifications",
+    title: "Sound",
+    description: "Play a sound for new notifications"
+  },
+  {
+    category: "notifications",
+    title: "Desktop notifications",
+    description: "Browser notifications while this tab is in the background, and Do not disturb"
+  },
   {
     category: "notifications",
     title: "Followed threads",
@@ -2100,6 +2996,7 @@ var TeamsSettings = class extends LitElement {
     category: { state: true },
     theme: { attribute: false },
     followSettings: { attribute: false },
+    notificationSettings: { attribute: false },
     userName: { attribute: false },
     fileOpenPreference: { attribute: false },
     chatDensity: { attribute: false },
@@ -2115,6 +3012,7 @@ var TeamsSettings = class extends LitElement {
     this.category = "general";
     this.theme = "system";
     this.followSettings = { started: true, replied: true };
+    this.notificationSettings = { level: "all", sound: true };
     this.userName = "";
     this.fileOpenPreference = "teams";
     this.chatDensity = "comfy";
@@ -2304,12 +3202,22 @@ var TeamsSettings = class extends LitElement {
 							?hidden=${!!this.query.trim() || this.category !== "notifications"}
 						>
 							<h2>Notifications and activity</h2>
+							<h3>Activity notifications</h3>
+							${notificationChoices(this.notificationSettings, desktopPermission(), {
+      change: (detail) => this.dispatchEvent(
+        new CustomEvent("teams-settings-notifications", {
+          detail,
+          bubbles: true,
+          composed: true
+        })
+      ),
+      requestPermission: () => void globalThis.Notification?.requestPermission().then(
+        () => this.requestUpdate()
+      )
+    })}
 							<h3>Followed threads</h3>
 							<p class="description">Choose which conversations appear in Followed threads.</p>
 							${["started", "replied"].map((key) => html`<label class="preference"><span>${key === "started" ? "Threads I start" : "Threads I reply to"}</span><office-ui-switch aria-label=${key === "started" ? "Threads I start" : "Threads I reply to"} .checked=${this.followSettings[key]} @change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-follow", { detail: { [key]: event.target.checked }, bubbles: true, composed: true }))}></office-ui-switch></label>`)}
-							<p class="description">
-								Desktop, email and activity notifications are not available yet.
-							</p>
 						</section>
 						<section
 							id="panel-files"
@@ -2464,8 +3372,8 @@ function loadConfig() {
 var saveConfig = (config) => safeStorage.setItem("teams:config", JSON.stringify(config));
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-app.css?raw
-var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n.channel-head > .back {\n	display: none;\n}\n\n/* ---- compact shell ---------------------------------------------------------------------- */\n/* Below 56em the app rail is a bottom bar, the channel list is its own full-screen view and the\n   conversation (or any other content) fills the width with a back button to the list. */\n@media (max-width: 56em) {\n	.brand {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: minmax(0, 1fr) auto;\n		gap: var(--office-space-2);\n	}\n	.search {\n		width: 100%;\n	}\n	.channel-head {\n		gap: var(--office-space-2);\n		padding-inline: var(--office-space-3);\n	}\n	.channel-head > .back {\n		display: inline-flex;\n		border-color: transparent;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n		order: 1;\n	}\n	.body {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: minmax(0, 1fr) auto;\n	}\n	.body > office-ui-app-rail {\n		grid-column: 1;\n		grid-row: 2;\n	}\n	.body > .side,\n	.body > .main,\n	.body > teams-settings {\n		grid-column: 1;\n		grid-row: 1;\n	}\n	.side {\n		border-inline-end: 0;\n	}\n	.shell[data-mobile-view='list'] .main,\n	.shell[data-mobile-view='content'] .side {\n		display: none;\n	}\n}\n/* Phone landscape has little height: keep the chrome to one thin row each. */\n@media (max-width: 56em) and (max-height: 30em) {\n	.topbar {\n		padding-block: var(--office-space-1);\n	}\n	.channel-head {\n		flex-wrap: nowrap;\n		padding-block: var(--office-space-1);\n	}\n	.channel-head .tabs {\n		flex: 1 1 0;\n		order: 0;\n	}\n	.channel-head h1 {\n		font-size: var(--office-font-size);\n	}\n}\n/* Touch: every control in the shell reaches the minimum hit target. */\n@media (pointer: coarse) {\n	.channel-head > button,\n	.meet,\n	.tabs button,\n	.join,\n	.thread-head button,\n	.callbar button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* An application host can own the single suite-level account control. */\n:host([host-profile]) teams-profile-menu {\n	display: none;\n}\n";
-function threadPane(state, client, openFile, close) {
+var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n.channel-head > .back {\n	display: none;\n}\n\n/* ---- compact shell ---------------------------------------------------------------------- */\n/* Below 56em the app rail is a bottom bar, the channel list is its own full-screen view and the\n   conversation (or any other content) fills the width with a back button to the list. */\n@media (max-width: 56em) {\n	.brand {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: minmax(0, 1fr) auto;\n		gap: var(--office-space-2);\n	}\n	.search {\n		width: 100%;\n	}\n	.channel-head {\n		gap: var(--office-space-2);\n		padding-inline: var(--office-space-3);\n	}\n	.channel-head > .back {\n		display: inline-flex;\n		border-color: transparent;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n		order: 1;\n	}\n	.body {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: minmax(0, 1fr) auto;\n	}\n	.body > office-ui-app-rail {\n		grid-column: 1;\n		grid-row: 2;\n	}\n	.body > .side,\n	.body > .main,\n	.body > teams-settings {\n		grid-column: 1;\n		grid-row: 1;\n	}\n	.side {\n		border-inline-end: 0;\n	}\n	.shell[data-mobile-view='list'] .main,\n	.shell[data-mobile-view='content'] .side {\n		display: none;\n	}\n}\n/* Phone landscape has little height: keep the chrome to one thin row each. */\n@media (max-width: 56em) and (max-height: 30em) {\n	.topbar {\n		padding-block: var(--office-space-1);\n	}\n	.channel-head {\n		flex-wrap: nowrap;\n		padding-block: var(--office-space-1);\n	}\n	.channel-head .tabs {\n		flex: 1 1 0;\n		order: 0;\n	}\n	.channel-head h1 {\n		font-size: var(--office-font-size);\n	}\n}\n/* Touch: every control in the shell reaches the minimum hit target. */\n@media (pointer: coarse) {\n	.channel-head > button,\n	.meet,\n	.tabs button,\n	.join,\n	.thread-head button,\n	.callbar button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* An application host can own the single suite-level account control. */\n:host([host-profile]) teams-profile-menu {\n	display: none;\n}\n\n/* ---- activity ---------------------------------------------------------------------------- */\n.side > office-ui-activity-feed {\n	height: 100%;\n}\n/* Toasts for new activity stack at the top right, under the header, so they never cover the\n   compose box; on phones they are full-width banners below the header. */\n.activity-toasts {\n	position: fixed;\n	inset-block-start: 8em;\n	inset-inline-end: var(--office-space-4);\n	z-index: 10;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n	width: min(28em, calc(100% - var(--office-space-5)));\n	pointer-events: none;\n}\n.activity-toast {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n	box-shadow: var(--office-shadow-teams);\n	pointer-events: auto;\n}\n@media (max-width: 40em) {\n	.activity-toasts {\n		inset-block-start: 4.6em;\n		inset-inline: var(--office-space-2);\n		width: auto;\n	}\n}\n.activity-toast .toast-text {\n	display: flex;\n	flex: 1;\n	flex-direction: column;\n	min-width: 0;\n}\n.activity-toast .toast-text > * {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.activity-toast .toast-preview {\n	opacity: 0.8;\n	font-size: var(--office-font-size-sm);\n}\n.activity-toast button {\n	flex: none;\n	padding: var(--office-space-1) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font-weight: var(--office-font-weight-bold);\n}\n.activity-toast button:hover {\n	background: var(--office-selected);\n}\n.activity-toast button svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n@media (pointer: coarse) {\n	.activity-toast button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* ---- chat and calendar ------------------------------------------------------------------ */\n.calendar-back svg,\n.show-calendar svg,\n.group-mark svg,\n.chat-head .chat-people svg {\n	width: 1.25em;\n	height: 1.25em;\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.chat-head office-ui-avatar {\n	flex: none;\n}\n.group-mark {\n	display: grid;\n	flex: none;\n	place-items: center;\n	width: 2.3em;\n	height: 2.3em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-bubble);\n	color: var(--office-teams-brand);\n}\n.chat-head .chat-people {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.empty-main {\n	display: grid;\n	flex: 1;\n	place-content: center;\n	justify-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-6);\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n.empty-main button {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font: inherit;\n}\n.main > office-ui-calendar-view {\n	flex: 1;\n	min-height: 0;\n}\n.calendar-back {\n	display: none;\n}\n@media (max-width: 56em) {\n	.calendar-back {\n		display: flex;\n		align-items: center;\n		gap: var(--office-space-2);\n		padding: var(--office-space-2) var(--office-space-3);\n		border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	}\n	.calendar-back button {\n		display: inline-flex;\n		align-items: center;\n		gap: var(--office-space-2);\n		min-height: var(--office-touch-target, 44px);\n		padding: var(--office-space-2) var(--office-space-3);\n		border: 0;\n		border-radius: var(--office-radius-md);\n		background: transparent;\n	}\n	.chat-head .chat-people {\n		min-width: var(--office-touch-target, 44px);\n	}\n}\n.show-calendar {\n	display: none;\n}\n@media (max-width: 56em) {\n	.show-calendar {\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		gap: var(--office-space-2);\n		width: calc(100% - 2 * var(--office-space-4));\n		min-height: var(--office-touch-target, 44px);\n		margin: var(--office-space-3) var(--office-space-4);\n		border: var(--office-border-width) solid var(--office-teams-divider);\n		border-radius: var(--office-radius-md);\n		background: var(--office-background);\n	}\n}\n";
+function threadPane(state, client, openFile, close, highlightId = "") {
   const thread = state.thread;
   if (!thread) return nothing;
   return html`<aside class="thread-pane" aria-label="Thread">
@@ -2483,6 +3391,7 @@ function threadPane(state, client, openFile, close) {
 			.messages=${[thread.root, ...thread.replies]}
 			.pinnedIds=${state.pinned.map((p) => p.message.id)}
 			self-id=${state.user.id}
+			.highlightId=${highlightId}
 			@office-chat-pin=${(e) => client.pinMessage(e.detail.messageId)}
 			@office-chat-unpin=${(e) => client.unpinMessage(e.detail.messageId)}
 			@office-chat-react=${(e) => client.toggleReaction(e.detail.messageId, e.detail.emoji)}
@@ -2498,6 +3407,7 @@ function threadPane(state, client, openFile, close) {
 			.value=${state.draft.text}
 			.files=${state.draft.files}
 			.missingFiles=${state.draft.missingFiles}
+			.mentionTargets=${state.mentionTargets}
 			@office-chat-draft=${(e) => client.setDraft(e.detail)}
 			placeholder="Reply in thread"
 			@office-chat-typing=${() => client.notifyTyping()}
@@ -2514,7 +3424,10 @@ function followedThreads(state, client, open, unreadOnly, filter) {
   const threads = state.followedThreads.filter((thread) => !unreadOnly || thread.unread > 0);
   return html`<section class="followed-threads" aria-label="Followed threads">
 		<h1>Followed threads</h1>
-		<p>Threads you follow on this device. Notifications are not enabled.</p>
+		<p>
+			Threads you follow on this device. Their replies appear in Activity and notify you according
+			to your notification settings.
+		</p>
 		<fieldset>
 			<legend>Automatically follow</legend>
 			<label
@@ -2946,6 +3859,60 @@ function watchActivity(target, onActivity, throttleMs = 1e3, now = Date.now) {
     for (const name of ACTIVITY_EVENTS) target.removeEventListener(name, handler);
   };
 }
+function deliverNotification(item, settings, env, actions) {
+  let result = "none";
+  if (!env.hidden()) {
+    actions.toast(item);
+    result = "toast";
+  } else if (env.permission() === "granted") {
+    env.show(
+      describeActivity(item),
+      { body: item.preview, tag: item.id },
+      () => actions.open(item)
+    );
+    result = "desktop";
+  }
+  if (result !== "none" && settings.sound) env.beep();
+  return result;
+}
+function chime() {
+  try {
+    const Context = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+    if (!Context) return;
+    const audio = new Context();
+    const gain = audio.createGain();
+    gain.gain.setValueAtTime(0.06, audio.currentTime);
+    gain.gain.exponentialRampToValueAtTime(1e-4, audio.currentTime + 0.35);
+    gain.connect(audio.destination);
+    [660, 880].forEach((frequency, index) => {
+      const tone = audio.createOscillator();
+      tone.frequency.value = frequency;
+      tone.connect(gain);
+      tone.start(audio.currentTime + index * 0.12);
+      tone.stop(audio.currentTime + index * 0.12 + 0.12);
+    });
+    globalThis.setTimeout(() => void audio.close(), 700);
+  } catch {
+  }
+}
+function browserDeliveryEnv() {
+  return {
+    hidden: () => globalThis.document?.visibilityState === "hidden",
+    permission: () => globalThis.Notification?.permission ?? "unsupported",
+    show(title, options, onClick) {
+      try {
+        const notification = new globalThis.Notification(title, options);
+        notification.onclick = () => {
+          globalThis.focus();
+          notification.close();
+          onClick();
+        };
+      } catch {
+      }
+    },
+    beep: chime
+  };
+}
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/add-tab-dialog.css?raw
 var add_tab_dialog_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(54em, 94vw);\n	max-height: 90vh;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	color: inherit;\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\nheader,\n.app-heading,\nfooter {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\nheader {\n	justify-content: space-between;\n	padding: var(--office-space-4) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\nh1,\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nsection,\nform {\n	padding: var(--office-space-5);\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n}\n.apps {\n	display: grid;\n	grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));\n	gap: var(--office-space-3);\n}\nbutton,\ninput {\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	padding: var(--office-space-2) var(--office-space-3);\n}\nbutton {\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.app {\n	display: grid;\n	justify-items: start;\n	text-align: start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-4);\n}\n.app-heading h2 {\n	flex: 1;\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.6em;\n	height: 2.6em;\n	border-radius: var(--office-radius-md);\n	color: var(--office-call-foreground);\n	background: var(--office-file-other);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n}\ninput {\n	min-width: 0;\n}\nsmall,\n.hint,\nsection > p {\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\nsmall {\n	display: block;\n}\n.files {\n	margin: 0;\n	padding: var(--office-space-2);\n	max-height: 18em;\n	overflow: auto;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius);\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	border-radius: var(--office-radius);\n	cursor: pointer;\n}\n.file:has(input:checked) {\n	background: var(--office-teams-brand-subtle);\n}\n.file strong {\n	overflow-wrap: anywhere;\n}\n[role='alert'] {\n	color: var(--office-danger);\n}\nfooter {\n	justify-content: flex-end;\n}\n.post-choice {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\nbutton.primary {\n	color: var(--office-teams-brand-foreground);\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand);\n}\nbutton.primary:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
@@ -3297,17 +4264,724 @@ function defineTeamsCreateChannelDialog(registry = globalThis.customElements) {
     registry.define("teams-create-channel-dialog", TeamsCreateChannelDialog);
 }
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/form-dialog.css?raw
+var form_dialog_default = "/* The frame shared by the Chat and Calendar dialogs: a modal <dialog> with a header, a form and a\n   footer, in the same look as the create-channel dialog. */\n:host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(40em, 94vw);\n	max-height: 90dvh;\n	padding: 0;\n	overflow: auto;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\ndialog > header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nform,\n.body {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nlabel,\n.field {\n	display: grid;\n	gap: var(--office-space-2);\n	font-weight: var(--office-font-weight-bold);\n}\ninput:not([type='checkbox']),\ntextarea,\nselect {\n	min-width: 0;\n	width: 100%;\n	box-sizing: border-box;\n	padding: var(--office-space-3);\n	font: inherit;\n	font-weight: normal;\n	color: inherit;\n	background: var(--office-field-background);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius-md);\n}\ntextarea {\n	min-height: 6em;\n	resize: vertical;\n}\np,\nsmall {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\n.issue {\n	color: var(--office-danger);\n}\nfooter {\n	display: flex;\n	flex-wrap: wrap;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton.primary {\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	border-color: transparent;\n}\nbutton.primary:hover {\n	background: var(--office-teams-brand-hover);\n}\nbutton.danger {\n	color: var(--office-danger);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 40em) {\n	/* Full screen on a phone: the dialog is a page, not a floating card. */\n	dialog {\n		width: 100vw;\n		max-width: 100vw;\n		height: 100dvh;\n		max-height: 100dvh;\n		border-radius: 0;\n	}\n	button,\n	input:not([type='checkbox']),\n	select {\n		min-height: 2.75em;\n	}\n}\n";
+
+// src/teams/app/dialog-base.ts
+var dialogStyles = (own = "") => withStyles(`${form_dialog_default}
+${own}`);
+var TeamsDialog = class extends TeamsElement {
+  static properties = {
+    open: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.open = false;
+  }
+  updated() {
+    const dialog = this.renderRoot.querySelector("dialog");
+    if (!dialog) return;
+    if (this.open && !dialog.open) dialog.showModal();
+    else if (!this.open && dialog.open) dialog.close();
+  }
+  requestClose() {
+    this.fire("teams-dialog-close", {});
+  }
+  /** The dialog frame with a title and a close button around `body`. */
+  frame(title, body, closeLabel = `Close ${title.toLowerCase()}`) {
+    return html`<dialog
+			aria-labelledby="title"
+			@cancel=${(event) => {
+      event.preventDefault();
+      this.requestClose();
+    }}
+		>
+			<header>
+				<h2 id="title">${title}</h2>
+				<button type="button" aria-label=${closeLabel} @click=${this.requestClose}>×</button>
+			</header>
+			${body}
+		</dialog>`;
+  }
+};
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/new-chat-dialog.css?raw
+var new_chat_dialog_default = "office-ui-people-picker {\n	font-weight: normal;\n}\n";
+
+// src/teams/app/new-chat-dialog.ts
+var TeamsNewChatDialog = class extends TeamsDialog {
+  static styles = dialogStyles(new_chat_dialog_default);
+  static properties = {
+    ...TeamsDialog.properties,
+    contacts: { attribute: false },
+    create: { attribute: false },
+    selected: { state: true },
+    name: { state: true },
+    issue: { state: true }
+  };
+  constructor() {
+    super();
+    this.contacts = [];
+    this.create = void 0;
+    this.selected = [];
+    this.name = "";
+    this.issue = "";
+  }
+  willUpdate(changed) {
+    if (changed.has("open") && this.open) {
+      this.selected = [];
+      this.name = "";
+      this.issue = "";
+    }
+  }
+  submit(event) {
+    event.preventDefault();
+    if (this.selected.length === 0) {
+      this.issue = "Pick at least one person.";
+      return;
+    }
+    if (!this.create?.(this.selected, this.selected.length > 1 ? this.name : ""))
+      this.issue = "The chat could not be started.";
+  }
+  render() {
+    const group = this.selected.length > 1;
+    return this.frame(
+      "New chat",
+      html`<form @submit=${this.submit}>
+				<div class="field">
+					To
+					<office-ui-people-picker
+						label="People to chat with"
+						.contacts=${this.contacts}
+						.selected=${this.selected}
+						@office-people-change=${(e) => {
+        this.selected = e.detail.selected.slice(0, MAX_CHAT_MEMBERS - 1);
+        this.issue = "";
+      }}
+					></office-ui-people-picker>
+				</div>
+				${group ? html`<label
+								>Group name (optional)<input
+									maxlength=${MAX_CHANNEL_NAME_CHARS}
+									.value=${this.name}
+									placeholder="Name this group chat"
+									@input=${(e) => this.name = e.target.value}
+							/></label>` : nothing}
+				<small
+					>${group ? "Everyone you pick joins one group chat. Only its members can read it." : "Pick one person for a 1:1 chat, or several for a group chat."}</small
+				>
+				${this.issue ? html`<p class="issue" role="alert">${this.issue}</p>` : nothing}
+				<footer>
+					<button type="button" @click=${this.requestClose}>Cancel</button>
+					<button type="submit" class="primary" ?disabled=${this.selected.length === 0}>
+						${group ? "Start group chat" : "Start chat"}
+					</button>
+				</footer>
+			</form>`
+    );
+  }
+};
+function defineTeamsNewChatDialog(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-new-chat-dialog"))
+    registry.define("teams-new-chat-dialog", TeamsNewChatDialog);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/chat-people-dialog.css?raw
+var chat_people_dialog_default = "h3 {\n	margin: var(--office-space-2) 0 0;\n	font-size: var(--office-font-size);\n}\n.rename {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	align-items: end;\n	gap: var(--office-space-2);\n	padding: 0;\n}\n.members {\n	display: grid;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.members li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-1) 0;\n}\n.name {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\noffice-ui-people-picker {\n	font-weight: normal;\n}\n";
+
+// src/teams/app/chat-people-dialog.ts
+var TeamsChatPeopleDialog = class extends TeamsDialog {
+  static styles = dialogStyles(chat_people_dialog_default);
+  static properties = {
+    ...TeamsDialog.properties,
+    chat: { attribute: false },
+    contacts: { attribute: false },
+    name: { state: true },
+    adding: { state: true }
+  };
+  constructor() {
+    super();
+    this.chat = null;
+    this.contacts = [];
+    this.name = "";
+    this.adding = [];
+  }
+  willUpdate(changed) {
+    if (changed.has("open") && this.open) {
+      this.name = this.chat?.name ?? "";
+      this.adding = [];
+    }
+  }
+  render() {
+    const chat = this.chat;
+    if (!chat) return this.frame("People", html``);
+    const group = chat.kind === "group";
+    return this.frame(
+      "People",
+      html`<div class="body">
+				${group ? html`<form
+								class="rename"
+								@submit=${(e) => {
+        e.preventDefault();
+        this.fire("teams-chat-rename", { id: chat.id, name: this.name });
+      }}
+							>
+								<label
+									>Group name<input
+										maxlength=${MAX_CHANNEL_NAME_CHARS}
+										.value=${this.name}
+										placeholder="Name this group chat"
+										@input=${(e) => this.name = e.target.value}
+								/></label>
+								<button type="submit">Rename</button>
+							</form>` : nothing}
+				<h3>In this chat (${chat.members.length})</h3>
+				<ul class="members">
+					${chat.members.map(
+        (m) => html`<li>
+								<office-ui-avatar
+									size="sm"
+									name=${m.name}
+									seed=${m.id}
+									presence=${m.availability}
+								></office-ui-avatar>
+								<span class="name">${m.name}${m.self ? " (you)" : ""}</span>
+								${group && !m.self && chat.members.length > 1 ? html`<button
+												type="button"
+												aria-label=${`Remove ${m.name}`}
+												@click=${() => this.fire("teams-chat-remove", { id: chat.id, userId: m.id })}
+											>
+												Remove
+											</button>` : nothing}
+							</li>`
+      )}
+				</ul>
+				${group ? html`<h3>Add people</h3>
+								<office-ui-people-picker
+									label="People to add"
+									.contacts=${this.contacts}
+									.exclude=${chat.members.map((m) => m.id)}
+									.selected=${this.adding}
+									@office-people-change=${(e) => this.adding = e.detail.selected}
+								></office-ui-people-picker>
+								<footer>
+									<button
+										type="button"
+										class="primary"
+										?disabled=${this.adding.length === 0}
+										@click=${() => {
+        this.fire("teams-chat-add", { id: chat.id, userIds: this.adding });
+        this.adding = [];
+      }}
+									>
+										Add to chat
+									</button>
+								</footer>` : html`<p>
+								People cannot be added to or removed from a 1:1 chat. Start a group chat instead.
+							</p>`}
+				<footer>
+					${chat.canLeave ? html`<button
+									type="button"
+									class="danger"
+									@click=${() => this.fire("teams-chat-leave", { id: chat.id })}
+								>
+									Leave chat
+								</button>` : nothing}
+					<button type="button" @click=${this.requestClose}>Done</button>
+				</footer>
+			</div>`
+    );
+  }
+};
+function defineTeamsChatPeopleDialog(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-chat-people-dialog"))
+    registry.define("teams-chat-people-dialog", TeamsChatPeopleDialog);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/meeting-dialog.css?raw
+var meeting_dialog_default = ".times {\n	display: grid;\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n	gap: var(--office-space-3);\n}\noffice-ui-people-picker {\n	font-weight: normal;\n}\n@media (max-width: 40em) {\n	.times {\n		grid-template-columns: minmax(0, 1fr);\n	}\n}\n";
+
+// src/teams/app/meeting-dialog.ts
+var SLOT = 30 * MINUTE_MS;
+var NOT_SAVED = "The meeting was not saved. Your details are kept here.";
+function toLocalInput(ms) {
+  const d = new Date(ms);
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+var TeamsMeetingDialog = class extends TeamsDialog {
+  static styles = dialogStyles(meeting_dialog_default);
+  static properties = {
+    ...TeamsDialog.properties,
+    meeting: { attribute: false },
+    start: { type: Number },
+    occurrence: { type: Number },
+    contacts: { attribute: false },
+    channels: { attribute: false },
+    save: { attribute: false },
+    meetingTitle: { state: true },
+    description: { state: true },
+    startText: { state: true },
+    endText: { state: true },
+    repeat: { state: true },
+    endMode: { state: true },
+    untilText: { state: true },
+    countText: { state: true },
+    channelId: { state: true },
+    attendees: { state: true },
+    issue: { state: true }
+  };
+  constructor() {
+    super();
+    this.meeting = null;
+    this.start = 0;
+    this.occurrence = 0;
+    this.contacts = [];
+    this.channels = [];
+    this.save = void 0;
+    this.meetingTitle = "";
+    this.description = "";
+    this.startText = "";
+    this.endText = "";
+    this.repeat = "none";
+    this.endMode = "never";
+    this.untilText = "";
+    this.countText = "10";
+    this.channelId = "";
+    this.attendees = [];
+    this.issue = "";
+  }
+  willUpdate(changed) {
+    if (!changed.has("open") || !this.open) return;
+    const m = this.meeting;
+    const one = m && this.occurrence ? occurrenceAt(m, this.start || m.start) : null;
+    const begin = one?.start ?? m?.start ?? (this.start || Math.ceil(Date.now() / SLOT) * SLOT);
+    this.meetingTitle = one?.title ?? m?.title ?? "";
+    this.description = one?.description ?? m?.description ?? "";
+    this.startText = toLocalInput(begin);
+    this.endText = toLocalInput(one?.end ?? m?.end ?? begin + SLOT);
+    this.repeat = m?.repeat ?? "none";
+    this.endMode = m?.count !== void 0 ? "count" : m?.until !== void 0 ? "date" : "never";
+    this.countText = String(m?.count ?? 10);
+    this.untilText = toLocalInput(m?.until ?? begin + 28 * 864e5).slice(0, 10);
+    this.channelId = m?.channelId ?? "";
+    this.attendees = m?.attendees.map((a) => a.id) ?? [];
+    this.issue = "";
+  }
+  moveStart(value) {
+    const before = new Date(this.startText).getTime();
+    const after = new Date(value).getTime();
+    const end = new Date(this.endText).getTime();
+    this.startText = value;
+    if (Number.isFinite(before) && Number.isFinite(after) && Number.isFinite(end))
+      this.endText = toLocalInput(end + (after - before));
+    this.issue = "";
+  }
+  validCount() {
+    const n = Number(this.countText);
+    return Number.isInteger(n) && n >= 1 && n <= MAX_RECURRENCE_COUNT;
+  }
+  untilTime() {
+    return (/* @__PURE__ */ new Date(`${this.untilText}T23:59:59.999`)).getTime();
+  }
+  validUntil(start) {
+    const until = this.untilTime();
+    return Number.isFinite(until) && until >= start;
+  }
+  /** The end of the repeat to store: a count, the end of a day, or none (null clears an old end). */
+  recurrenceEnd() {
+    if (this.repeat === "none" || this.endMode === "never") return { count: null, until: null };
+    return this.endMode === "count" ? { count: Number(this.countText), until: null } : { count: null, until: this.untilTime() };
+  }
+  submit(event) {
+    event.preventDefault();
+    const start = new Date(this.startText).getTime();
+    const end = new Date(this.endText).getTime();
+    if (!this.meetingTitle.trim()) this.issue = "Add a title.";
+    else if (!Number.isFinite(start) || !Number.isFinite(end)) this.issue = "Pick a start and end.";
+    else if (end <= start) this.issue = "The meeting must end after it starts.";
+    else if (end - start > 24 * 60 * MINUTE_MS) this.issue = "A meeting can last at most 24 hours.";
+    else if (this.occurrence) {
+      const one = { title: this.meetingTitle, description: this.description, start, end };
+      if (!this.save?.(one, this.meeting?.id, this.occurrence)) this.issue = NOT_SAVED;
+    } else if (this.repeat !== "none" && this.endMode === "count" && !this.validCount())
+      this.issue = `Enter a number of events from 1 to ${MAX_RECURRENCE_COUNT}.`;
+    else if (this.repeat !== "none" && this.endMode === "date" && !this.validUntil(start))
+      this.issue = "The series must end on or after its first event.";
+    else if (!this.save?.(
+      {
+        title: this.meetingTitle,
+        description: this.description,
+        start,
+        end,
+        repeat: this.repeat,
+        ...this.recurrenceEnd(),
+        attendeeIds: this.channelId ? [] : this.attendees,
+        ...this.channelId ? { channelId: this.channelId } : {}
+      },
+      this.meeting?.id
+    ))
+      this.issue = NOT_SAVED;
+  }
+  render() {
+    const editing = this.meeting !== null;
+    const single = this.occurrence !== 0;
+    return this.frame(
+      single ? "Edit this event" : editing ? "Edit meeting" : "New meeting",
+      html`<form @submit=${this.submit}>
+				<label
+					>Title<input
+						maxlength=${MAX_MEETING_TITLE}
+						.value=${this.meetingTitle}
+						placeholder="Add a title"
+						@input=${(e) => {
+        this.meetingTitle = e.target.value;
+        this.issue = "";
+      }}
+				/></label>
+				<div class="times">
+					<label
+						>Start<input
+							type="datetime-local"
+							.value=${this.startText}
+							@change=${(e) => this.moveStart(e.target.value)}
+					/></label>
+					<label
+						>End<input
+							type="datetime-local"
+							.value=${this.endText}
+							@change=${(e) => {
+        this.endText = e.target.value;
+        this.issue = "";
+      }}
+					/></label>
+				</div>
+				${single ? html`<small>Only this event changes. The rest of the series stays as it is.</small>` : html`
+								<label
+									>Repeat<select
+										.value=${this.repeat}
+										@change=${(e) => this.repeat = e.target.value}
+									>
+										<option value="none">Does not repeat</option>
+										<option value="daily">Every day</option>
+										<option value="weekly">Every week</option>
+									</select></label
+								>
+								${this.repeat === "none" ? nothing : html`<label
+													>Ends<select
+														.value=${this.endMode}
+														@change=${(e) => this.endMode = e.target.value}
+													>
+														<option value="never">Never</option>
+														<option value="date">On a date</option>
+														<option value="count">After a number of events</option>
+													</select></label
+												>
+												${this.endMode === "date" ? html`<label
+																>End date<input
+																	type="date"
+																	.value=${this.untilText}
+																	@change=${(e) => {
+        this.untilText = e.target.value;
+        this.issue = "";
+      }}
+															/></label>` : nothing}
+												${this.endMode === "count" ? html`<label
+																>Number of events<input
+																	type="number"
+																	min="1"
+																	max=${MAX_RECURRENCE_COUNT}
+																	.value=${this.countText}
+																	@input=${(e) => {
+        this.countText = e.target.value;
+        this.issue = "";
+      }}
+															/></label>` : nothing}`}
+								<label
+									>Channel (optional)<select
+										?disabled=${editing}
+										.value=${this.channelId}
+										@change=${(e) => this.channelId = e.target.value}
+									>
+										<option value="">No channel: invite people</option>
+										${this.channels.map((c) => html`<option value=${c.id}># ${c.name}</option>`)}
+									</select></label
+								>
+								${this.channelId ? html`<small
+												>A channel meeting posts a meeting card in the channel and shows in
+												everyone's calendar.</small
+											>` : html`<div class="field">
+												Attendees
+												<office-ui-people-picker
+													label="Attendees"
+													.contacts=${this.contacts}
+													.selected=${this.attendees}
+													@office-people-change=${(e) => this.attendees = e.detail.selected}
+												></office-ui-people-picker>
+											</div>`}
+							`}
+				<label
+					>Details (optional)<textarea
+						maxlength=${MAX_MEETING_DESCRIPTION}
+						.value=${this.description}
+						placeholder="Add an agenda or notes"
+						@input=${(e) => this.description = e.target.value}
+					></textarea>
+				</label>
+				<small
+					>Times are shown in your time zone. The organizer's zone keeps repeats on schedule.</small
+				>
+				${this.issue ? html`<p class="issue" role="alert">${this.issue}</p>` : nothing}
+				<footer>
+					<button type="button" @click=${this.requestClose}>Cancel</button>
+					<button type="submit" class="primary">${editing ? "Save" : "Send"}</button>
+				</footer>
+			</form>`
+    );
+  }
+};
+function defineTeamsMeetingDialog(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-meeting-dialog"))
+    registry.define("teams-meeting-dialog", TeamsMeetingDialog);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/meeting-details.css?raw
+var meeting_details_default = ".when {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\nh3 {\n	margin: 0 0 var(--office-space-1);\n	font-size: var(--office-font-size);\n}\n.people ul {\n	margin: 0;\n	padding-inline-start: var(--office-space-5);\n}\n.description {\n	color: var(--office-foreground);\n	white-space: pre-wrap;\n}\n.scope {\n	display: grid;\n	gap: var(--office-space-3);\n}\n.scope fieldset {\n	display: grid;\n	gap: var(--office-space-2);\n	margin: 0;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.scope label {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\nfooter[hidden] {\n	display: none;\n}\n";
+
+// src/teams/app/meeting-details.ts
+var REPEAT_TEXT = { none: "", daily: "Repeats every day", weekly: "Repeats every week" };
+var TeamsMeetingDetails = class extends TeamsDialog {
+  static styles = dialogStyles(meeting_details_default);
+  static properties = {
+    ...TeamsDialog.properties,
+    meeting: { attribute: false },
+    occurrenceStart: { type: Number },
+    zone: { type: String },
+    channelName: { type: String },
+    pending: { state: true },
+    scope: { state: true }
+  };
+  constructor() {
+    super();
+    this.meeting = null;
+    this.occurrenceStart = 0;
+    this.zone = "";
+    this.channelName = "";
+    this.pending = null;
+    this.scope = "occurrence";
+  }
+  willUpdate(changed) {
+    if (changed.has("open") || changed.has("meeting") || changed.has("occurrenceStart"))
+      this.pending = null;
+  }
+  emit(name) {
+    if (this.meeting) this.fire(name, { meetingId: this.meeting.id });
+  }
+  recurrenceId() {
+    const m = this.meeting;
+    return m ? occurrenceAt(m, this.occurrenceStart || m.start)?.recurrenceId ?? m.start : 0;
+  }
+  /** Edit or cancel: a repeating meeting asks which events first. */
+  change(action) {
+    if (this.meeting?.repeat === "none") this.finish(action, "series");
+    else {
+      this.pending = action;
+      this.scope = "occurrence";
+    }
+  }
+  finish(action, scope) {
+    if (!this.meeting) return;
+    this.fire(`teams-meeting-${action}`, {
+      meetingId: this.meeting.id,
+      scope,
+      recurrenceId: this.recurrenceId()
+    });
+    this.pending = null;
+  }
+  endText(m) {
+    const date = (ms) => new Intl.DateTimeFormat([], {
+      dateStyle: "medium",
+      ...this.zone ? { timeZone: this.zone } : {}
+    }).format(ms);
+    if (m.count !== void 0) return m.count === 1 ? ", 1 time" : `, ${m.count} times`;
+    return m.until !== void 0 ? `, until ${date(m.until)}` : "";
+  }
+  scopeChoice(action) {
+    const options = [
+      ["occurrence", action === "edit" ? "This event" : "This event only"],
+      ["series", action === "edit" ? "All events in the series" : "All events in the series"]
+    ];
+    return html`<form
+			class="scope"
+			@submit=${(e) => {
+      e.preventDefault();
+      this.finish(action, this.scope);
+    }}
+		>
+			<fieldset>
+				<legend>
+					${action === "edit" ? "Edit recurring meeting" : "Cancel recurring meeting"}
+				</legend>
+				${options.map(
+      ([value, label]) => html`<label
+							><input
+								type="radio"
+								name="scope"
+								.value=${value}
+								.checked=${this.scope === value}
+								@change=${() => this.scope = value}
+							/>
+							${label}</label
+						>`
+    )}
+			</fieldset>
+			<footer>
+				<button type="button" @click=${() => this.pending = null}>Back</button>
+				<button type="submit" class=${action === "cancel" ? "danger" : "primary"}>
+					${action === "edit" ? "Continue" : "Cancel meeting"}
+				</button>
+			</footer>
+		</form>`;
+  }
+  render() {
+    const m = this.meeting;
+    if (!m) return this.frame("Meeting", html``);
+    const occurrence = occurrenceAt(m, this.occurrenceStart || m.start);
+    const start = occurrence?.start ?? (this.occurrenceStart || m.start);
+    const end = occurrence?.end ?? start + (m.end - m.start);
+    const description = occurrence?.description ?? m.description;
+    const hasChat = Boolean(m.chatId ?? m.channelId);
+    return this.frame(
+      occurrence?.title ?? m.title,
+      html`<div class="body">
+				<p class="when">${icon("calendar")} ${formatWhen(start, end)}</p>
+				${m.repeat !== "none" ? html`<p>${REPEAT_TEXT[m.repeat]}${this.endText(m)}</p>` : nothing}
+				${m.zone !== this.zone ? html`<p>Scheduled in the organizer's time zone, ${m.zone.replaceAll("_", " ")}.</p>` : nothing}
+				<p>Organized by ${m.mine ? "you" : m.organizerName}</p>
+				${m.channelId ? html`<p>
+								Channel meeting in # ${this.channelName || "a channel"}. Everyone in the channel can
+								join.
+							</p>` : html`<div class="people">
+								<h3>Attendees (${m.attendees.length + 1})</h3>
+								<ul>
+									<li>${m.organizerName} (organizer)</li>
+									${m.attendees.map((a) => html`<li>${a.name}</li>`)}
+								</ul>
+							</div>`}
+				${description ? html`<p class="description">${description}</p>` : nothing}
+				${this.pending ? this.scopeChoice(this.pending) : nothing}
+				<footer ?hidden=${this.pending !== null}>
+					<button type="button" class="primary" @click=${() => this.emit("teams-meeting-join")}>
+						${m.live ? "Join now" : "Join"}
+					</button>
+					${hasChat ? html`<button type="button" @click=${() => this.emit("teams-meeting-chat")}>
+									Meeting chat
+								</button>` : nothing}
+					<button type="button" @click=${() => this.emit("teams-meeting-ics")}>Export .ics</button>
+					${m.mine ? html`<button type="button" @click=${() => this.change("edit")}>Edit</button>
+									<button type="button" class="danger" @click=${() => this.change("cancel")}>
+										Cancel meeting
+									</button>` : nothing}
+				</footer>
+			</div>`,
+      "Close meeting details"
+    );
+  }
+};
+function defineTeamsMeetingDetails(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-meeting-details"))
+    registry.define("teams-meeting-details", TeamsMeetingDetails);
+}
+function chatHeader(chat, on) {
+  const other = chat.kind === "direct" ? chat.members.find((m) => !m.self) : void 0;
+  const online = chat.members.filter((m) => !m.self && m.availability !== "offline").length;
+  return html`<header class="channel-head chat-head">
+		<button
+			type="button"
+			class="back"
+			aria-label="Back to chats"
+			title="Back to chats"
+			@click=${on.back}
+		>
+			${icon("back")}
+		</button>
+		${other ? html`<office-ui-avatar
+						name=${other.name}
+						seed=${other.id}
+						presence=${other.availability}
+					></office-ui-avatar>` : html`<span class="group-mark" aria-hidden="true"
+						>${icon(chat.meetingId ? "calendar" : "users")}</span
+					>`}
+		<h1>${chat.title}</h1>
+		<span class="topic"
+			>${chat.kind === "direct" ? other?.availability ?? "" : `${chat.members.length} people${online ? `, ${online} online` : ""}`}</span
+		>
+		<div class="people" aria-label="People in this chat">
+			${chat.members.slice(0, 5).map(
+    (m) => html`<office-ui-avatar
+							size="sm"
+							name=${m.name}
+							seed=${m.id}
+							presence=${m.availability}
+						></office-ui-avatar>`
+  )}
+			${chat.members.length > 5 ? html`<span class="more">+${chat.members.length - 5}</span>` : nothing}
+		</div>
+		<button type="button" class="chat-people" @click=${on.people}>${icon("users")} People</button>
+		<button type="button" class="meet" @click=${on.call}>
+			${chat.live ? "Join call" : "Call"}
+		</button>
+	</header>`;
+}
+function meetingCards(meetings, now) {
+  const out = {};
+  for (const m of meetings) {
+    const next = occurrencesBetween(m, now, now + 400 * 864e5)[0];
+    out[m.id] = {
+      title: m.title,
+      start: next?.start ?? m.start,
+      end: next?.end ?? m.end,
+      live: m.live
+    };
+  }
+  return out;
+}
+
+// src/teams/app/calendar-app.ts
+function downloadText(name, text, type = "text/calendar") {
+  const doc = globalThis.document;
+  if (!doc || typeof URL.createObjectURL !== "function") return false;
+  const url = URL.createObjectURL(new Blob([text], { type: `${type};charset=utf-8` }));
+  const link = doc.createElement("a");
+  link.href = url;
+  link.download = name;
+  doc.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  return true;
+}
+
 // src/teams/app/teams-app.ts
 var LOCAL_THEME = THEME_CSS.replaceAll(
   ':root[data-office-theme="dark"]',
   ':host([data-office-theme="dark"])'
 ).replaceAll(':root:not([data-office-theme="light"])', ':host([data-office-theme="system"])').replaceAll(":root", ":host([data-office-theme])");
 var RAIL = [
+  { id: "activity", label: "Activity", icon: "bell" },
+  { id: "chat", label: "Chat", icon: "message" },
   { id: "teams", label: "Teams", icon: "users" },
-  { id: "calls", label: "Calls", icon: "phone" },
-  { id: "files", label: "Files", icon: "folder" },
-  { id: "followed", label: "Followed threads", shortLabel: "Threads", icon: "chat" },
-  { id: "drafts", label: "Drafts", icon: "chat" }
+  { id: "calendar", label: "Calendar", icon: "calendar" },
+  { id: "calls", label: "Calls", icon: "phone", secondary: true },
+  { id: "files", label: "Files", icon: "folder", secondary: true },
+  {
+    id: "followed",
+    label: "Followed threads",
+    shortLabel: "Threads",
+    icon: "chat",
+    secondary: true
+  },
+  { id: "drafts", label: "Drafts", icon: "chat", secondary: true }
 ];
 var TeamsApp = class extends LitElement {
   static styles = [unsafeCSS(LOCAL_THEME), unsafeCSS(teams_app_default)];
@@ -3323,6 +4997,10 @@ var TeamsApp = class extends LitElement {
     preview: { state: true },
     addingTab: { state: true },
     creatingChannel: { state: true },
+    newChat: { state: true },
+    chatPeople: { state: true },
+    meetingForm: { state: true },
+    meetingDetails: { state: true },
     rail: { state: true },
     tab: { state: true },
     panel: { state: true },
@@ -3330,6 +5008,9 @@ var TeamsApp = class extends LitElement {
     settingsOpen: { state: true },
     mobileView: { state: true },
     toast: { state: true },
+    activityToasts: { state: true },
+    activityFilter: { state: true },
+    highlightId: { state: true },
     identity: { state: true },
     followedUnreadOnly: { state: true },
     theme: { state: true },
@@ -3337,10 +5018,18 @@ var TeamsApp = class extends LitElement {
     chatDensity: { state: true },
     showAppNames: { state: true }
   };
-  teams = new TeamsController(this, (text) => this.notify(text));
+  teams = new TeamsController(
+    this,
+    (text) => this.notify(text),
+    (item) => this.announce(item)
+  );
   toastTimer;
+  activityToastTimers = /* @__PURE__ */ new Map();
+  highlightTimer;
   stopActivity;
   openRequest = 0;
+  /** The channel last open in the Teams app, restored when you come back from Chat. */
+  lastChannelId = "";
   retainedTab;
   themeStorageKey = "";
   popoutRequested = new URL(globalThis.location?.href ?? "https://workspace.invalid").searchParams.get(
@@ -3363,6 +5052,10 @@ var TeamsApp = class extends LitElement {
     this.retainedTab = void 0;
     this.addingTab = false;
     this.creatingChannel = false;
+    this.newChat = false;
+    this.chatPeople = false;
+    this.meetingForm = null;
+    this.meetingDetails = null;
     this.rail = "teams";
     this.tab = "posts";
     this.panel = "";
@@ -3370,6 +5063,9 @@ var TeamsApp = class extends LitElement {
     this.settingsOpen = false;
     this.mobileView = "conversation";
     this.toast = "";
+    this.activityToasts = [];
+    this.activityFilter = "all";
+    this.highlightId = "";
     this.identity = null;
     this.followedUnreadOnly = false;
     this.theme = "system";
@@ -3394,6 +5090,10 @@ var TeamsApp = class extends LitElement {
     defineTeamsPinnedBar();
     defineTeamsAddTabDialog();
     defineTeamsCreateChannelDialog();
+    defineTeamsNewChatDialog();
+    defineTeamsChatPeopleDialog();
+    defineTeamsMeetingDialog();
+    defineTeamsMeetingDetails();
     this.stopActivity = watchActivity(this.ownerDocument, () => this.teams.client?.noteActivity());
     super.connectedCallback();
   }
@@ -3423,6 +5123,8 @@ var TeamsApp = class extends LitElement {
     this.tab = "posts";
     this.addingTab = false;
     this.creatingChannel = false;
+    this.newChat = this.chatPeople = false;
+    this.meetingForm = this.meetingDetails = null;
     this.settingsOpen = false;
     this.openRequest++;
     const named = this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : this.identity ?? loadIdentity();
@@ -3451,6 +5153,8 @@ var TeamsApp = class extends LitElement {
   updated() {
     this.setAttribute("data-chat-density", this.chatDensity);
     const state = this.teams.state;
+    if (state?.channels.some((c) => c.id === state.selectedChannelId))
+      this.lastChannelId = state.selectedChannelId;
     if (state?.thread && document.visibilityState === "visible" && this.renderRoot.querySelector(".thread-pane"))
       this.teams.client?.markThreadRead(state.selectedChannelId, state.thread.root.id);
   }
@@ -3459,6 +5163,25 @@ var TeamsApp = class extends LitElement {
     clearTimeout(this.toastTimer);
     this.toastTimer = setTimeout(() => this.toast = "", 4e3);
   }
+  /** Deliver a notification the core allowed: a toast in a visible tab, else a desktop one. */
+  announce(item) {
+    const settings = this.teams.client?.getState().notificationSettings;
+    if (!settings) return;
+    deliverNotification(item, settings, browserDeliveryEnv(), {
+      toast: (entry) => {
+        this.activityToasts = [
+          entry,
+          ...this.activityToasts.filter((t) => t.id !== entry.id)
+        ].slice(0, 3);
+        clearTimeout(this.activityToastTimers.get(entry.id));
+        this.activityToastTimers.set(
+          entry.id,
+          setTimeout(() => this.dismissToast(entry.id), 6e3)
+        );
+      },
+      open: (entry) => entry.kind === "meeting" ? this.openMeeting(entry.messageId) : void this.openActivity(entry.id)
+    });
+  }
   // ---- intent -> client actions -----------------------------------------------------------
   async openFile(a, mode) {
     if (!this.canLeaveContent()) return;
@@ -3530,6 +5253,9 @@ var TeamsApp = class extends LitElement {
     this.openRequest++;
     this.preview = null;
     clearTimeout(this.toastTimer);
+    for (const timer of this.activityToastTimers.values()) clearTimeout(timer);
+    this.activityToastTimers.clear();
+    clearTimeout(this.highlightTimer);
     this.stopActivity?.();
     this.stopActivity = void 0;
     super.disconnectedCallback();
@@ -3576,7 +5302,8 @@ var TeamsApp = class extends LitElement {
     void this.teams.client?.openCall(channelId);
     this.mobileView = "conversation";
     this.meeting = true;
-    this.rail = "teams";
+    const target = channelId ?? this.teams.state?.selectedChannelId;
+    this.rail = this.teams.state?.chats.some((c) => c.id === target) ? "chat" : "teams";
   }
   selectChannel(id) {
     if (!this.closePreview()) return false;
@@ -3587,7 +5314,7 @@ var TeamsApp = class extends LitElement {
     this.teams.client?.search("");
     this.meeting = false;
     this.tab = "posts";
-    this.rail = "teams";
+    this.rail = this.teams.state?.chats.some((c) => c.id === id) ? "chat" : "teams";
     this.mobileView = "conversation";
     return true;
   }
@@ -3606,7 +5333,7 @@ var TeamsApp = class extends LitElement {
   }
   /** Which screen the compact shell shows: the channel or call list, or the content itself. */
   mobileScreen(s) {
-    const listed = this.rail === "teams" || this.rail === "calls";
+    const listed = ["teams", "calls", "activity", "chat", "calendar"].includes(this.rail);
     return listed && this.mobileView === "list" && !(this.meeting && s.call) ? "list" : "content";
   }
   // ---- template ---------------------------------------------------------------------------
@@ -3634,11 +5361,12 @@ var TeamsApp = class extends LitElement {
 				<div class="body">
 					<office-ui-app-rail
 						.hideLabels=${!this.showAppNames}
-						.items=${RAIL.map((i) => ({ ...i, ...i.id === "calls" && s.channels.some((c) => c.live) ? { badge: s.channels.filter((c) => c.live).length } : {} }))}
+						.items=${RAIL.map((i) => ({ ...i, ...i.id === "calls" && s.channels.some((c) => c.live) ? { badge: s.channels.filter((c) => c.live).length } : {}, ...i.id === "activity" && s.activityUnread ? { badge: s.activityUnread } : {}, ...i.id === "chat" && s.chats.some((c) => c.unread) ? { badge: s.chats.reduce((n, c) => n + c.unread, 0) } : {} }))}
 						selected=${this.rail}
 						@office-rail-select=${(e) => {
       if (!this.closePreview()) return;
       this.settingsOpen = false;
+      if (e.detail.id === "teams") this.leaveChatSelection();
       this.rail = e.detail.id;
       this.meeting = false;
       this.mobileView = "list";
@@ -3679,6 +5407,8 @@ var TeamsApp = class extends LitElement {
       );
     }}
 						.followSettings=${s.threadFollowSettings}
+						.notificationSettings=${s.notificationSettings}
+						@teams-settings-notifications=${(event) => this.teams.client?.setNotificationSettings(event.detail)}
 						.userName=${s.user.name}
 						@teams-settings-theme=${(event) => {
       if (!["system", "light", "dark"].includes(event.detail.theme)) return;
@@ -3709,7 +5439,8 @@ var TeamsApp = class extends LitElement {
 					@teams-create-channel-close=${() => this.creatingChannel = false}
 				></teams-create-channel-dialog>
 				${this.toast ? html`<div class="toast" role="status">${this.toast}</div>` : nothing}
-
+				${this.activityToasts.length ? html`<div class="activity-toasts">${this.activityToasts.map((t) => this.activityToastView(t))}</div>` : nothing}
+				${this.chatDialogs(s)} ${this.calendarDialogs(s)}
 				<teams-add-tab-dialog
 					.open=${this.addingTab}
 					.client=${this.teams.client}
@@ -3788,7 +5519,10 @@ var TeamsApp = class extends LitElement {
       }}
 															>
 																<strong>${h.message.authorName}</strong>
-																<span class="in">in # ${h.channelName}</span>
+																<span class="in"
+																	>in
+																	${s.chats.some((c) => c.id === h.channelId) ? "" : "# "}${h.channelName}</span
+																>
 																<span class="snippet">${h.message.text.slice(0, 100)}</span>
 															</button>
 														</li>`
@@ -3826,7 +5560,64 @@ var TeamsApp = class extends LitElement {
 			</header>
 		`;
   }
+  dismissToast(id) {
+    clearTimeout(this.activityToastTimers.get(id));
+    this.activityToastTimers.delete(id);
+    this.activityToasts = this.activityToasts.filter((t) => t.id !== id);
+  }
+  activityToastView(item) {
+    return html`<div class="activity-toast" role="status" data-kind=${item.kind}>
+			<span class="toast-text"
+				><strong>${describeActivity(item)}</strong
+				><span class="toast-preview">${item.preview}</span></span
+			>
+			<button
+				type="button"
+				@click=${() => {
+      this.dismissToast(item.id);
+      if (item.kind === "meeting") this.openMeeting(item.messageId);
+      else void this.openActivity(item.id);
+    }}
+			>
+				View
+			</button>
+			<button type="button" aria-label="Dismiss" @click=${() => this.dismissToast(item.id)}>
+				${icon("close")}
+			</button>
+		</div>`;
+  }
   sidebar(s) {
+    if (this.rail === "chat")
+      return html`<office-ui-chat-sidebar
+				.chats=${s.chats}
+				selected-id=${s.selectedChannelId}
+				@office-chat-select=${(e) => this.selectChannel(e.detail.id)}
+				@office-chat-new=${() => this.newChat = true}
+			></office-ui-chat-sidebar>`;
+    if (this.rail === "calendar")
+      return html`<office-ui-calendar-agenda
+					.meetings=${s.meetings}
+					.zone=${s.viewerZone}
+					@office-agenda-open=${(e) => this.meetingDetails = { meetingId: e.detail.meetingId, start: e.detail.start }}
+					@office-agenda-join=${(e) => void this.joinMeeting(e.detail.meetingId)}
+					@office-agenda-new=${() => this.meetingForm = { meetingId: "", start: 0 }}
+				></office-ui-calendar-agenda>
+				<button
+					type="button"
+					class="show-calendar"
+					@click=${() => this.mobileView = "conversation"}
+				>
+					${icon("calendar")} Open calendar
+				</button>`;
+    if (this.rail === "activity")
+      return html`<office-ui-activity-feed
+				.items=${s.activity}
+				.filter=${this.activityFilter}
+				@office-activity-filter=${(e) => this.activityFilter = e.detail.filter}
+				@office-activity-open=${(e) => void this.openActivity(e.detail.id)}
+				@office-activity-read=${(e) => this.teams.client?.markActivityRead(e.detail.id, e.detail.read)}
+				@office-activity-read-all=${() => this.teams.client?.markAllActivityRead()}
+			></office-ui-activity-feed>`;
     if (this.rail === "calls") {
       const live2 = s.channels.filter((c) => c.live);
       return html`
@@ -3882,13 +5673,18 @@ var TeamsApp = class extends LitElement {
         }
       );
     if (s.call && this.meeting) return this.meetingView(s);
+    if (this.rail === "calendar") return this.calendarMain(s);
+    if (this.rail === "chat" && !s.chats.some((c) => c.id === s.selectedChannelId))
+      return this.chatEmpty();
     return html`
 			${s.call && !this.meeting ? html`<div class="callbar">
-							You are in a call in # ${s.call.channelName}
+							You are in a call in ${this.callHeading(s.call)}
 							<button
 								type="button"
 								@click=${() => {
-      if (this.selectChannel(s.call.channelId)) this.meeting = true;
+      if (s.call.kind === "meeting") {
+        if (this.closePreview()) [this.rail, this.meeting] = ["calendar", true];
+      } else if (this.selectChannel(s.call.channelId)) this.meeting = true;
     }}
 							>
 								Return to call
@@ -3899,52 +5695,57 @@ var TeamsApp = class extends LitElement {
   }
   conversation(s, compact = false) {
     const channel = s.channel;
+    const chat = s.chats.find((x) => x.id === s.selectedChannelId);
     const c = this.teams.client;
     const compose = s.editing ?? s.replyingTo;
     const sharedTab = s.tabs.find((t) => t.id === this.tab);
     if (sharedTab) this.retainedTab = sharedTab;
     const activeTab = sharedTab ?? (this.retainedTab?.id === this.tab && this.retainedTab.channelId === s.selectedChannelId ? this.retainedTab : void 0);
     return html`
-			${compact ? nothing : html`<header class="channel-head">
-							<button
-								type="button"
-								class="back"
-								aria-label="Back to channels"
-								title="Back to channels"
-								@click=${() => this.mobileView = "list"}
-							>
-								${icon("back")}
-							</button>
-							<h1><span class="hash">#</span> ${channel?.name ?? "No channel yet"}</h1>
-							<nav class="tabs" role="tablist">
-								${["posts", "files"].map(
+			${compact ? nothing : chat ? chatHeader(chat, {
+      back: () => this.mobileView = "list",
+      call: () => this.startMeeting(),
+      people: () => this.chatPeople = true
+    }) : html`<header class="channel-head">
+								<button
+									type="button"
+									class="back"
+									aria-label="Back to channels"
+									title="Back to channels"
+									@click=${() => this.mobileView = "list"}
+								>
+									${icon("back")}
+								</button>
+								<h1><span class="hash">#</span> ${channel?.name ?? "No channel yet"}</h1>
+								<nav class="tabs" role="tablist">
+									${["posts", "files"].map(
       (t) => html`<button
-											type="button"
-											role="tab"
-											aria-selected=${String(this.tab === t)}
-											@click=${() => this.selectTab(t)}
-										>
-											${t === "posts" ? "Posts" : "Shared"}
-										</button>`
+												type="button"
+												role="tab"
+												aria-selected=${String(this.tab === t)}
+												@click=${() => this.selectTab(t)}
+											>
+												${t === "posts" ? "Posts" : "Shared"}
+											</button>`
     )}
-								${s.tabs.map((t) => html`<button type="button" role="tab" aria-selected=${String(this.tab === t.id)} @click=${() => this.selectTab(t.id)}>${t.name}</button>`)}
-							</nav>
-							<button
-								type="button"
-								aria-label="Add tab"
-								title="Add tab"
-								?disabled=${!channel}
-								@click=${() => this.addingTab = !this.addingTab}
-							>
-								+
-							</button>
-							${sharedTab ? html`<button
-											type="button"
-											data-tab-conversation
-											aria-label="Show tab conversation"
-											title="Show tab conversation"
-											aria-expanded=${String(s.thread?.root.tabId === sharedTab.id)}
-											@click=${async () => {
+									${s.tabs.map((t) => html`<button type="button" role="tab" aria-selected=${String(this.tab === t.id)} @click=${() => this.selectTab(t.id)}>${t.name}</button>`)}
+								</nav>
+								<button
+									type="button"
+									aria-label="Add tab"
+									title="Add tab"
+									?disabled=${!channel}
+									@click=${() => this.addingTab = !this.addingTab}
+								>
+									+
+								</button>
+								${sharedTab ? html`<button
+												type="button"
+												data-tab-conversation
+												aria-label="Show tab conversation"
+												title="Show tab conversation"
+												aria-expanded=${String(s.thread?.root.tabId === sharedTab.id)}
+												@click=${async () => {
       if (s.thread?.root.tabId === sharedTab.id) {
         await this.closeThread();
         return;
@@ -3957,49 +5758,51 @@ var TeamsApp = class extends LitElement {
       await this.updateComplete;
       this.shadowRoot?.querySelector("[data-thread-heading]")?.focus();
     }}
-										>
-											${icon("chat")}
-										</button>` : nothing}
-							${sharedTab?.createdBy === s.user.id ? html`<office-ui-menu-button
-											label="Tab options"
-											icon="more"
-											icon-only
-											@office-command=${(event) => {
+											>
+												${icon("chat")}
+											</button>` : nothing}
+								${sharedTab?.createdBy === s.user.id ? html`<office-ui-menu-button
+												label="Tab options"
+												icon="more"
+												icon-only
+												@office-command=${(event) => {
       if (event.detail.command === "rename-tab") {
         const name = globalThis.prompt?.("Tab name", sharedTab.name)?.trim();
         if (name) c?.renameTab(sharedTab.id, name);
       } else if (event.detail.command === "remove-tab") {
         if (!this.canLeaveContent()) return;
-        if (globalThis.confirm?.(`Remove ${sharedTab.name} from this channel?`) === true && c?.removeTab(sharedTab.id)) {
+        if (globalThis.confirm?.(
+          `Remove ${sharedTab.name} from this channel?`
+        ) === true && c?.removeTab(sharedTab.id)) {
           this.openRequest++;
           this.preview = null;
           this.tab = "posts";
         }
       }
     }}
-											><office-ui-menu-item
-												label="Rename tab"
-												command="rename-tab"
-											></office-ui-menu-item
-											><office-ui-menu-item
-												label="Remove tab"
-												command="remove-tab"
-											></office-ui-menu-item
-										></office-ui-menu-button>` : nothing}
-							<span class="topic">${channel?.topic ?? ""}</span>
-							<div class="people" aria-label="People online">
-								${s.people.slice(0, 5).map((p) => html`<office-ui-avatar size="sm" name=${p.name} seed=${p.id} color=${p.color} presence=${p.availability}></office-ui-avatar>`)}
-								${s.people.length > 5 ? html`<span class="more">+${s.people.length - 5}</span>` : nothing}
-							</div>
-							<button
-								type="button"
-								class="meet"
-								?disabled=${!channel}
-								@click=${() => this.startMeeting()}
-							>
-								${s.channels.find((x) => x.id === s.selectedChannelId)?.live ? "Join call" : "Meet now"}
-							</button>
-						</header>`}
+												><office-ui-menu-item
+													label="Rename tab"
+													command="rename-tab"
+												></office-ui-menu-item
+												><office-ui-menu-item
+													label="Remove tab"
+													command="remove-tab"
+												></office-ui-menu-item
+											></office-ui-menu-button>` : nothing}
+								<span class="topic">${channel?.topic ?? ""}</span>
+								<div class="people" aria-label="People online">
+									${s.people.slice(0, 5).map((p) => html`<office-ui-avatar size="sm" name=${p.name} seed=${p.id} color=${p.color} presence=${p.availability}></office-ui-avatar>`)}
+									${s.people.length > 5 ? html`<span class="more">+${s.people.length - 5}</span>` : nothing}
+								</div>
+								<button
+									type="button"
+									class="meet"
+									?disabled=${!channel}
+									@click=${() => this.startMeeting()}
+								>
+									${s.channels.find((x) => x.id === s.selectedChannelId)?.live ? "Join call" : "Meet now"}
+								</button>
+							</header>`}
 			${c ? messageTransfers(s, c) : nothing}
 			${activeTab && !sharedTab && !compact ? html`<p role="status">This tab was removed from the channel. Your open copy remains here until you close it.</p>` : nothing}
 			${activeTab && !compact ? html`<div
@@ -4019,7 +5822,8 @@ var TeamsApp = class extends LitElement {
       s,
       c,
       (attachment) => void this.openFile(attachment),
-      () => void this.closeThread()
+      () => void this.closeThread(),
+      this.highlightId
     ) : nothing}
 						</div>` : this.tab === "files" && !compact ? this.fileList(s.files, s) : html`<div class="conversation-grid" data-thread=${String(!!s.thread && !compact)}>
 								<div class="conversation-main">
@@ -4033,6 +5837,9 @@ var TeamsApp = class extends LitElement {
 										.replyCounts=${compact ? {} : s.replyCounts}
 										.pinnedIds=${s.pinned.map((p) => p.message.id)}
 										self-id=${s.user.id}
+										.highlightId=${this.highlightId}
+										.meetings=${meetingCards(s.meetings, Date.now())}
+										@office-chat-meeting=${(e) => e.detail.action === "join" ? void this.joinMeeting(e.detail.meetingId) : this.openMeeting(e.detail.meetingId)}
 										@office-chat-pin=${(e) => c?.pinMessage(e.detail.messageId)}
 										@office-chat-unpin=${(e) => c?.unpinMessage(e.detail.messageId)}
 										@office-chat-react=${(e) => c?.toggleReaction(e.detail.messageId, e.detail.emoji)}
@@ -4049,9 +5856,10 @@ var TeamsApp = class extends LitElement {
 													.value=${s.draft.text}
 													.files=${s.draft.files}
 													.missingFiles=${s.draft.missingFiles}
+													.mentionTargets=${s.mentionTargets}
 													@office-chat-draft=${(e) => c?.setDraft(e.detail)}
 													?disabled=${!channel}
-													placeholder=${channel ? `Message # ${channel.name}` : "Create a channel first"}
+													placeholder=${chat ? `Message ${chat.title}` : channel ? `Message # ${channel.name}` : "Create a channel first"}
 													@office-chat-typing=${() => c?.notifyTyping()}
 													@office-chat-cancel=${() => c?.cancelCompose()}
 													@office-chat-send=${(e) => void c?.send(e.detail)}
@@ -4062,7 +5870,8 @@ var TeamsApp = class extends LitElement {
       s,
       c,
       (attachment) => void this.openFile(attachment),
-      () => void this.closeThread()
+      () => void this.closeThread(),
+      this.highlightId
     ) : nothing}
 							</div>`}
 		`;
@@ -4074,17 +5883,41 @@ var TeamsApp = class extends LitElement {
     this.addingTab = false;
     this.creatingChannel = false;
   }
-  /** Scroll a pinned message into view, opening its thread when it is a reply. */
+  /** Scroll a message into view and highlight it, opening its thread when it is a reply. */
   async revealMessage(id) {
     const message = this.teams.state?.messages.find((m) => m.id === id);
     if (!message) return;
-    if (message.replyTo) return this.openThread(id);
-    const list = this.shadowRoot?.querySelector(".conversation-main office-ui-chat-list");
-    const row = Array.from(
-      list?.shadowRoot?.querySelectorAll("[data-message-id]") ?? []
-    ).find((element) => element.dataset.messageId === id);
+    if (message.replyTo) await this.openThread(id);
+    await this.updateComplete;
+    const lists = [...this.renderRoot.querySelectorAll("office-ui-chat-list")];
+    await Promise.all(lists.map((list) => list.updateComplete));
+    const row = lists.flatMap((list) => [
+      ...list.shadowRoot?.querySelectorAll("[data-message-id]") ?? []
+    ]).find((element) => element.dataset.messageId === id);
     row?.scrollIntoView({ block: "center" });
     row?.focus();
+    this.highlightId = id;
+    clearTimeout(this.highlightTimer);
+    this.highlightTimer = setTimeout(() => this.highlightId = "", 2500);
+  }
+  /** Open an Activity item: its channel or thread, scrolled to the message, and mark it read. */
+  async openActivity(id) {
+    const c = this.teams.client;
+    const item = c?.getState().activity.find((entry) => entry.id === id);
+    if (!c || !item || !this.closePreview()) return;
+    c.markActivityRead(id);
+    this.settingsOpen = false;
+    this.addingTab = false;
+    this.creatingChannel = false;
+    this.meeting = false;
+    this.tab = "posts";
+    this.mobileView = "conversation";
+    c.select(item.channelId);
+    c.search("");
+    if (item.rootId === item.messageId) c.closeThread();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await this.updateComplete;
+    await this.revealMessage(item.messageId);
   }
   async openThread(id, action) {
     const client = this.teams.client;
@@ -4095,6 +5928,166 @@ var TeamsApp = class extends LitElement {
     await this.updateComplete;
     this.shadowRoot?.querySelector("[data-thread-heading]")?.focus();
   }
+  callHeading(call) {
+    return call.kind === "channel" ? `# ${call.channelName}` : call.channelName;
+  }
+  /** Teams rail: if a chat is selected, go back to the channel you were in. */
+  leaveChatSelection() {
+    const st = this.teams.state;
+    const c = this.teams.client;
+    if (!st || !c || !st.chats.some((x) => x.id === st.selectedChannelId)) return;
+    const target = st.channels.some((x) => x.id === this.lastChannelId) ? this.lastChannelId : st.channels[0]?.id;
+    if (target) c.select(target);
+  }
+  chatEmpty() {
+    return html`<div class="empty-main">
+			<h1>Chat</h1>
+			<p>Pick a chat from the list, or start a new one.</p>
+			<button type="button" @click=${() => this.newChat = true}>New chat</button>
+		</div>`;
+  }
+  commitChat(ids, name) {
+    const c = this.client;
+    if (!c || !this.closePreview()) return false;
+    const id = c.createGroupChat(ids, name);
+    if (!id) return false;
+    this.newChat = false;
+    this.rail = "chat";
+    this.meeting = false;
+    this.tab = "posts";
+    this.mobileView = "conversation";
+    return true;
+  }
+  chatDialogs(s) {
+    const c = this.teams.client;
+    const chat = s.chats.find((x) => x.id === s.selectedChannelId) ?? null;
+    return html`
+			<teams-new-chat-dialog
+				?open=${this.newChat}
+				.contacts=${s.contacts}
+				.create=${(ids, name) => this.commitChat(ids, name)}
+				@teams-dialog-close=${() => this.newChat = false}
+			></teams-new-chat-dialog>
+			<teams-chat-people-dialog
+				?open=${this.chatPeople && chat !== null}
+				.chat=${chat}
+				.contacts=${s.contacts}
+				@teams-chat-rename=${(e) => c?.renameChat(e.detail.id, e.detail.name)}
+				@teams-chat-add=${(e) => c?.addToChat(e.detail.id, e.detail.userIds)}
+				@teams-chat-remove=${(e) => c?.removeFromChat(e.detail.id, e.detail.userId)}
+				@teams-chat-leave=${(e) => {
+      if (globalThis.confirm?.("Leave this chat? You will stop receiving its messages.") === false)
+        return;
+      if (c?.leaveChat(e.detail.id)) {
+        this.chatPeople = false;
+        this.mobileView = "list";
+      }
+    }}
+				@teams-dialog-close=${() => this.chatPeople = false}
+			></teams-chat-people-dialog>
+		`;
+  }
+  // ---- calendar ---------------------------------------------------------------------------
+  calendarMain(s) {
+    return html`
+			<div class="calendar-back">
+				<button type="button" @click=${() => this.mobileView = "list"}>
+					${icon("back")} Upcoming meetings
+				</button>
+			</div>
+			<office-ui-calendar-view
+				.meetings=${s.meetings}
+				.zone=${s.viewerZone}
+				@office-calendar-open=${(e) => this.meetingDetails = { meetingId: e.detail.meetingId, start: e.detail.start }}
+				@office-calendar-new=${(e) => this.meetingForm = { meetingId: "", start: e.detail.start }}
+			></office-ui-calendar-view>
+		`;
+  }
+  /** Open the calendar on a meeting's details, for example from its reminder. */
+  openMeeting(meetingId, start = 0) {
+    if (!this.closePreview()) return;
+    this.settingsOpen = false;
+    this.meeting = false;
+    this.rail = "calendar";
+    this.mobileView = "conversation";
+    this.meetingDetails = { meetingId, start };
+  }
+  async joinMeeting(meetingId) {
+    if (!this.closePreview()) return;
+    this.meetingDetails = null;
+    this.settingsOpen = false;
+    if (await this.teams.client?.joinMeeting(meetingId)) {
+      this.meeting = true;
+      this.rail = "calendar";
+      this.mobileView = "conversation";
+    }
+  }
+  saveMeeting(form, id, occurrence) {
+    const c = this.client;
+    if (!c) return false;
+    const saved = id && occurrence ? c.editOccurrence(id, occurrence, {
+      start: form.start,
+      end: form.end,
+      title: form.title,
+      ...form.description !== void 0 ? { description: form.description } : {}
+    }) : id ? c.updateMeeting(id, form) : c.createMeeting(form);
+    if (!saved) return false;
+    this.meetingForm = null;
+    return true;
+  }
+  calendarDialogs(s) {
+    const c = this.teams.client;
+    const editing = this.meetingForm?.meetingId ? s.meetings.find((m) => m.id === this.meetingForm?.meetingId) ?? null : null;
+    const details = this.meetingDetails ? s.meetings.find((m) => m.id === this.meetingDetails?.meetingId) ?? null : null;
+    return html`
+			<teams-meeting-dialog
+				?open=${this.meetingForm !== null}
+				.meeting=${editing}
+				.start=${this.meetingForm?.start ?? 0}
+				.occurrence=${this.meetingForm?.occurrence ?? 0}
+				.contacts=${s.contacts}
+				.channels=${s.channels.map((ch) => ({ id: ch.id, name: ch.name }))}
+				.save=${(form, id, occurrence) => this.saveMeeting(form, id, occurrence)}
+				@teams-dialog-close=${() => this.meetingForm = null}
+			></teams-meeting-dialog>
+			<teams-meeting-details
+				?open=${details !== null}
+				.meeting=${details}
+				.occurrenceStart=${this.meetingDetails?.start ?? 0}
+				.zone=${s.viewerZone}
+				.channelName=${s.channels.find((ch) => ch.id === details?.channelId)?.name ?? ""}
+				@teams-meeting-join=${(e) => void this.joinMeeting(e.detail.meetingId)}
+				@teams-meeting-chat=${(e) => {
+      const target = s.meetings.find((m) => m.id === e.detail.meetingId);
+      const conversation = target?.chatId ?? target?.channelId;
+      this.meetingDetails = null;
+      if (conversation) this.selectChannel(conversation);
+    }}
+				@teams-meeting-edit=${(e) => {
+      const { meetingId, scope, recurrenceId } = e.detail;
+      const shown = this.meetingDetails?.start ?? 0;
+      this.meetingDetails = null;
+      this.meetingForm = scope === "occurrence" ? { meetingId, start: shown, occurrence: recurrenceId } : { meetingId, start: 0 };
+    }}
+				@teams-meeting-cancel=${(e) => {
+      const { meetingId, scope, recurrenceId } = e.detail;
+      if (scope === "occurrence") {
+        if (c?.cancelOccurrence(meetingId, recurrenceId)) this.meetingDetails = null;
+        return;
+      }
+      const ask = details?.repeat === "none" ? "Cancel this meeting for everyone?" : "Cancel every event in this series?";
+      if (globalThis.confirm?.(ask) === false) return;
+      if (c?.cancelMeeting(meetingId)) this.meetingDetails = null;
+    }}
+				@teams-meeting-ics=${(e) => {
+      const file = c?.meetingIcs(e.detail.meetingId);
+      if (file && !downloadText(file.name, file.text))
+        this.notify("Could not start the download");
+    }}
+				@teams-dialog-close=${() => this.meetingDetails = null}
+			></teams-meeting-details>
+		`;
+  }
   async resumeDraft(context) {
     if (!this.closePreview() || !this.teams.client?.openDraft(context)) return;
     this.rail = "teams";
@@ -4163,7 +6156,7 @@ var TeamsApp = class extends LitElement {
     if (call.phase === "prejoin")
       return html`
 				<office-ui-prejoin
-					heading=${`# ${call.channelName}`}
+					heading=${this.callHeading(call)}
 					name=${s.user.name}
 					.preview=${call.preview}
 					?audio=${call.prejoin.audio}
@@ -4177,7 +6170,7 @@ var TeamsApp = class extends LitElement {
     return html`
 			<section class="meeting">
 				<office-ui-call-controls
-					heading=${`# ${call.channelName}`}
+					heading=${this.callHeading(call)}
 					started-at=${call.startedAt ?? 0}
 					?mic=${self?.state.audio}
 					?camera=${self?.state.video}
@@ -4262,22 +6255,32 @@ function createTeams(options) {
 var TEAMS_TAGS = [
   "office-ui-avatar",
   "office-ui-app-rail",
+  "office-ui-activity-feed",
   "office-ui-channel-list",
   "office-ui-chat-list",
   "office-ui-chat-composer",
   "office-ui-prejoin",
   "office-ui-call-grid",
-  "office-ui-call-controls"
+  "office-ui-call-controls",
+  "office-ui-chat-sidebar",
+  "office-ui-people-picker",
+  "office-ui-calendar-view",
+  "office-ui-calendar-agenda"
 ];
 function registerTeams() {
   defineAvatar();
   defineAppRail();
+  defineActivityFeed();
   defineChannelList();
   defineChatList();
   defineChatComposer();
   definePrejoin();
   defineCallGrid();
   defineCallControls();
+  defineChatSidebar();
+  definePeoplePicker();
+  defineCalendarView();
+  defineCalendarAgenda();
 }
 
-export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, XLSX_EDITOR_EVENTS, announceFileCommand, applyTeamsProps, blobFor, colorFor, createTeams, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, downloadBytes, emit, emitEvent, formatElapsed, formatSize, formatTime, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, pickFile, registerTeams, safeStorage, saveConfig, saveExtension, saveIdentity, withExtension, withStyles };
+export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, XLSX_EDITOR_EVENTS, activityTime, announceFileCommand, applyTeamsProps, blobFor, colorFor, createTeams, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, downloadBytes, emit, emitEvent, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, pickFile, registerTeams, safeStorage, saveConfig, saveExtension, saveIdentity, withExtension, withStyles };