ooxml-ui 0.30.1 → 1.0.0

package/dist/chunk-FLHM5Q4O.js

@@ -0,0 +1,4082 @@
+import { THEME_CSS, installOfficeUiTheme } from './chunk-X7RINDJQ.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-T3HB5LMH.js';
+import { registerIcon, getIcon } from './chunk-BOX43CZD.js';
+import { initialsOf, definePresence } from './chunk-OXKWNNNJ.js';
+import { definer, OfficeElement, controlStyles } from './chunk-ZV2Z4IWH.js';
+import { html, nothing, LitElement, unsafeCSS, svg } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { live } from 'lit/directives/live.js';
+import { MAX_ATTACHMENTS, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, 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
+var reset_default = ":host {\n	box-sizing: border-box;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\n*,\n*::before,\n*::after {\n	box-sizing: inherit;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nsvg.icon {\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";
+
+// src/teams/base.ts
+var withStyles = (css) => {
+  const [common, own] = controlStyles(css);
+  return [common, unsafeCSS(reset_default), own];
+};
+var TeamsElement = class extends OfficeElement {
+  static syncUpdates = false;
+};
+function colorFor(id) {
+  let hue = 0;
+  for (const ch of id) hue = (hue * 31 + ch.charCodeAt(0)) % 360;
+  return `hsl(${hue} 45% 42%)`;
+}
+var DAY_MS = 864e5;
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function dayLabel(ts, now = Date.now()) {
+  const start = (t) => new Date(t).setHours(0, 0, 0, 0);
+  const diff = Math.round((start(now) - start(ts)) / DAY_MS);
+  if (diff === 0) return "Today";
+  if (diff === 1) return "Yesterday";
+  return new Date(ts).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" });
+}
+function formatSize(bytes) {
+  if (bytes === void 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+var GLYPHS = {
+  navigation: "M3 5h14M3 10h14M3 15h14",
+  send: "M3 10 17 3l-4 14-3-6Zm7 1 7-8",
+  paperclip: "M15 9.5l-5.5 5.5a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7L11 6",
+  smile: "M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M7.5 8v.5M12.5 8v.5M7 12c1.5 2 4.5 2 6 0",
+  reply: "M8 4 3 9l5 5M3 9h9a5 5 0 0 1 5 5v2",
+  hash: "M7.5 3 6 17M14 3l-1.5 14M4 7.5h13M3 12.5h13",
+  users: "M7 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM2.5 16c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4M13 8.5a2 2 0 1 0 0-4M14 12c2 .3 3.5 1.6 3.5 4",
+  phone: "M5 3h3l1.5 4-2 1.2a8 8 0 0 0 4.3 4.3L13 10.5l4 1.5v3a2 2 0 0 1-2 2A12 12 0 0 1 3 5a2 2 0 0 1 2-2Z",
+  folder: "M3 5.5h5l1.5 2H17v8H3Z",
+  calendar: "M3.5 5h13v11.5h-13ZM3.5 8.5h13M7 3v3M13 3v3",
+  more: "M5 10h.01M10 10h.01M15 10h.01",
+  mic: "M10 3a2.5 2.5 0 0 0-2.5 2.5v4a2.5 2.5 0 0 0 5 0v-4A2.5 2.5 0 0 0 10 3ZM5 9.5a5 5 0 0 0 10 0M10 14.5V17",
+  micOff: "M10 3a2.5 2.5 0 0 0-2.5 2.5v4a2.5 2.5 0 0 0 5 0v-4A2.5 2.5 0 0 0 10 3ZM5 9.5a5 5 0 0 0 10 0M10 14.5V17M3 3l14 14",
+  video: "M3 6h9v8H3ZM12 9l5-3v8l-5-3",
+  videoOff: "M3 6h9v8H3ZM12 9l5-3v8l-5-3M3 3l14 14",
+  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"
+};
+for (const [name, d] of Object.entries(GLYPHS)) registerIcon(name, d);
+function icon(name) {
+  const found = getIcon(name);
+  if (!found) return "";
+  return html`<svg class="icon" viewBox=${found.viewBox ?? "0 0 20 20"} aria-hidden="true">
+		${svg`<path d=${found.d}></path>`}
+	</svg>`;
+}
+
+// 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";
+
+// src/teams/app-rail.ts
+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 }
+  };
+  constructor() {
+    super();
+    this.items = [];
+    this.selected = "";
+    this.hideLabels = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "App bar");
+  }
+  render() {
+    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="label">${item.label}</span>
+							</button>
+						</li>
+					`
+    )}
+			</ul>
+		`;
+  }
+};
+var defineAppRail = definer("office-ui-app-rail", () => OfficeUiAppRail);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/avatar.css?raw
+var avatar_default = ":host {\n	--_size: 2.3em;\n	position: relative;\n	display: inline-block;\n	width: var(--_size);\n	height: var(--_size);\n	flex: none;\n}\n:host([size='sm']) {\n	--_size: 1.7em;\n}\n:host([size='lg']) {\n	--_size: 3em;\n}\n:host([size='xl']) {\n	--_size: 6em;\n}\n\n.face {\n	display: grid;\n	place-items: center;\n	width: 100%;\n	height: 100%;\n	border-radius: var(--office-radius-full);\n	color: var(--office-call-foreground);\n	font-size: calc(var(--_size) * 0.38);\n	font-weight: var(--office-font-weight-bold);\n	user-select: none;\n}\n\n.presence {\n	position: absolute;\n	inset-inline-end: 0;\n	inset-block-end: 0;\n	width: 32%;\n	height: 32%;\n	min-width: 0.5em;\n	min-height: 0.5em;\n	border-radius: var(--office-radius-full);\n	border: var(--office-border-width-thick) solid var(--office-background);\n	background: var(--office-presence-offline);\n}\n.presence[data-presence='available'] {\n	background: var(--office-presence-available);\n}\n.presence[data-presence='busy'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='away'] {\n	background: var(--office-presence-away);\n}\n";
+
+// src/teams/avatar.ts
+var PRESENCE_LABEL = {
+  available: "Available",
+  busy: "Busy",
+  away: "Away",
+  offline: "Offline"
+};
+var OfficeUiAvatar = class extends TeamsElement {
+  static styles = withStyles(avatar_default);
+  static properties = {
+    name: { type: String },
+    seed: { type: String },
+    color: { type: String },
+    size: { type: String, reflect: true },
+    presence: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.name = "";
+    this.seed = "";
+    this.color = "";
+    this.size = "md";
+    this.presence = "";
+  }
+  willUpdate(changed) {
+    if (changed.has("name") || changed.has("presence")) {
+      this.setAttribute("role", "img");
+      const status = this.presence ? `, ${PRESENCE_LABEL[this.presence]}` : "";
+      this.setAttribute("aria-label", `${this.name}${status}`);
+    }
+  }
+  render() {
+    const background = this.color || colorFor(this.seed || this.name);
+    return html`
+			<span class="face" style="background:${background}">${initialsOf(this.name)}</span>
+			${this.presence ? html`<span
+							class="presence"
+							data-presence=${this.presence}
+							title=${PRESENCE_LABEL[this.presence]}
+						></span>` : ""}
+		`;
+  }
+};
+var defineAvatar = definer("office-ui-avatar", () => OfficeUiAvatar);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/call-controls.css?raw
+var call_controls_default = ":host {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n.info {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 0;\n	color: var(--office-call-muted-foreground);\n}\n.heading {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\ntime {\n	font-variant-numeric: tabular-nums;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	justify-content: flex-end;\n	gap: var(--office-space-1-5);\n}\nbutton {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	height: 2.6em;\n	padding: 0 var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: inherit;\n	font-size: var(--office-font-size-sm);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-call-control-hover);\n}\nbutton[aria-pressed='true'] {\n	background: var(--office-call-control);\n	color: var(--office-call-foreground);\n	box-shadow: inset 0 calc(-1 * var(--office-border-width-thick)) 0 var(--office-teams-brand);\n}\nbutton[data-off='true'] {\n	color: var(--office-call-danger);\n}\nbutton:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.leave {\n	background: var(--office-call-danger);\n	color: var(--office-call-foreground);\n}\n.leave:hover:not(:disabled) {\n	background: var(--office-call-danger-hover);\n}\n@media (max-width: 767px) {\n	.text {\n		display: none;\n	}\n	.info {\n		display: none;\n	}\n}\n";
+
+// src/teams/call-controls.ts
+var formatElapsed = (ms) => {
+  const total = 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)}`;
+};
+var OfficeUiCallControls = class extends TeamsElement {
+  static styles = withStyles(call_controls_default);
+  static properties = {
+    heading: { type: String },
+    startedAt: { type: Number, attribute: "started-at" },
+    mic: { type: Boolean },
+    camera: { type: Boolean },
+    screen: { type: Boolean },
+    hand: { type: Boolean },
+    panel: { type: String },
+    shareUnavailable: { type: Boolean, attribute: "share-unavailable" },
+    now: { state: true }
+  };
+  timer;
+  constructor() {
+    super();
+    this.heading = "";
+    this.startedAt = 0;
+    this.mic = false;
+    this.camera = false;
+    this.screen = false;
+    this.hand = false;
+    this.panel = "";
+    this.shareUnavailable = false;
+    this.now = Date.now();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "toolbar");
+    this.setAttribute("aria-label", "Meeting controls");
+    this.timer = setInterval(() => this.now = Date.now(), 1e3);
+  }
+  disconnectedCallback() {
+    clearInterval(this.timer);
+    super.disconnectedCallback();
+  }
+  willUpdate(_changed) {
+    if (!this.startedAt) this.now = this.startedAt;
+  }
+  button(action, label, glyph, state = {}) {
+    return html`
+			<button
+				type="button"
+				data-action=${action}
+				data-off=${String(Boolean(state.off))}
+				aria-label=${label}
+				aria-pressed=${state.on === void 0 ? nothing : String(state.on)}
+				title=${label}
+				?disabled=${state.disabled}
+				@click=${() => this.fire("office-call-action", { action })}
+			>
+				${icon(glyph)}<span class="text">${label}</span>
+			</button>
+		`;
+  }
+  render() {
+    return html`
+			<div class="info">
+				<span class="heading">${this.heading}</span
+				>${this.startedAt ? html`<time>${formatElapsed(this.now - this.startedAt)}</time>` : nothing}
+			</div>
+			<div class="actions">
+				${this.button("chat", "Chat", "chat", { on: this.panel === "chat" })}
+				${this.button("people", "People", "users", { on: this.panel === "people" })}
+				${this.button("hand", this.hand ? "Lower" : "Raise", "hand", { on: this.hand })}
+				${this.button("camera", this.camera ? "Camera off" : "Camera on", this.camera ? "video" : "videoOff", { off: !this.camera })}
+				${this.button("mic", this.mic ? "Mute" : "Unmute", this.mic ? "mic" : "micOff", { off: !this.mic })}
+				${this.button("screen", this.screen ? "Stop sharing" : "Share", "screenShare", { on: this.screen, disabled: this.shareUnavailable })}
+				<button
+					type="button"
+					class="leave"
+					aria-label="Leave call"
+					@click=${() => this.fire("office-call-action", { action: "leave" })}
+				>
+					${icon("phoneOff")}<span class="text">Leave</span>
+				</button>
+			</div>
+		`;
+  }
+};
+var defineCallControls = definer("office-ui-call-controls", () => OfficeUiCallControls);
+
+// 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";
+
+// src/teams/call-grid.ts
+var gridColumns = (n) => Math.max(1, Math.ceil(Math.sqrt(n)));
+var OfficeUiCallGrid = class extends TeamsElement {
+  static styles = withStyles(call_grid_default);
+  static properties = { participants: { attribute: false } };
+  constructor() {
+    super();
+    this.participants = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "list");
+    this.setAttribute("aria-label", "Participants");
+  }
+  render() {
+    const people = this.participants;
+    if (people.length === 0) return html`<p class="empty">Nobody is in the call</p>`;
+    const sharer = people.find((p) => p.screen);
+    const spotlight = sharer !== void 0 && people.length > 1;
+    const ordered = sharer ? [sharer, ...people.filter((p) => p !== sharer)] : people;
+    const style = `--cols:${gridColumns(people.length)};--rows:${Math.max(1, people.length - 1)}`;
+    return html`
+			<div class="grid" data-spotlight=${String(spotlight)} style=${style}>
+				${repeat(
+      ordered,
+      (p) => p.id,
+      (p, i) => this.tile(p, spotlight && i === 0)
+    )}
+			</div>
+		`;
+  }
+  tile(p, main) {
+    const showVideo = Boolean(p.stream) && (p.video || p.screen || !p.self);
+    const showAvatar = !showVideo || !p.video && !p.screen;
+    return html`
+			<div
+				class="tile"
+				role="listitem"
+				data-self=${String(Boolean(p.self))}
+				data-screen=${String(Boolean(p.screen))}
+				data-main=${String(main)}
+			>
+				${showVideo ? html`<video
+								autoplay
+								playsinline
+								.muted=${Boolean(p.self)}
+								.srcObject=${p.stream ?? null}
+							></video>` : nothing}
+				${showAvatar ? html`<office-ui-avatar size="xl" name=${p.name} seed=${p.id}></office-ui-avatar>` : nothing}
+				<div class="name">
+					${p.audio === false ? html`<span class="muted">${icon("micOff")}</span>` : nothing}
+					<span>${p.self ? `${p.name} (you)` : p.name}</span>
+				</div>
+				${p.hand ? html`<span class="hand" role="img" aria-label="Hand raised">✋</span>` : nothing}
+				${!p.self && p.connection && p.connection !== "connected" ? html`<span class="status"
+								>${p.connection === "failed" ? "Connection failed" : "Connecting\u2026"}</span
+							>` : nothing}
+			</div>
+		`;
+  }
+};
+var defineCallGrid = definer("office-ui-call-grid", () => OfficeUiCallGrid);
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/channel-list.css?raw
+var channel_list_default = ":host {\n	display: block;\n	overflow: auto;\n}\n.team {\n	display: flex;\n	align-items: center;\n	padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-1);\n}\n.toggle {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	font-weight: var(--office-font-weight-bold);\n	text-align: start;\n}\n.toggle:hover,\n.add:hover {\n	background: var(--office-selected);\n}\n.chevron {\n	display: grid;\n	transition: transform var(--office-duration-fast);\n}\n.chevron[data-open='true'] {\n	transform: rotate(90deg);\n}\n.name {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.add {\n	display: grid;\n	place-items: center;\n	width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nul {\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\nul[hidden] {\n	display: none;\n}\n.row {\n	position: relative;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-2) var(--office-space-5);\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	font-weight: var(--office-font-weight-bold);\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.row[data-unread='true'] {\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.title {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\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";
+
+// src/teams/channel-list.ts
+var OfficeUiChannelList = class extends TeamsElement {
+  static styles = withStyles(channel_list_default);
+  static properties = {
+    heading: { type: String },
+    channels: { attribute: false },
+    selectedId: { type: String, attribute: "selected-id" },
+    collapsed: { state: true }
+  };
+  constructor() {
+    super();
+    this.heading = "Channels";
+    this.channels = [];
+    this.selectedId = "";
+    this.collapsed = false;
+  }
+  render() {
+    return html`
+			<div class="team">
+				<button
+					class="toggle"
+					type="button"
+					aria-expanded=${String(!this.collapsed)}
+					@click=${() => this.collapsed = !this.collapsed}
+				>
+					<span class="chevron" data-open=${String(!this.collapsed)}>${icon("chevronRight")}</span>
+					<span class="name">${this.heading}</span>
+				</button>
+				<button
+					class="add"
+					type="button"
+					title="Add channel"
+					aria-label="Add channel"
+					@click=${() => this.fire("office-channel-create", {})}
+				>
+					${icon("plus")}
+				</button>
+			</div>
+			<ul ?hidden=${this.collapsed}>
+				${this.channels.map(
+      (c) => 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-channel-select", { id: c.id })}
+							>
+								${icon(c.kind === "direct" ? "message" : "hash")}
+								<span class="title">${c.name}</span>
+								${c.live ? html`<span class="live" title="Call in progress">${icon("video")}</span>` : ""}
+								${c.unread ? html`<span class="count">${c.unread > 99 ? "99+" : c.unread}</span>` : ""}
+							</button>
+						</li>
+					`
+    )}
+			</ul>
+		`;
+  }
+};
+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	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	field-sizing: content;\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";
+var EMOJI = [
+  "\u{1F600}",
+  "\u{1F604}",
+  "\u{1F602}",
+  "\u{1F642}",
+  "\u{1F609}",
+  "\u{1F60D}",
+  "\u{1F914}",
+  "\u{1F62E}",
+  "\u{1F622}",
+  "\u{1F621}",
+  "\u{1F44D}",
+  "\u{1F44E}",
+  "\u{1F44F}",
+  "\u{1F64F}",
+  "\u{1F4AA}",
+  "\u{1F389}",
+  "\u{1F525}",
+  "\u2764\uFE0F",
+  "\u2705",
+  "\u{1F440}"
+];
+var MAX_FILES = MAX_ATTACHMENTS;
+var OfficeUiChatComposer = class extends TeamsElement {
+  static styles = withStyles(chat_composer_default);
+  static properties = {
+    typing: { attribute: false },
+    replyingTo: { attribute: false },
+    editing: { type: Boolean },
+    disabled: { type: Boolean, reflect: true },
+    placeholder: { type: String },
+    value: { type: String },
+    files: { state: true },
+    missingFiles: { attribute: false },
+    emojiOpen: { state: true }
+  };
+  lastTyping = 0;
+  constructor() {
+    super();
+    this.typing = [];
+    this.replyingTo = null;
+    this.editing = false;
+    this.disabled = false;
+    this.placeholder = "Type a message";
+    this.value = "";
+    this.files = [];
+    this.missingFiles = [];
+    this.emojiOpen = false;
+  }
+  updated(changed) {
+    if (changed.has("replyingTo") || changed.has("editing")) {
+      if (this.replyingTo !== null || this.editing)
+        this.renderRoot.querySelector("textarea")?.focus();
+    }
+  }
+  get canSend() {
+    return !this.disabled && !this.missingFiles.length && (this.value.trim() !== "" || this.files.length > 0);
+  }
+  submit() {
+    if (!this.canSend) return;
+    const { value: text, files } = this;
+    this.value = "";
+    this.files = [];
+    this.emojiOpen = false;
+    this.fire("office-chat-send", { text, files });
+  }
+  onInput(event) {
+    this.value = event.target.value;
+    this.saveDraft();
+    const now = Date.now();
+    if (now - this.lastTyping > 2e3) {
+      this.lastTyping = now;
+      this.fire("office-chat-typing", {});
+    }
+  }
+  onKeydown(event) {
+    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+      event.preventDefault();
+      this.submit();
+    } else if (event.key === "Escape" && (this.replyingTo !== null || this.editing)) {
+      this.fire("office-chat-cancel", {});
+    }
+  }
+  pick(event) {
+    const input = event.target;
+    this.files = [...this.files, ...Array.from(input.files ?? [])].slice(0, MAX_FILES);
+    input.value = "";
+    this.missingFiles = this.missingFiles.filter(
+      (name) => !this.files.some((file) => file.name === name)
+    );
+    this.saveDraft();
+  }
+  saveDraft() {
+    this.fire("office-chat-draft", {
+      text: this.value,
+      files: [...this.files],
+      missingFiles: [...this.missingFiles]
+    });
+  }
+  typingLine() {
+    const n = this.typing.slice(0, 3);
+    if (n.length === 0) return "";
+    return n.length === 1 ? `${n[0]} is typing\u2026` : `${n.join(", ")} are typing\u2026`;
+  }
+  render() {
+    const banner = this.editing ? "Editing message" : this.replyingTo !== null ? `Replying to ${this.replyingTo}` : "";
+    return html`
+			<div class="typing" aria-live="polite">${this.typingLine()}</div>
+			<div class="box">
+				${this.missingFiles.length ? html`<div role="status">
+								Reattach or discard these draft attachments before sending:
+								<ul>
+									${this.missingFiles.map(
+      (name) => html`<li>
+												${name}<button
+													type="button"
+													aria-label=${`Discard missing ${name}`}
+													@click=${() => {
+        this.missingFiles = this.missingFiles.filter((item) => item !== name);
+        this.saveDraft();
+      }}
+												>
+													Discard
+												</button>
+											</li>`
+    )}
+								</ul>
+							</div>` : nothing}
+				${banner ? html`<div class="banner">
+								<span>${banner}</span>
+								<button
+									type="button"
+									aria-label="Cancel"
+									@click=${() => this.fire("office-chat-cancel", {})}
+								>
+									${icon("close")}
+								</button>
+							</div>` : nothing}
+				<textarea
+					rows="1"
+					aria-label="Message"
+					.value=${live(this.value)}
+					placeholder=${this.placeholder}
+					?disabled=${this.disabled}
+					@input=${this.onInput}
+					@keydown=${this.onKeydown}
+				></textarea>
+				${this.files.length ? html`<ul class="pending">
+								${this.files.map(
+      (f, i) => html`<li>
+										<button
+											type="button"
+											aria-label=${`Remove ${f.name}`}
+											@click=${() => {
+        this.files = this.files.filter((_, j) => j !== i);
+        this.saveDraft();
+      }}
+										>
+											${f.name} ${icon("close")}
+										</button>
+									</li>`
+    )}
+							</ul>` : nothing}
+				<div class="bar">
+					<button
+						type="button"
+						title="Attach files"
+						aria-label="Attach files"
+						?disabled=${this.disabled}
+						@click=${() => this.renderRoot.querySelector("input[type=file]")?.click()}
+					>
+						${icon("paperclip")}
+					</button>
+					<div class="emoji">
+						<button
+							type="button"
+							title="Emoji"
+							aria-label="Emoji"
+							aria-expanded=${String(this.emojiOpen)}
+							?disabled=${this.disabled}
+							@click=${() => this.emojiOpen = !this.emojiOpen}
+						>
+							${icon("smile")}
+						</button>
+						${this.emojiOpen ? html`<div class="picker" role="menu">
+										${EMOJI.map(
+      (e) => html`<button
+												type="button"
+												role="menuitem"
+												@click=${() => {
+        this.value += e;
+        this.saveDraft();
+        this.emojiOpen = false;
+        this.renderRoot.querySelector("textarea")?.focus();
+      }}
+											>
+												${e}
+											</button>`
+    )}
+									</div>` : nothing}
+					</div>
+					<span class="spacer"></span>
+					<button
+						type="button"
+						class="send"
+						title="Send"
+						aria-label="Send message"
+						?disabled=${!this.canSend}
+						@click=${this.submit}
+					>
+						${icon("send")}
+					</button>
+				</div>
+				<input type="file" multiple hidden @change=${this.pick} />
+			</div>
+		`;
+  }
+};
+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";
+
+// src/teams/chat-list.ts
+var QUICK_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"];
+var KIND_LETTER = {
+  docx: "W",
+  xlsx: "X",
+  pptx: "P",
+  vsdx: "V",
+  other: "F"
+};
+var GROUP_MS = 5 * 6e4;
+var OfficeUiChatList = class extends TeamsElement {
+  static styles = withStyles(chat_list_default);
+  static properties = {
+    messages: { attribute: false },
+    selfId: { type: String, attribute: "self-id" },
+    replyCounts: { attribute: false }
+  };
+  stickToBottom = true;
+  constructor() {
+    super();
+    this.messages = [];
+    this.selfId = "";
+    this.replyCounts = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "log");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-label", "Messages");
+    this.addEventListener("scroll", () => {
+      this.stickToBottom = this.scrollHeight - this.scrollTop - this.clientHeight < 64;
+    });
+  }
+  updated() {
+    if (this.stickToBottom) this.scrollTop = this.scrollHeight;
+  }
+  render() {
+    if (this.messages.length === 0) return html`<p class="empty">No messages yet. Say hello.</p>`;
+    const byId = new Map(this.messages.map((m) => [m.id, m]));
+    const rows = [];
+    let previous;
+    for (const m of this.messages) {
+      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);
+      rows.push(this.message(m, grouped, byId.get(m.replyTo ?? "")));
+      previous = m;
+    }
+    return html`${rows}`;
+  }
+  message(m, grouped, parent) {
+    const own = m.authorId === this.selfId;
+    const reactions = Object.entries(m.reactions ?? {}).filter(([, users]) => users.length > 0);
+    return html`
+			<article
+				class="msg"
+				data-message-id=${m.id}
+				data-own=${String(own)}
+				data-grouped=${String(grouped)}
+			>
+				<div class="gutter">
+					${grouped ? nothing : html`<office-ui-avatar name=${m.authorName} seed=${m.authorId}></office-ui-avatar>`}
+				</div>
+				<div class="body">
+					${grouped ? nothing : html`<header>
+									<span class="author">${m.authorName}</span>
+									<time>${formatTime(m.ts)}</time>
+								</header>`}
+					<div class="bubble">
+						${parent ? html`<blockquote>
+										<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 && 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>
+					${!m.deleted && reactions.length ? html`<div class="reactions">
+									${reactions.map(
+      ([emoji, users]) => html`
+											<button
+												type="button"
+												class="pill"
+												aria-pressed=${String(users.includes(this.selfId))}
+												aria-label=${`${emoji} ${users.length}`}
+												@click=${() => this.fire("office-chat-react", { messageId: m.id, emoji })}
+											>
+												<span>${emoji}</span><span>${users.length}</span>
+											</button>
+										`
+    )}
+								</div>` : nothing}
+					${m.deleted ? nothing : this.toolbar(m, own)}
+					${this.replyCounts[m.id] === void 0 ? nothing : html`<button type="button" class="thread-link" @click=${() => this.fire("office-chat-thread", { messageId: m.id })}>${this.replyCounts[m.id]} ${this.replyCounts[m.id] === 1 ? "reply" : "replies"}</button>`}
+				</div>
+			</article>
+		`;
+  }
+  toolbar(m, own) {
+    return html`
+			<div class="toolbar" role="toolbar" aria-label="Message actions">
+				${QUICK_REACTIONS.slice(0, 4).map(
+      (emoji) => html`<button
+						type="button"
+						aria-label=${`React ${emoji}`}
+						@click=${() => this.fire("office-chat-react", { messageId: m.id, emoji })}
+					>
+						${emoji}
+					</button>`
+    )}
+				<button
+					type="button"
+					title="Reply"
+					aria-label="Reply"
+					@click=${() => this.fire("office-chat-reply", { messageId: m.id })}
+				>
+					${icon("reply")}
+				</button>
+				${own ? html`<button
+									type="button"
+									title="Edit"
+									aria-label="Edit"
+									@click=${() => this.fire("office-chat-edit", { messageId: m.id })}
+								>
+									${icon("pencil")}
+								</button>
+								<button
+									type="button"
+									title="Delete"
+									aria-label="Delete"
+									@click=${() => this.fire("office-chat-delete", { messageId: m.id })}
+								>
+									${icon("trash")}
+								</button>` : nothing}
+			</div>
+		`;
+  }
+  files(files) {
+    return html`<div class="files">
+			${files.map(
+      (a) => html`
+					<button
+						type="button"
+						class="file"
+						aria-label=${`Open ${a.name}`}
+						@click=${() => this.fire("office-chat-open-file", { attachment: a })}
+					>
+						<span class="badge" data-kind=${a.kind}>${KIND_LETTER[a.kind]}</span>
+						<span class="meta">
+							<span class="file-name">${a.name}</span>
+							<span class="file-size">${a.kind.toUpperCase()} ${formatSize(a.size)}</span>
+						</span>
+					</button>
+				`
+    )}
+		</div>`;
+  }
+};
+var defineChatList = definer("office-ui-chat-list", () => OfficeUiChatList);
+
+// 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";
+
+// src/teams/prejoin.ts
+var OfficeUiPrejoin = class extends TeamsElement {
+  static styles = withStyles(prejoin_default);
+  static properties = {
+    heading: { type: String },
+    name: { type: String },
+    preview: { attribute: false },
+    audio: { type: Boolean },
+    video: { type: Boolean },
+    busy: { type: Boolean }
+  };
+  constructor() {
+    super();
+    this.heading = "";
+    this.name = "";
+    this.preview = null;
+    this.audio = true;
+    this.video = true;
+    this.busy = false;
+  }
+  toggle(label, glyph, on, key) {
+    return html`
+			<label class="switch">
+				<span class="what">${icon(glyph)} ${label}</span>
+				<input
+					type="checkbox"
+					role="switch"
+					.checked=${on}
+					aria-label=${label}
+					@change=${(e) => this.fire("office-prejoin-change", { [key]: e.target.checked })}
+				/>
+				<span class="track" aria-hidden="true"></span>
+			</label>
+		`;
+  }
+  render() {
+    const showVideo = this.video && this.preview;
+    return html`
+			<section class="card">
+				<div class="stage">
+					${showVideo ? html`<video
+									autoplay
+									playsinline
+									muted
+									.muted=${true}
+									.srcObject=${this.preview}
+								></video>` : html`<office-ui-avatar size="xl" name=${this.name}></office-ui-avatar>
+									<p>${this.video ? "Starting camera\u2026" : "Your camera is turned off"}</p>`}
+				</div>
+				<div class="panel">
+					<h2>Choose your audio and video settings</h2>
+					<p class="for">${this.heading}</p>
+					${this.toggle("Camera", this.video ? "video" : "videoOff", this.video, "video")}
+					${this.toggle("Microphone", this.audio ? "mic" : "micOff", this.audio, "audio")}
+					<div class="actions">
+						<button
+							type="button"
+							class="cancel"
+							@click=${() => this.fire("office-prejoin-cancel", {})}
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							class="join"
+							?disabled=${this.busy}
+							@click=${() => this.fire("office-prejoin-join", {})}
+						>
+							${this.busy ? "Joining\u2026" : "Join now"}
+						</button>
+					</div>
+					${nothing}
+				</div>
+			</section>
+		`;
+  }
+};
+var definePrejoin = definer("office-ui-prejoin", () => OfficeUiPrejoin);
+var TeamsController = class {
+  constructor(host, onNotice) {
+    this.host = host;
+    this.onNotice = onNotice;
+    host.addController(this);
+  }
+  host;
+  onNotice;
+  client = null;
+  state = null;
+  off = [];
+  flush = () => this.client?.flushStorage();
+  start(options) {
+    this.stop();
+    const client = createTeamsClient(options);
+    this.client = client;
+    this.state = client.getState();
+    this.off = [
+      client.subscribe(() => {
+        this.state = client.getState();
+        this.host.requestUpdate();
+      }),
+      client.on("notice", this.onNotice)
+    ];
+    this.host.requestUpdate();
+  }
+  stop() {
+    for (const fn of this.off.splice(0)) fn();
+    this.client?.destroy();
+    this.client = null;
+    this.state = null;
+  }
+  hostDisconnected() {
+    globalThis.removeEventListener("pagehide", this.flush);
+    this.stop();
+  }
+  hostConnected() {
+    globalThis.addEventListener("pagehide", this.flush);
+  }
+};
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/content-preview.css?raw
+var content_preview_default = ":host {\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n}\nsection {\n	display: flex;\n	flex-direction: column;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n}\nheader {\n	display: flex;\n	align-items: center;\n	flex-wrap: wrap;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\nh2 {\n	margin: 0;\n	font-size: 1em;\n	flex: 1;\n	overflow-wrap: anywhere;\n}\nbutton,\na {\n	font: inherit;\n	color: var(--office-foreground);\n}\nbutton {\n	padding: var(--office-space-2);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	cursor: pointer;\n}\narticle {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\npre {\n	white-space: pre-wrap;\n	overflow-wrap: anywhere;\n	padding: var(--office-space-3);\n	background: var(--office-background);\n}\nblockquote {\n	border-inline-start: var(--office-space-1) solid var(--office-teams-divider);\n	padding-inline-start: var(--office-space-3);\n}\n.markdown-table {\n	overflow-x: auto;\n	max-width: 100%;\n	margin-block: var(--office-space-3);\n}\n.markdown-table:focus-visible {\n	outline: var(--office-border-width) solid var(--office-foreground);\n}\ntable {\n	border-collapse: collapse;\n	min-width: 100%;\n}\nth,\ntd {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n}\nth {\n	background: var(--office-background);\n}\n[data-align='left'] {\n	text-align: left;\n}\n[data-align='center'] {\n	text-align: center;\n}\n[data-align='right'] {\n	text-align: right;\n}\n.task-list {\n	list-style: none;\n	padding-inline-start: var(--office-space-3);\n}\n.task-list input {\n	margin-inline-end: var(--office-space-2);\n}\n.heading {\n	font-size: 1.3em;\n	font-weight: bold;\n	margin-block: var(--office-space-3);\n}\np[role],\n.hint {\n	padding-inline: var(--office-space-3);\n}\niframe,\ndocx-editor,\nxlsx-editor,\nvisio-viewer,\nteams-presentation-preview {\n	display: block;\n	flex: 1;\n	width: 100%;\n	min-height: 0;\n	border: 0;\n}\niframe {\n	background: var(--office-background);\n}\nteams-presentation-preview {\n	display: flex;\n}\n";
+
+// src/xlsx/events.ts
+var XLSX_EDITOR_EVENTS = [
+  "workbook-change",
+  "workbook-error",
+  "workbook-warning",
+  "readonly-change",
+  "ribbon-action",
+  "ribbon-customize",
+  "file-command",
+  "selection-change",
+  "sheet-change",
+  "dirty-change"
+];
+var CANCELABLE = /* @__PURE__ */ new Set(["file-command"]);
+function emitEvent(target, type, detail) {
+  if (typeof CustomEvent === "undefined") return true;
+  return target.dispatchEvent(
+    new CustomEvent(type, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: CANCELABLE.has(type)
+    })
+  );
+}
+function emit(target, type, detail) {
+  return emitEvent(target, type, detail);
+}
+
+// src/xlsx/file-commands.ts
+var XLSX_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+var TYPES = {
+  xlsx: XLSX_TYPE,
+  xlsm: "application/vnd.ms-excel.sheet.macroEnabled.12",
+  csv: "text/csv;charset=utf-8",
+  xls: "application/vnd.ms-excel"
+};
+var OPEN_ACCEPT = ".xlsx,.xlsm,.xltx,.xls,.csv,.tsv,.txt";
+function announceFileCommand(host, command, fileName) {
+  return emit(host, "file-command", { command, ...fileName === void 0 ? {} : { fileName } });
+}
+var extensionOf = (fileName) => /\.([^./\\]+)$/.exec(fileName)?.[1]?.toLowerCase() ?? "";
+function withExtension(fileName, extension) {
+  const base = fileName.trim().replace(/\.[^./\\]+$/, "") || "Book1";
+  return `${base}.${extension}`;
+}
+function saveExtension(fileName) {
+  return extensionOf(fileName) === "xlsm" ? "xlsm" : "xlsx";
+}
+function blobFor(bytes, fileName) {
+  return new Blob([new Uint8Array(bytes)], { type: TYPES[extensionOf(fileName)] ?? XLSX_TYPE });
+}
+function downloadBytes(doc, bytes, fileName, mime) {
+  if (typeof URL.createObjectURL !== "function") return;
+  const url = URL.createObjectURL(
+    mime ? new Blob([new Uint8Array(bytes)], { type: mime }) : blobFor(bytes, fileName)
+  );
+  const anchor = doc.createElement("a");
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.style.display = "none";
+  doc.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function pickFile(root, accept = OPEN_ACCEPT) {
+  const doc = root.ownerDocument ?? document;
+  const input = doc.createElement("input");
+  input.type = "file";
+  input.accept = accept;
+  input.hidden = true;
+  root.append(input);
+  return new Promise((resolve, reject) => {
+    input.addEventListener("change", () => {
+      const file = input.files?.[0];
+      input.remove();
+      if (!file) return resolve(void 0);
+      file.arrayBuffer().then((buffer) => resolve({ bytes: new Uint8Array(buffer), name: file.name }), reject);
+    });
+    input.addEventListener("cancel", () => {
+      input.remove();
+      resolve(void 0);
+    });
+    input.click();
+  });
+}
+function workbookActions(state, actions) {
+  return html`<button type="button" ?disabled=${state.saving} @click=${actions.toggle}>
+			${state.editing ? "View workbook" : "Edit workbook"}
+		</button>
+		<button type="button" ?disabled=${state.saving} @click=${actions.download}>
+			Download workbook copy
+		</button>
+		${state.canShare ? html`<button type="button" ?disabled=${state.saving || !state.editing} @click=${actions.share}>${state.saving ? "Saving copy..." : "Save copy to channel"}</button>` : nothing}
+		${state.saving ? html`<button type="button" @click=${actions.cancel}>Cancel workbook save</button>` : nothing}`;
+}
+function inline(text, base) {
+  return markdownInline(text, base).map((token) => {
+    if (token.kind === "strong") return html`<strong>${token.text}</strong>`;
+    if (token.kind === "emphasis") return html`<em>${token.text}</em>`;
+    if (token.kind === "code") return html`<code>${token.text}</code>`;
+    if (token.kind === "link")
+      return html`<a href=${token.url} target="_blank" rel="noopener noreferrer"
+				>${token.text}</a
+			>`;
+    return token.text;
+  });
+}
+function markdownPreview(source, base) {
+  return markdownBlocks(source).map((block) => {
+    if (block.kind === "code") return html`<pre><code>${block.text}</code></pre>`;
+    if (block.kind === "table" && block.table) {
+      const table = block.table;
+      return html`<div
+				class="markdown-table"
+				tabindex="0"
+				role="region"
+				aria-label="Markdown table"
+			>
+				<table>
+					<thead>
+						<tr>
+							${table.headers.map((cell, column) => html`<th scope="col" data-align=${table.align[column] ?? "left"}>${inline(cell, base)}</th>`)}
+						</tr>
+					</thead>
+					<tbody>
+						${table.rows.map(
+        (row) => html`<tr>
+									${row.map((cell, column) => html`<td data-align=${table.align[column] ?? "left"}>${inline(cell, base)}</td>`)}
+								</tr>`
+      )}
+					</tbody>
+				</table>
+			</div>`;
+    }
+    const text = inline(block.text, base);
+    if (block.kind === "quote") return html`<blockquote>${text}</blockquote>`;
+    if (block.kind === "list")
+      return html`<ul class=${block.checked === void 0 ? "" : "task-list"}>
+				<li>
+					${block.checked === void 0 ? nothing : html`<input type="checkbox" aria-label=${block.text} ?checked=${block.checked} disabled />`}${text}
+				</li>
+			</ul>`;
+    if (block.kind === "heading")
+      return html`<div role="heading" aria-level=${block.level} class="heading">${text}</div>`;
+    return html`<p>${text}</p>`;
+  });
+}
+
+// src/teams/app/content-preview.ts
+var TeamsContentPreview = class extends LitElement {
+  static styles = unsafeCSS(content_preview_default);
+  static properties = {
+    detail: { attribute: false },
+    embeds: { attribute: false },
+    saveCopy: { attribute: false },
+    editing: { state: true },
+    dirty: { state: true },
+    saving: { state: true },
+    saveError: { state: true },
+    saved: { state: true },
+    downloaded: { state: true },
+    status: { state: true },
+    text: { state: true },
+    frame: { state: true },
+    native: { state: true },
+    error: { state: true }
+  };
+  revision = 0;
+  saveAbort;
+  beforeUnload = (event) => {
+    this.commitPendingEdit();
+    if (this.dirty || this.saving) {
+      event.preventDefault();
+      event.returnValue = "";
+    }
+  };
+  abort;
+  constructor() {
+    super();
+    this.detail = null;
+    this.embeds = {};
+    this.saveCopy = void 0;
+    this.editing = false;
+    this.dirty = false;
+    this.saving = false;
+    this.saveError = "";
+    this.saved = false;
+    this.downloaded = false;
+    this.status = "loading";
+    this.text = "";
+    this.frame = null;
+    this.native = null;
+    this.error = "";
+  }
+  updated(changed) {
+    if (changed.has("detail") || changed.has("embeds")) void this.load();
+  }
+  disconnectedCallback() {
+    this.saveAbort?.abort();
+    this.abort?.abort();
+    this.ownerDocument.defaultView?.removeEventListener("beforeunload", this.beforeUnload);
+    super.disconnectedCallback();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.ownerDocument.defaultView?.addEventListener("beforeunload", this.beforeUnload);
+    if (this.hasUpdated) void this.load();
+  }
+  /** Called by the workspace before replacing this pane. */
+  canLeave() {
+    if (this.saving) {
+      this.saveError = "Wait for the workbook copy to finish saving or cancel the save.";
+      return false;
+    }
+    if (!this.commitPendingEdit()) {
+      this.saveError = "Finish or cancel the current cell edit before leaving.";
+      return false;
+    }
+    return !this.dirty || globalThis.confirm?.("Discard unsaved workbook edits?") === true;
+  }
+  commitPendingEdit() {
+    const viewer = this.shadowRoot?.querySelector(
+      "xlsx-editor"
+    );
+    return viewer?.commitEdit() ?? true;
+  }
+  async load() {
+    this.saveAbort?.abort();
+    this.saveAbort = void 0;
+    this.abort?.abort();
+    const request = this.abort = new AbortController();
+    this.editing = false;
+    this.dirty = false;
+    this.saving = false;
+    this.saveError = "";
+    this.saved = false;
+    this.downloaded = false;
+    this.status = "loading";
+    this.text = "";
+    this.frame = null;
+    this.native = null;
+    const detail = this.detail;
+    if (!detail) return;
+    const kind = detectContentKind(detail.attachment.name, detail.attachment.mime);
+    try {
+      const url = contentUrl(detail.url, this.ownerDocument.baseURI);
+      if (!url) throw new Error("This content has no valid web URL");
+      const embed = this.embeds[detail.attachment.kind];
+      if (embed || kind === "website") {
+        this.frame = contentUrl(embed ? embed(detail) : url, this.ownerDocument.baseURI);
+        if (!this.frame) throw new Error("The viewer returned an invalid embed URL");
+        this.status = "ready";
+        return;
+      }
+      if (kind === "other") throw new Error("No embedded viewer is configured for this file type");
+      const bytes = await readContent(
+        url,
+        request.signal,
+        kind === "markdown" || kind === "text" ? 2097152 : 33554432
+      );
+      if (request.signal.aborted) return;
+      if (kind === "markdown" || kind === "text") {
+        this.text = new TextDecoder().decode(bytes);
+      } else {
+        if (kind === "docx") (await import('./docx.js')).registerDocxEditor();
+        if (kind === "xlsx") (await import('./xlsx.js')).defineXlsxEditor();
+        if (kind === "vsdx") (await import('./visio.js')).registerVisioViewer();
+        if (kind === "pptx")
+          (await import('./presentation-preview-HF3GZ2VD.js')).defineTeamsPresentationPreview();
+        if (request.signal.aborted) return;
+        this.native = kind;
+        await this.updateComplete;
+        if (request.signal.aborted) return;
+        const viewer = this.shadowRoot?.querySelector("docx-editor, xlsx-editor, visio-viewer, teams-presentation-preview");
+        if (!viewer) throw new Error("The viewer could not be mounted");
+        await viewer.load(bytes, detail.attachment.name);
+      }
+      if (!request.signal.aborted) this.status = "ready";
+    } catch (error) {
+      if (request.signal.aborted) return;
+      this.native = null;
+      this.error = error instanceof Error ? error.message : "Could not preview content";
+      this.status = "error";
+    }
+  }
+  toggleWorkbook() {
+    if (!this.commitPendingEdit()) {
+      this.saveError = "Finish or cancel the current cell edit before switching modes.";
+      return;
+    }
+    this.saveError = "";
+    this.editing = !this.editing;
+  }
+  async saveWorkbookCopy(download = false) {
+    if (this.saving || !download && !this.saveCopy || this.native !== "xlsx" || !this.detail)
+      return;
+    if (!this.commitPendingEdit()) {
+      this.saveError = "Finish or cancel the current cell edit before saving.";
+      return;
+    }
+    const viewer = this.shadowRoot?.querySelector("xlsx-editor");
+    if (!viewer) return;
+    const callback = this.saveCopy;
+    const request = this.abort;
+    const controller = new AbortController();
+    this.saveAbort = controller;
+    const name = withExtension(
+      this.detail.attachment.name,
+      saveExtension(this.detail.attachment.name)
+    );
+    this.saving = true;
+    this.saveError = "";
+    this.saved = false;
+    this.downloaded = false;
+    try {
+      const pendingBytes = viewer.saveBytes();
+      const revision = this.revision;
+      const bytes = await pendingBytes;
+      if (request?.signal.aborted || controller.signal.aborted) return;
+      if (download) {
+        downloadBytes(this.ownerDocument, bytes, name);
+        this.downloaded = true;
+        return;
+      }
+      const blob = blobFor(bytes, name);
+      await callback(new File([blob], name, { type: blob.type }), { signal: controller.signal });
+      if (request?.signal.aborted || controller.signal.aborted) return;
+      if (revision === this.revision) viewer.markClean();
+      this.saveError = "";
+      this.saved = true;
+    } catch (error) {
+      if (!request?.signal.aborted && !controller.signal.aborted)
+        this.saveError = error instanceof Error ? error.message : "Could not save the workbook copy";
+    } finally {
+      if (this.saveAbort === controller) {
+        this.saveAbort = void 0;
+        if (!request?.signal.aborted) this.saving = false;
+      }
+    }
+  }
+  cancelWorkbookSave() {
+    this.saveAbort?.abort();
+    this.saveAbort = void 0;
+    this.saving = false;
+    this.saveError = "Workbook save canceled. Your edits remain local.";
+  }
+  render() {
+    const detail = this.detail;
+    if (!detail) return nothing;
+    const kind = detectContentKind(detail.attachment.name, detail.attachment.mime);
+    const url = contentUrl(detail.url, this.ownerDocument.baseURI);
+    return html`<section aria-label="Content preview">
+			<header>
+				<h2>${detail.attachment.name}</h2>
+				${this.native === "xlsx" && this.status === "ready" ? workbookActions(
+      { editing: this.editing, saving: this.saving, canShare: !!this.saveCopy },
+      {
+        toggle: () => this.toggleWorkbook(),
+        share: () => void this.saveWorkbookCopy(),
+        download: () => void this.saveWorkbookCopy(true),
+        cancel: () => this.cancelWorkbookSave()
+      }
+    ) : nothing}
+				${url ? html`<a href=${url} target="_blank" rel="noopener noreferrer">Open externally</a>` : nothing}
+				<button
+					type="button"
+					@click=${() => this.dispatchEvent(new CustomEvent("teams-preview-close", { bubbles: true, composed: true }))}
+				>
+					Close preview
+				</button>
+			</header>
+			${this.native === "xlsx" ? html`<p class="hint">Edits stay local. Download a copy${this.saveCopy ? " or save a copy to the channel" : ""} to keep them. Other people keep their own copy open.</p>` : nothing}
+			${this.saved ? html`<p role="status">Workbook copy shared in the channel.</p>` : nothing}
+			${this.downloaded ? html`<p role="status">Workbook download started. Your changes remain local.</p>` : nothing}
+			${this.saveError ? html`<p role="alert">${this.saveError}</p>` : nothing}
+			${this.status === "loading" ? html`<p role="status">Loading preview...</p>` : nothing}
+			${this.status === "error" ? html`<p role="alert">${this.error}</p>
+							<button type="button" @click=${() => void this.load()}>Retry</button>` : nothing}
+			${this.frame ? html`<p class="hint">If this site blocks embedding, use Open externally.</p>
+							<iframe
+								title=${detail.attachment.name}
+								src=${this.frame}
+								sandbox="allow-scripts allow-forms"
+								referrerpolicy="no-referrer"
+							></iframe>` : nothing}
+			${keyed(
+      detail,
+      this.native === "docx" ? html`<docx-editor .readOnly=${true} .fileName=${detail.attachment.name}></docx-editor>` : this.native === "xlsx" ? html`<xlsx-editor
+								.readOnly=${!this.editing}
+								.fileName=${detail.attachment.name}
+								@workbook-change=${() => {
+        this.revision++;
+        this.saved = false;
+        this.downloaded = false;
+      }}
+								@dirty-change=${(e) => this.dirty = e.detail.dirty}
+								@readonly-change=${(e) => {
+        this.editing = !e.detail.readOnly;
+      }}
+								@file-command=${(e) => {
+        if (["save", "saveAs", "export", "exportCsv"].includes(e.detail.command) && !this.commitPendingEdit()) {
+          e.preventDefault();
+          this.saveError = "Finish or cancel the current cell edit before saving.";
+          return;
+        }
+        if (e.detail.command === "save") {
+          e.preventDefault();
+          void this.saveWorkbookCopy(!this.saveCopy);
+        }
+        if (e.detail.command === "new" || e.detail.command === "open") e.preventDefault();
+      }}
+							></xlsx-editor>` : this.native === "vsdx" ? html`<visio-viewer .showToolbar=${false}></visio-viewer>` : this.native === "pptx" ? html`<teams-presentation-preview></teams-presentation-preview>` : nothing
+    )}
+			${this.status === "ready" && !this.frame && !this.native ? html`<article>
+							${kind === "markdown" ? markdownPreview(this.text, url) : html`<pre>${this.text}</pre>`}
+						</article>` : nothing}
+		</section>`;
+  }
+};
+function defineTeamsContentPreview() {
+  if (globalThis.customElements && !customElements.get("teams-content-preview"))
+    customElements.define("teams-content-preview", TeamsContentPreview);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/channel-tab.css?raw
+var channel_tab_default = ":host {\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n}\n";
+
+// src/teams/app/channel-tab.ts
+var TeamsChannelTab = class extends LitElement {
+  static styles = unsafeCSS(channel_tab_default);
+  static properties = {
+    tab: { attribute: false },
+    client: { attribute: false },
+    embeds: { attribute: false },
+    canSave: { type: Boolean },
+    detail: { state: true },
+    error: { state: true }
+  };
+  key = "";
+  owner = null;
+  generation = 0;
+  constructor() {
+    super();
+    this.tab = null;
+    this.client = null;
+    this.embeds = {};
+    this.canSave = false;
+    this.detail = null;
+    this.error = "";
+  }
+  updated(changed) {
+    if (changed.has("tab") || changed.has("client")) void this.resolve();
+  }
+  disconnectedCallback() {
+    this.generation++;
+    this.key = "";
+    this.owner = null;
+    super.disconnectedCallback();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) void this.resolve();
+  }
+  async resolve() {
+    const { tab, client } = this;
+    const key = tab ? `${tab.id}:${JSON.stringify(tab.content)}` : "";
+    if (key === this.key && this.owner === client) return;
+    this.key = key;
+    this.owner = client;
+    const generation = ++this.generation;
+    this.detail = null;
+    this.error = "";
+    if (!tab || !client) return;
+    const attachment = tab.content.type === "file" ? tab.content.attachment : { name: tab.name, kind: "other", mime: "text/html", url: tab.content.url };
+    try {
+      const url = tab.content.type === "file" ? await client.fileUrl(attachment) : attachment.url;
+      if (generation !== this.generation || !this.isConnected) return;
+      if (!url) throw new Error("Could not resolve the tab content");
+      this.detail = { attachment, url, channelId: tab.channelId };
+    } catch (error) {
+      if (generation === this.generation)
+        this.error = error instanceof Error ? error.message : "Could not open the tab";
+    }
+  }
+  saveCopy() {
+    const { client, tab } = this;
+    if (!this.canSave || !client || !tab) return void 0;
+    return async (file, options) => {
+      await client.saveFileCopy(tab.channelId, file, options);
+    };
+  }
+  render() {
+    return html`${this.error ? html`<p role="alert">${this.error}</p>
+						<button
+							type="button"
+							@click=${() => {
+      this.key = "";
+      void this.resolve();
+    }}
+						>
+							Retry
+						</button>` : this.detail ? html`<teams-content-preview
+							.detail=${this.detail}
+							.embeds=${this.embeds}
+							.saveCopy=${this.saveCopy()}
+						></teams-content-preview>` : html`<p role="status">Opening tab...</p>`}`;
+  }
+};
+function defineTeamsChannelTab() {
+  if (globalThis.customElements && !customElements.get("teams-channel-tab"))
+    customElements.define("teams-channel-tab", TeamsChannelTab);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/files-panel.css?raw
+var files_panel_default = ":host {\n	display: flex;\n	flex-direction: column;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n	overflow: auto;\n}\n.toolbar,\n.transfer,\nform {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\ninput,\nbutton {\n	font: inherit;\n	color: inherit;\n}\ninput[type='search'],\ninput[name='name'] {\n	box-sizing: border-box;\n	min-width: 10em;\n	padding: var(--office-space-2);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.toolbar input[type='search'] {\n	width: min(22em, 100%);\n}\n.toolbar-space {\n	flex: 1;\n}\n.file-picker {\n	display: none;\n}\nbutton {\n	cursor: pointer;\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-background);\n}\nbutton:disabled {\n	cursor: default;\n	opacity: 0.5;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.hint,\n[role='status'],\n[role='alert'] {\n	margin: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n}\n.hint {\n	color: var(--office-teams-text-subtle);\n}\n.file-list {\n	position: relative;\n	min-width: 0;\n	min-height: 0;\n	flex: 1;\n	padding: var(--office-space-3);\n	overflow-x: auto;\n}\ntable {\n	border-collapse: collapse;\n	width: 100%;\n	text-align: start;\n}\nth,\ntd {\n	padding: var(--office-space-3) var(--office-space-2);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nth {\n	text-align: start;\n	font-weight: var(--office-font-weight-bold);\n	white-space: nowrap;\n}\ntd:not(:first-child) {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\ntbody tr:hover {\n	background: var(--office-selected);\n}\n.none {\n	padding-block: var(--office-space-6);\n	text-align: center;\n	color: var(--office-teams-text-subtle);\n}\n.file-name {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 12em;\n}\n.file-open {\n	border: 0;\n	background: transparent;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n}\n.file-open:hover:not(:disabled) {\n	color: var(--office-teams-brand);\n	text-decoration: underline;\n}\n.visually-hidden {\n	position: absolute;\n	width: 1em;\n	height: 1em;\n	clip-path: inset(50%);\n	overflow: hidden;\n}\n.badge {\n	flex-shrink: 0;\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius-md);\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\n.toolbar {\n	position: sticky;\n	top: 0;\n	z-index: 2;\n	background: var(--office-background);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.new-command::part(button) {\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size);\n	border-radius: var(--office-radius-md);\n	border-start-end-radius: 0;\n	border-end-end-radius: 0;\n}\n.new-command::part(caret) {\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	border-start-start-radius: 0;\n	border-end-start-radius: 0;\n}\n.new-command::part(button):hover:not(:disabled),\n.new-command::part(caret):hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.toolbar > button {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	border-color: transparent;\n	min-height: var(--office-target-size);\n}\n.icon {\n	width: 1.4em;\n	height: 1.4em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.file-list {\n	overflow: auto;\n	overscroll-behavior: contain;\n}\nth {\n	position: sticky;\n	top: 0;\n	z-index: 1;\n	background: var(--office-background);\n}\n.sort-command {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: 0;\n	border: 0;\n	font-weight: inherit;\n	white-space: nowrap;\n}\n.sort-command span {\n	color: var(--office-teams-text-subtle);\n}\ntbody tr:focus-within {\n	background: var(--office-selected);\n}\n.badge {\n	position: relative;\n	width: 1.8em;\n	height: 2.3em;\n	border-radius: var(--office-radius);\n	clip-path: polygon(0 0, 65% 0, 100% 25%, 100% 100%, 0 100%);\n}\n.badge::before {\n	content: '';\n	position: absolute;\n	inset-inline-end: 0;\n	top: 0;\n	width: 35%;\n	height: 25%;\n	background: color-mix(in srgb, currentColor 35%, transparent);\n}\n@media (max-width: 48em) {\n	th:nth-child(3),\n	td:nth-child(3),\n	th:nth-child(4),\n	td:nth-child(4) {\n		display: none;\n	}\n	.file-name {\n		min-width: 0;\n		gap: var(--office-space-2);\n	}\n	td:nth-child(2) {\n		white-space: nowrap;\n	}\n}\n";
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/file-actions.css?raw
+var file_actions_default = ":host {\n	display: block;\n	font: inherit;\n	color: inherit;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: 0;\n	background: transparent;\n	border-radius: var(--office-radius);\n	padding: var(--office-space-2) var(--office-space-3);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n[popover] {\n	margin: auto;\n	min-width: 15em;\n	max-width: min(24em, 90vw);\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	box-shadow: var(--office-shadow-teams);\n	color: var(--office-foreground);\n	background: var(--office-popover);\n}\n[popover] button {\n	display: block;\n	width: 100%;\n	text-align: start;\n}\np {\n	margin: var(--office-space-2);\n	font-size: var(--office-font-size-sm);\n}\n[role='alert'] {\n	color: var(--office-danger);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	padding: var(--office-space-2);\n}\ninput {\n	min-width: 0;\n	width: 100%;\n	box-sizing: border-box;\n	padding: var(--office-space-2);\n	font: inherit;\n	background: var(--office-field-background);\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
+
+// src/teams/app/anchored-popover.ts
+function toggleAnchoredPopover(panel, trigger) {
+  if (panel.matches(":popover-open")) {
+    panel.hidePopover();
+    return false;
+  }
+  panel.showPopover();
+  const button = trigger.getBoundingClientRect();
+  const bounds = panel.getBoundingClientRect();
+  const view = panel.ownerDocument.defaultView;
+  panel.style.inset = "auto";
+  panel.style.margin = "0";
+  panel.style.left = `${Math.max(0, Math.min(button.right - bounds.width, view.innerWidth - bounds.width))}px`;
+  panel.style.top = `${Math.max(0, Math.min(button.bottom, view.innerHeight - bounds.height))}px`;
+  return true;
+}
+
+// src/teams/app/file-actions.ts
+var fileKey = (file) => JSON.stringify([file?.channelId, file?.messageId, file?.url, file?.name]);
+var TeamsFileActions = class extends LitElement {
+  static styles = unsafeCSS(file_actions_default);
+  static properties = {
+    file: { attribute: false },
+    client: { attribute: false },
+    busy: { state: true },
+    error: { state: true },
+    copied: { state: true },
+    copyUrl: { state: true },
+    menuOpen: { state: true }
+  };
+  abort;
+  toggleMenu() {
+    const menu = this.renderRoot.querySelector("[popover]");
+    toggleAnchoredPopover(menu, this.renderRoot.querySelector("button"));
+  }
+  constructor() {
+    super();
+    this.file = null;
+    this.client = null;
+    this.busy = false;
+    this.error = "";
+    this.copied = false;
+    this.copyUrl = "";
+    this.menuOpen = false;
+  }
+  disconnectedCallback() {
+    this.abort?.abort();
+    super.disconnectedCallback();
+  }
+  willUpdate(changed) {
+    if (changed.has("file") && fileKey(changed.get("file")) !== fileKey(this.file) || changed.has("client") && changed.get("client") !== void 0) {
+      this.abort?.abort();
+      this.copyUrl = "";
+      this.error = "";
+      this.copied = false;
+      this.renderRoot.querySelector("[popover]")?.hidePopover();
+    }
+  }
+  open(action) {
+    this.renderRoot.querySelector("[popover]")?.hidePopover();
+    this.dispatchEvent(
+      new CustomEvent(`teams-files-${action}`, {
+        detail: { attachment: this.file, ...action === "open" ? { mode: "teams" } : {} },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  async transfer(action) {
+    if (this.busy || !this.file || !this.client) return;
+    const { file, client } = this;
+    const abort = new AbortController();
+    this.abort = abort;
+    this.busy = true;
+    this.error = "";
+    this.copied = false;
+    try {
+      const url = contentUrl(await client.fileUrl(file), this.ownerDocument.baseURI);
+      if (!this.isConnected || abort.signal.aborted) return;
+      if (!url) throw new Error("The file is no longer available");
+      if (action === "download") {
+        const bytes = await readContent(url, abort.signal, 33554432);
+        if (this.isConnected && !abort.signal.aborted)
+          downloadBytes(
+            this.ownerDocument,
+            bytes,
+            file.name,
+            file.mime ?? "application/octet-stream"
+          );
+      } else {
+        this.copyUrl = url;
+        try {
+          await navigator.clipboard.writeText(url);
+          if (!abort.signal.aborted && this.isConnected) this.copied = true;
+        } catch {
+        }
+      }
+    } catch (error) {
+      if (!abort.signal.aborted)
+        this.error = error instanceof Error ? error.message : "Could not access this file";
+    } finally {
+      if (this.abort === abort) {
+        this.abort = void 0;
+        this.busy = false;
+      }
+    }
+  }
+  render() {
+    return html`<button
+				type="button"
+				aria-label=${`More actions for ${this.file?.name ?? "file"}`}
+				?disabled=${!this.file?.url}
+				aria-controls="actions"
+				aria-expanded=${String(this.menuOpen)}
+				@click=${this.toggleMenu}
+			>
+				…
+			</button>
+			<div
+				id="actions"
+				popover="auto"
+				aria-label="File actions"
+				@toggle=${() => this.menuOpen = this.renderRoot.querySelector("[popover]").matches(":popover-open")}
+			>
+				<button type="button" @click=${() => this.open("open")}>Open in OpenTeams</button>
+				<button type="button" @click=${() => this.open("browser")}>Open in browser</button>
+				<button type="button" ?disabled=${this.busy} @click=${() => void this.transfer("download")}>
+					Download
+				</button>
+				<button type="button" ?disabled=${this.busy} @click=${() => void this.transfer("copy")}>
+					Copy link
+				</button>
+				<button type="button" @click=${() => this.open("pin")}>Pin as tab</button>
+				${this.busy ? html`<p role="status">Preparing file…</p>
+								<button type="button" @click=${() => this.abort?.abort()}>Cancel</button>` : nothing}
+				${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
+				${this.copied ? html`<p role="status">Link copied</p>` : nothing}
+				${this.copyUrl ? html`<label>File link<input readonly .value=${this.copyUrl} @focus=${(event) => event.target.select()} /></label>` : nothing}
+			</div>`;
+  }
+};
+function defineTeamsFileActions() {
+  if (!customElements.get("teams-file-actions"))
+    customElements.define("teams-file-actions", TeamsFileActions);
+}
+
+// src/teams/app/files-panel.ts
+var TeamsFilesPanel = class extends LitElement {
+  static styles = unsafeCSS(files_panel_default);
+  static properties = {
+    client: { attribute: false },
+    files: { attribute: false },
+    channelId: { attribute: false },
+    channelName: { attribute: false },
+    canUpload: { type: Boolean },
+    query: { state: true },
+    creating: { state: true },
+    sortField: { state: true },
+    sortDirection: { state: true },
+    busy: { state: true },
+    error: { state: true },
+    destination: { state: true },
+    transfer: { state: true },
+    canceled: { state: true }
+  };
+  active;
+  retry;
+  constructor() {
+    super();
+    this.client = null;
+    this.files = [];
+    this.channelId = "";
+    this.channelName = "";
+    this.canUpload = false;
+    this.query = "";
+    this.creating = false;
+    this.sortField = "ts";
+    this.sortDirection = "descending";
+    this.busy = false;
+    this.error = "";
+    this.destination = "";
+    this.transfer = null;
+    this.canceled = false;
+  }
+  disconnectedCallback() {
+    this.active?.abort();
+    super.disconnectedCallback();
+  }
+  connectedCallback() {
+    defineTeamsFileActions();
+    defineMenuButton();
+    defineMenuItem();
+    super.connectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("client")) {
+      this.active?.abort();
+      this.active = void 0;
+      this.busy = false;
+      this.transfer = null;
+      this.canceled = false;
+      this.retry = void 0;
+      this.error = "";
+    }
+  }
+  emit(action, attachment) {
+    this.dispatchEvent(
+      new CustomEvent(`teams-files-${action}`, {
+        detail: { attachment },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  async run(task) {
+    if (this.busy) return;
+    const client = this.client;
+    const controller = new AbortController();
+    this.active = controller;
+    if (this.retry !== task) this.destination = this.channelName;
+    this.busy = true;
+    this.error = "";
+    this.canceled = false;
+    this.transfer = null;
+    this.retry = task;
+    try {
+      await task({
+        signal: controller.signal,
+        onProgress: (progress) => {
+          if (this.active === controller && this.client === client && this.isConnected)
+            this.transfer = progress;
+        }
+      });
+      if (this.client === client && this.active === controller) this.retry = void 0;
+    } catch (error) {
+      if (this.client === client && this.active === controller && this.isConnected) {
+        this.canceled = controller.signal.aborted;
+        if (!this.canceled)
+          this.error = error instanceof Error ? error.message : "Could not share files";
+      }
+    } finally {
+      if (this.active === controller) {
+        this.active = void 0;
+        this.busy = false;
+      }
+    }
+  }
+  upload(event) {
+    const input = event.target;
+    const files = Array.from(input.files ?? []);
+    input.value = "";
+    const { client, channelId } = this;
+    if (!client || !files.length) return;
+    void this.run((options) => client.uploadFiles(channelId, files, options));
+  }
+  create(event) {
+    event.preventDefault();
+    const name = String(new FormData(event.target).get("name") ?? "");
+    const { client, channelId } = this;
+    if (!client) return;
+    void this.run(async (options) => {
+      const attachment = await client.createWorkbook(channelId, name, options);
+      if (!this.isConnected || this.client !== client || this.channelId !== channelId) return;
+      this.creating = false;
+      this.emit("open", { ...attachment, channelId });
+    });
+  }
+  sortHeading(field, label) {
+    const active = this.sortField === field;
+    return html`<th scope="col" aria-sort=${active ? this.sortDirection : "none"}>
+			<button
+				type="button"
+				class="sort-command"
+				@click=${() => {
+      this.sortDirection = active && this.sortDirection === "ascending" ? "descending" : "ascending";
+      this.sortField = field;
+    }}
+			>
+				${label}<span aria-hidden="true"
+					>${active ? this.sortDirection === "ascending" ? "\u2191" : "\u2193" : "\u2195"}</span
+				>
+			</button>
+		</th>`;
+  }
+  render() {
+    const files = sortFiles(
+      filterFiles(this.files, this.query),
+      this.sortField,
+      this.sortDirection
+    );
+    const disabled = this.busy || !this.canUpload || !this.channelId;
+    return html`<div class="toolbar" role="toolbar" aria-label="File actions">
+				<office-ui-menu-button
+					class="new-command"
+					label="+ New"
+					.disabled=${disabled}
+					@office-command=${async (event) => {
+      if (event.detail.command !== "new-workbook" || disabled) return;
+      this.creating = true;
+      await this.updateComplete;
+      this.renderRoot.querySelector('input[name="name"]')?.focus();
+    }}
+				>
+					<office-ui-menu-item
+						label="New Excel workbook"
+						command="new-workbook"
+					></office-ui-menu-item>
+				</office-ui-menu-button>
+				<button
+					type="button"
+					?disabled=${disabled}
+					@click=${() => this.renderRoot.querySelector('input[type="file"]')?.click()}
+				>
+					${icon("upload")} Upload
+				</button>
+				<input
+					type="file"
+					class="file-picker"
+					aria-label="Upload files"
+					multiple
+					?disabled=${disabled}
+					@change=${this.upload}
+				/>
+				<span class="toolbar-space"></span>
+				<input
+					type="search"
+					aria-label="Search files"
+					placeholder="Search files"
+					.value=${this.query}
+					@input=${(e) => this.query = e.target.value}
+				/>
+			</div>
+			<p class="hint">
+				${this.canUpload ? `New files are shared in # ${this.channelName}.` : "Configure file storage to upload files or create workbooks."}
+			</p>
+			${this.creating ? html`<form aria-label="Create Excel workbook" @submit=${this.create}>
+							<input
+								name="name"
+								aria-label="Workbook name"
+								placeholder="Workbook name"
+								maxlength="75"
+								required
+								?disabled=${this.busy}
+							/>
+							<button type="submit" ?disabled=${disabled}>Create workbook</button>
+							<button type="button" ?disabled=${this.busy} @click=${() => this.creating = false}>
+								Cancel
+							</button>
+						</form>` : nothing}
+			${this.busy ? html`<div class="transfer">
+							<p role="status">
+								Sharing files in # ${this.destination}:
+								${this.transfer?.phase === "preparing" ? "Preparing" : "Uploading"}
+								${this.transfer?.fileName ?? ""} (${this.transfer?.completed ?? 0} of
+								${this.transfer?.total ?? 0} uploaded)
+							</p>
+							${this.transfer ? html`<progress aria-label="Files uploaded" max=${this.transfer.total} value=${this.transfer.completed}></progress>` : nothing}
+							<button type="button" @click=${() => this.active?.abort()}>Cancel sharing</button>
+						</div>` : nothing}
+			${this.error || this.canceled ? html`${this.canceled ? html`<p role="status">Sharing in # ${this.destination} canceled.</p>` : html`<p role="alert">Sharing in # ${this.destination} failed: ${this.error}</p>`}
+							<button
+								type="button"
+								?disabled=${this.busy}
+								@click=${() => this.retry && void this.run(this.retry)}
+							>
+								Retry sharing files
+							</button>` : nothing}
+			<div class="file-list">
+				<table aria-label="Shared files">
+					<thead>
+						<tr>
+							${this.sortHeading("name", "Name")} ${this.sortHeading("ts", "Shared on")}
+							${this.sortHeading("author", "Shared by")}
+							<th scope="col">Location</th>
+							<th scope="col"><span class="visually-hidden">Actions</span></th>
+						</tr>
+					</thead>
+					<tbody>
+						${files.length ? files.map(
+      (file) => html`<tr>
+											<td>
+												<div class="file-name">
+													<span class="badge" data-kind=${file.kind}
+														>${{ docx: "W", xlsx: "X", pptx: "P", vsdx: "V", other: "F" }[file.kind]}</span
+													>
+													<button
+														class="file-open"
+														type="button"
+														aria-label=${`Open ${file.name}`}
+														title=${file.name}
+														?disabled=${!file.url}
+														@click=${() => this.emit("open", file)}
+													>
+														${file.name}
+													</button>
+												</div>
+											</td>
+											<td><time>${new Date(file.ts).toLocaleDateString()}</time></td>
+											<td>${file.author}</td>
+											<td>
+												${file.channelName ? `# ${file.channelName}` : `# ${this.channelName}`}
+											</td>
+											<td>
+												<teams-file-actions
+													.file=${file}
+													.client=${this.client}
+												></teams-file-actions>
+											</td>
+										</tr>`
+    ) : html`<tr>
+										<td colspan="5" class="none">
+											${this.query.trim() ? "No matching files." : "No files shared yet."}
+										</td>
+									</tr>`}
+					</tbody>
+				</table>
+			</div>`;
+  }
+};
+function defineTeamsFilesPanel() {
+  if (globalThis.customElements && !customElements.get("teams-files-panel"))
+    customElements.define("teams-files-panel", TeamsFilesPanel);
+}
+
+// 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";
+
+// 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";
+function themeChoices(current, change) {
+  return html`<div class="theme-options" role="group" aria-label="Theme">
+		${["system", "light", "dark"].map(
+    (theme) => html`<button
+				type="button"
+				aria-pressed=${String(current === theme)}
+				@click=${() => change(theme)}
+			>
+				<span class="theme-swatch" data-theme=${theme} aria-hidden="true">
+					<span class="preview-toolbar"></span>
+					<span class="preview-rail"></span>
+					<span class="preview-sidebar"><i></i><i></i><i></i></span>
+					<span class="preview-conversation"><i></i><i></i><i></i></span>
+				</span>
+				<span>${theme === "system" ? "Follow system" : theme === "light" ? "Light" : "Dark"}</span>
+			</button>`
+  )}
+	</div>`;
+}
+
+// src/teams/app/settings-connection.ts
+function parseIceLines(text) {
+  return text.split("\n").map((line) => line.trim()).filter(Boolean).map((line) => {
+    const [urls = "", username, credential] = line.split(/\s+/u);
+    return {
+      urls: urls.split(",").filter(Boolean),
+      ...username ? { username } : {},
+      ...credential ? { credential } : {}
+    };
+  });
+}
+var iceToText = (config) => config.iceServers.map(
+  (server) => [[server.urls].flat().join(","), server.username, server.credential].filter(Boolean).join(" ")
+).join("\n");
+function densityChoices(density, change) {
+  return html`<fieldset class="density-options">
+		<legend>Chat density</legend>
+		${["comfy", "compact"].map(
+    (value) => html`<label class="density-choice">
+				<input
+					type="radio"
+					name="chat-density"
+					value=${value}
+					.checked=${density === value}
+					@change=${() => change(value)}
+				/>
+				<span class="density-preview" data-density=${value} aria-hidden="true">
+					${[0, 1, 2].map(
+      () => html`<span class="preview-message"
+								><i></i><span><b></b><b></b></span
+							></span>`
+    )}
+				</span>
+				<span class="density-caption"
+					><strong>${value === "comfy" ? "Comfy" : "Compact"}</strong>
+					<small
+						>${value === "comfy" ? "More space between messages" : "More messages in less space"}</small
+					></span
+				>
+			</label>`
+  )}
+	</fieldset>`;
+}
+var SETTINGS_CATEGORIES = [
+  ["general", "General"],
+  ["appearance", "Appearance and accessibility"],
+  ["notifications", "Notifications and activity"],
+  ["files", "Files and links"],
+  ["connection", "Connection"]
+];
+var TOPICS = [
+  { category: "general", title: "Profile", description: "Your name and workspace on this device" },
+  {
+    category: "appearance",
+    title: "Theme",
+    description: "Follow system, light or dark appearance"
+  },
+  {
+    category: "appearance",
+    title: "Chat density",
+    description: "Comfy or compact message spacing"
+  },
+  {
+    category: "appearance",
+    title: "Show app names",
+    description: "Display labels beneath app bar icons"
+  },
+  {
+    category: "notifications",
+    title: "Followed threads",
+    description: "Threads I start and threads I reply to"
+  },
+  {
+    category: "files",
+    title: "File open preference",
+    description: "Open Word, PowerPoint and Excel in OpenTeams or browser"
+  },
+  {
+    category: "connection",
+    title: "Connection",
+    description: "Workspace server, sync URL, signaling URL, access token and ICE servers"
+  }
+];
+function settingsSearch(query, select) {
+  const words = query.trim().toLocaleLowerCase().split(/\s+/u);
+  const matches = TOPICS.filter((topic) => {
+    const category = SETTINGS_CATEGORIES.find(([id]) => id === topic.category)[1];
+    const text = `${category} ${topic.title} ${topic.description}`.toLocaleLowerCase();
+    return words.every((word) => text.includes(word));
+  });
+  return html`<section class="settings-results" aria-label="Settings search results">
+		<h2>Search results</h2>
+		<p role="status">
+			${matches.length ? `${matches.length} ${matches.length === 1 ? "setting" : "settings"} found` : "No matching settings. Try another keyword."}
+		</p>
+		<ul>
+			${matches.map(
+    (topic) => html`<li>
+						<button type="button" @click=${() => select(topic)}>
+							<strong>${topic.title}</strong
+							><span>${SETTINGS_CATEGORIES.find(([id]) => id === topic.category)[1]}</span
+							><small>${topic.description}</small>
+						</button>
+					</li>`
+  )}
+		</ul>
+	</section>`;
+}
+
+// src/teams/app/teams-settings.ts
+var TeamsSettings = class extends LitElement {
+  static styles = [unsafeCSS(teams_settings_default), unsafeCSS(settings_previews_default)];
+  static properties = {
+    config: { attribute: false },
+    open: { type: Boolean, reflect: true },
+    embedded: { type: Boolean, reflect: true },
+    issues: { state: true },
+    category: { state: true },
+    theme: { attribute: false },
+    followSettings: { attribute: false },
+    userName: { attribute: false },
+    fileOpenPreference: { attribute: false },
+    chatDensity: { attribute: false },
+    showAppNames: { attribute: false },
+    query: { state: true }
+  };
+  constructor() {
+    super();
+    this.config = { mode: "local", iceServers: [] };
+    this.open = false;
+    this.embedded = false;
+    this.issues = [];
+    this.category = "general";
+    this.theme = "system";
+    this.followSettings = { started: true, replied: true };
+    this.userName = "";
+    this.fileOpenPreference = "teams";
+    this.chatDensity = "comfy";
+    this.showAppNames = true;
+    this.query = "";
+  }
+  willUpdate(changed) {
+    if (changed.has("open") && this.open) this.query = "";
+  }
+  updated(changed) {
+    if (changed.has("category")) {
+      const content = this.renderRoot.querySelector(".settings-content");
+      if (content) content.scrollTop = 0;
+    }
+    const dialog = this.renderRoot.querySelector("dialog");
+    if (!dialog) return;
+    if (changed.has("open") && this.open) {
+      const c = this.config;
+      for (const [id, value] of Object.entries({
+        mode: c.mode,
+        sync: c.syncUrl ?? "",
+        signal: c.signalingUrl ?? "",
+        token: c.token ?? "",
+        ice: iceToText(c),
+        policy: c.iceTransportPolicy ?? "all"
+      }))
+        this.field(id).value = value;
+    }
+    if (this.open && !dialog.open) {
+      if (this.embedded) dialog.show();
+      else dialog.showModal();
+      this.renderRoot.querySelector('input[type="search"]')?.focus();
+    }
+    if (!this.open && dialog.open) dialog.close();
+  }
+  field(id) {
+    return this.renderRoot.querySelector(`#${id}`);
+  }
+  apply(event) {
+    event.preventDefault();
+    const { config, issues } = parseServerConfig({
+      mode: this.field("mode").value,
+      syncUrl: this.field("sync").value,
+      signalingUrl: this.field("signal").value,
+      token: this.field("token").value,
+      iceServers: parseIceLines(this.field("ice").value),
+      iceTransportPolicy: this.field("policy").value
+    });
+    this.issues = issues;
+    if (this.field("mode").value === "server" && config.mode === "local") return;
+    this.dispatchEvent(
+      new CustomEvent("teams-settings-apply", {
+        detail: { config },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  close() {
+    this.issues = [];
+    this.dispatchEvent(new CustomEvent("teams-settings-close", { bubbles: true, composed: true }));
+  }
+  render() {
+    const c = this.config;
+    return html`
+			<dialog
+				aria-label="Settings"
+				@close=${() => {
+      if (this.open) this.close();
+    }}
+				@cancel=${(event) => {
+      event.preventDefault();
+      this.close();
+    }}
+				@keydown=${(event) => {
+      if (this.embedded && event.key === "Escape" && !event.defaultPrevented) {
+        event.preventDefault();
+        this.close();
+      }
+    }}
+			>
+				<header>
+					<h1>Settings</h1>
+					<input
+						type="search"
+						aria-label="Search settings"
+						placeholder="Search settings"
+						.value=${this.query}
+						@input=${(event) => this.query = event.target.value}
+					/>
+					<button type="button" class="close" aria-label="Close settings" @click=${this.close}>
+						×
+					</button>
+				</header>
+				<div class="settings-layout">
+					<nav
+						aria-label="Settings categories"
+						role="tablist"
+						aria-orientation="vertical"
+						@keydown=${(event) => {
+      const index = SETTINGS_CATEGORIES.findIndex(([id]) => id === this.category);
+      const next = event.key === "ArrowDown" ? (index + 1) % SETTINGS_CATEGORIES.length : event.key === "ArrowUp" ? (index + SETTINGS_CATEGORIES.length - 1) % SETTINGS_CATEGORIES.length : event.key === "Home" ? 0 : event.key === "End" ? SETTINGS_CATEGORIES.length - 1 : -1;
+      if (next < 0) return;
+      event.preventDefault();
+      this.category = SETTINGS_CATEGORIES[next][0];
+      this.query = "";
+      this.renderRoot.querySelector(`#settings-${this.category}`)?.focus();
+    }}
+					>
+						${SETTINGS_CATEGORIES.map(
+      ([id, label]) => html`<button
+									id=${`settings-${id}`}
+									role="tab"
+									type="button"
+									aria-selected=${String(!this.query.trim() && this.category === id)}
+									tabindex=${this.category === id ? 0 : -1}
+									aria-controls=${`panel-${id}`}
+									@click=${() => {
+        this.category = id;
+        this.query = "";
+      }}
+								>
+									${icon({ general: "settings", appearance: "formatPainter", notifications: "message", files: "folder", connection: "screenShare" }[id])}<span
+										>${label}</span
+									>
+								</button>`
+    )}
+					</nav>
+					<div class="settings-content">
+						${this.query.trim() ? settingsSearch(this.query, async (topic) => {
+      this.category = topic.category;
+      this.query = "";
+      await this.updateComplete;
+      if (!this.open || this.query.trim() || this.category !== topic.category) return;
+      const panel = this.renderRoot.querySelector(
+        `#panel-${topic.category}`
+      );
+      const heading = [...panel.querySelectorAll("h2, h3, legend")].find(
+        (element) => element.textContent?.trim() === topic.title
+      ) ?? panel;
+      heading.tabIndex = -1;
+      heading.focus();
+    }) : nothing}
+						<section
+							id="panel-general"
+							role="tabpanel"
+							aria-labelledby="settings-general"
+							?hidden=${!!this.query.trim() || this.category !== "general"}
+						>
+							<h2>General</h2>
+							<h3>Profile</h3>
+							<p>${this.userName || "OpenTeams user"}</p>
+							<h3>Your workspace</h3>
+							<p>${c.mode === "local" ? "Local workspace" : "Connected workspace"}</p>
+							<p class="description">
+								Preferences are saved for this user and workspace on this device.
+							</p>
+						</section>
+						<section
+							id="panel-appearance"
+							role="tabpanel"
+							aria-labelledby="settings-appearance"
+							?hidden=${!!this.query.trim() || this.category !== "appearance"}
+						>
+							<h2>Appearance and accessibility</h2>
+							<h3>Theme</h3>
+							${themeChoices(this.theme, (theme) => this.dispatchEvent(new CustomEvent("teams-settings-theme", { detail: { theme }, bubbles: true, composed: true })))}
+							${densityChoices(this.chatDensity, (density) => this.dispatchEvent(new CustomEvent("teams-settings-density", { detail: { density }, bubbles: true, composed: true })))}
+							<h3>Show app names</h3>
+							<label class="preference"
+								><span>Display labels beneath app bar icons</span
+								><office-ui-switch
+									aria-label="Show app names"
+									.checked=${this.showAppNames}
+									@change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-app-names", { detail: { show: event.target.checked }, bubbles: true, composed: true }))}
+								></office-ui-switch
+							></label>
+							<p class="description">
+								Changes apply immediately to this OpenTeams workspace. Keyboard focus and system
+								high-contrast preferences remain available.
+							</p>
+						</section>
+						<section
+							id="panel-notifications"
+							role="tabpanel"
+							aria-labelledby="settings-notifications"
+							?hidden=${!!this.query.trim() || this.category !== "notifications"}
+						>
+							<h2>Notifications and activity</h2>
+							<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"
+							role="tabpanel"
+							aria-labelledby="settings-files"
+							?hidden=${!!this.query.trim() || this.category !== "files"}
+						>
+							<h2>Files and links</h2>
+							<h3>File open preference</h3>
+							<label
+								>Always open Word, PowerPoint and Excel files in:
+								<select
+									aria-label="Office file open preference"
+									.value=${this.fileOpenPreference}
+									@change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-file-open", { detail: { preference: event.target.value }, bubbles: true, composed: true }))}
+								>
+									<option value="teams">OpenTeams</option>
+									<option value="browser">Browser</option>
+								</select></label
+							>
+							<p class="description">
+								Browser opens the built-in viewer in a separate tab. Hosts can provide their own
+								viewers. Desktop-app defaults and download-location preferences are not available
+								yet.
+							</p>
+						</section>
+						<form
+							id="panel-connection"
+							role="tabpanel"
+							aria-labelledby="settings-connection"
+							?hidden=${!!this.query.trim() || this.category !== "connection"}
+							@submit=${this.apply}
+						>
+							<h2>Connection</h2>
+							<p class="description">Configure your workspace server and calling service.</p>
+							<label>
+								<span>Mode</span>
+								<select id="mode" .value=${c.mode}>
+									<option value="local" ?selected=${c.mode === "local"}>
+										Local: tabs of this browser only (no server)
+									</option>
+									<option value="server" ?selected=${c.mode === "server"}>Your server</option>
+								</select>
+							</label>
+							<label>
+								<span>Sync URL</span>
+								<input
+									id="sync"
+									.value=${c.syncUrl ?? ""}
+									placeholder="ws://localhost:8787/sync"
+									spellcheck="false"
+									autocomplete="off"
+								/>
+								<small>y-websocket compatible endpoint; the workspace id is appended.</small>
+							</label>
+							<label>
+								<span>Signaling URL</span>
+								<input
+									id="signal"
+									.value=${c.signalingUrl ?? ""}
+									placeholder="ws://localhost:8787/signal"
+									spellcheck="false"
+									autocomplete="off"
+								/>
+								<small>WebRTC signaling relay; the call room is appended.</small>
+							</label>
+							<label>
+								<span>Access token</span>
+								<input
+									id="token"
+									type="password"
+									.value=${c.token ?? ""}
+									placeholder="shared secret"
+									autocomplete="off"
+								/>
+								<small>Sent as ?token= to both sockets. Stored in this browser.</small>
+							</label>
+							<label>
+								<span>ICE servers</span>
+								<textarea
+									id="ice"
+									spellcheck="false"
+									.value=${iceToText(c)}
+									placeholder="stun:stun.example.org:3478&#10;turn:turn.example.org:3478 user password"
+								></textarea>
+								<small>One per line: urls [username credential]. TURN needs credentials.</small>
+							</label>
+							<label>
+								<span>ICE transport</span>
+								<select id="policy" .value=${c.iceTransportPolicy ?? "all"}>
+									<option value="all">All routes (direct when possible)</option>
+									<option value="relay" ?selected=${c.iceTransportPolicy === "relay"}>
+										Relay only (TURN required, hides IP addresses)
+									</option>
+								</select>
+							</label>
+							${this.issues.length ? html`<ul class="issues">
+											${this.issues.map((i) => html`<li>${i}</li>`)}
+										</ul>` : nothing}
+							<div class="actions">
+								<button type="button" @click=${this.close}>Cancel</button>
+								<button type="submit" class="primary">Apply and reconnect</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</dialog>
+		`;
+  }
+};
+function defineTeamsSettings(registry = globalThis.customElements) {
+  if (!registry) return;
+  defineSwitch(registry);
+  if (!registry.get("teams-settings")) registry.define("teams-settings", TeamsSettings);
+}
+var safeStorage = {
+  getItem(key) {
+    try {
+      return globalThis.localStorage?.getItem(key) ?? null;
+    } catch {
+      return null;
+    }
+  },
+  setItem(key, value) {
+    try {
+      globalThis.localStorage?.setItem(key, value);
+    } catch {
+    }
+  }
+};
+function loadIdentity() {
+  try {
+    const raw = JSON.parse(safeStorage.getItem("teams:identity") ?? "null");
+    if (raw && typeof raw.id === "string" && typeof raw.name === "string" && raw.name.trim())
+      return { id: raw.id, name: raw.name };
+  } catch {
+  }
+  return null;
+}
+var saveIdentity = (identity) => safeStorage.setItem("teams:identity", JSON.stringify(identity));
+function loadConfig() {
+  const raw = safeStorage.getItem("teams:config");
+  if (!raw) return null;
+  try {
+    return parseServerConfig(JSON.parse(raw)).config;
+  } catch {
+    return null;
+  }
+}
+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.navigation-toggle {\n	display: none;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n}\n.navigation-toggle:hover {\n	background: var(--office-selected);\n}\n.navigation-toggle svg {\n	width: 1.3em;\n	height: 1.3em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\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@media (max-width: 56.25em) {\n	.navigation-toggle {\n		display: inline-flex;\n	}\n	.brand > .logo,\n	.brand > span:last-child {\n		display: none;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n	}\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.body > .main {\n		grid-column: 2;\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\n	}\n}\n";
+function threadPane(state, client, openFile, close) {
+  const thread = state.thread;
+  if (!thread) return nothing;
+  return html`<aside class="thread-pane" aria-label="Thread">
+		<header class="thread-head">
+			<h2 tabindex="-1" data-thread-heading>Thread</h2>
+			<button
+				type="button"
+				@click=${() => client.followThread(state.selectedChannelId, thread.root.id, !state.threadFollowed)}
+			>
+				${state.threadFollowed ? "Unfollow thread" : "Follow thread"}
+			</button>
+			<button type="button" @click=${close}>Close thread</button>
+		</header>
+		<office-ui-chat-list
+			.messages=${[thread.root, ...thread.replies]}
+			self-id=${state.user.id}
+			@office-chat-react=${(e) => client.toggleReaction(e.detail.messageId, e.detail.emoji)}
+			@office-chat-reply=${(e) => client.startReply(e.detail.messageId)}
+			@office-chat-edit=${(e) => client.startEdit(e.detail.messageId)}
+			@office-chat-delete=${(e) => globalThis.confirm?.("Delete this message?") !== false && client.deleteMessage(e.detail.messageId)}
+			@office-chat-open-file=${(e) => openFile(e.detail.attachment)}
+		></office-ui-chat-list>
+		<office-ui-chat-composer
+			.typing=${state.typing}
+			.replyingTo=${state.replyingTo?.authorName ?? null}
+			.editing=${state.editing !== null}
+			.value=${state.draft.text}
+			.files=${state.draft.files}
+			.missingFiles=${state.draft.missingFiles}
+			@office-chat-draft=${(e) => client.setDraft(e.detail)}
+			placeholder="Reply in thread"
+			@office-chat-typing=${() => client.notifyTyping()}
+			@office-chat-cancel=${() => client.cancelCompose()}
+			@office-chat-send=${(e) => {
+    const current = client.getState();
+    if (!current.editing && !current.replyingTo) client.startReply(thread.root.id);
+    void client.send(e.detail);
+  }}
+		></office-ui-chat-composer>
+	</aside>`;
+}
+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>
+		<fieldset>
+			<legend>Automatically follow</legend>
+			<label
+				><input
+					type="checkbox"
+					.checked=${state.threadFollowSettings.started}
+					@change=${(event) => client.setThreadFollowSettings({ started: event.target.checked })}
+				/>
+				Threads I start</label
+			>
+			<label
+				><input
+					type="checkbox"
+					.checked=${state.threadFollowSettings.replied}
+					@change=${(event) => client.setThreadFollowSettings({ replied: event.target.checked })}
+				/>
+				Threads I reply to</label
+			>
+		</fieldset>
+		<label
+			><input
+				type="checkbox"
+				.checked=${unreadOnly}
+				@change=${(event) => filter(event.target.checked)}
+			/>
+			Unread only</label
+		>
+		<ul>
+			${threads.length ? threads.map(
+    (thread) => html`<li data-unread=${String(thread.unread > 0)}>
+								<button
+									type="button"
+									@click=${() => open(thread)}
+									aria-label=${`Open thread in ${thread.channelName}: ${thread.root.deleted ? "Deleted message" : thread.root.text}`}
+								>
+									<strong># ${thread.channelName}</strong
+									><span
+										>${thread.root.deleted ? "This message was deleted" : thread.root.text || "Shared file"}</span
+									>
+									<small
+										>${thread.replyCount} ${thread.replyCount === 1 ? "reply" : "replies"} ·
+										${new Date(thread.updatedAt).toLocaleString()}</small
+									></button
+								><span>${thread.unread > 0 ? `${thread.unread} unread` : "Read"}</span
+								><button
+									type="button"
+									@click=${() => client.markThreadRead(thread.channelId, thread.root.id, thread.unread > 0)}
+								>
+									${thread.unread > 0 ? "Mark as read" : "Mark as unread"}</button
+								><button
+									type="button"
+									@click=${() => client.followThread(thread.channelId, thread.root.id, false)}
+								>
+									Unfollow thread
+								</button>
+							</li>`
+  ) : html`<li>
+							${unreadOnly ? "No unread followed threads." : "No followed threads yet. Open a thread and choose Follow thread."}
+						</li>`}
+		</ul>
+	</section>`;
+}
+function draftList(state, client, open) {
+  return html`<section class="followed-threads" aria-label="Drafts">
+		<h1>Drafts</h1>
+		<p>Unsent messages on this device. After reloading, draft attachments must be reattached.</p>
+		<ul>
+			${state.drafts.length ? state.drafts.map((draft) => {
+    const channel = state.channels.find((item) => item.id === draft.context.channelId);
+    return html`<li>
+								<button
+									type="button"
+									aria-label=${`Resume draft in ${channel.name}: ${draft.text.slice(0, 80) || "Attachments"}`}
+									@click=${() => open(draft.context)}
+								>
+									<strong># ${channel.name}</strong><span>${draft.text || "Attachments"}</span
+									><small
+										>${draft.context.editId ? "Edit" : draft.context.threadId ? "Thread reply" : "New post"}
+										· ${draft.files.length + draft.missingFiles.length} attachments</small
+									></button
+								><button
+									type="button"
+									@click=${() => {
+      if (globalThis.confirm?.("Discard this unsent draft?") !== false)
+        client.discardDraft(draft.context);
+    }}
+								>
+									Discard draft
+								</button>
+							</li>`;
+  }) : html`<li>No unsent drafts.</li>`}
+		</ul>
+	</section>`;
+}
+var MARKER = "openteams-file";
+function filePopoutUrl(detail, pageUrl) {
+  const url = contentUrl(detail.url, pageUrl);
+  const attachment = sanitizeAttachment(detail.attachment);
+  if (!url || !attachment) return null;
+  const page = new URL(pageUrl);
+  page.searchParams.set(MARKER, "1");
+  page.hash = encodeURIComponent(JSON.stringify({ attachment, url }));
+  if (page.hash.length > 32768) return null;
+  return page.href;
+}
+function filePopoutDetail(pageUrl) {
+  try {
+    const page = new URL(pageUrl);
+    if (page.searchParams.get(MARKER) !== "1" || page.hash.length > 32768) return null;
+    const raw = JSON.parse(decodeURIComponent(page.hash.slice(1)));
+    const attachment = sanitizeAttachment(raw.attachment);
+    const url = contentUrl(typeof raw.url === "string" ? raw.url : void 0, pageUrl);
+    return attachment && url ? { attachment, url } : null;
+  } catch {
+    return null;
+  }
+}
+function messageTransfers(state, client) {
+  return state.messageTransfers.filter((transfer) => transfer.context.channelId === state.selectedChannelId).map(
+    (transfer) => html`<div class="message-transfer" role="status">
+					<span
+						>${`${transfer.context.threadId || transfer.context.replyTo ? "Sending thread reply" : "Sending channel post"}: ${transfer.progress.fileName}. ${transfer.progress.completed} of ${transfer.progress.total} files uploaded`}</span
+					><progress
+						aria-label="Message file progress"
+						max=${transfer.progress.total}
+						value=${transfer.progress.completed}
+					></progress
+					><button type="button" @click=${() => client.cancelSend(transfer.id)}>
+						Cancel message send
+					</button>
+				</div>`
+  );
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/profile-menu.css?raw
+var profile_menu_default = ":host {\n	display: inline-flex;\n	font: inherit;\n	color: inherit;\n}\n.profile {\n	display: inline-flex;\n	align-items: center;\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	cursor: pointer;\n}\n.profile:hover {\n	background: var(--office-selected);\n}\n[popover] {\n	min-width: 20em;\n	max-width: 90vw;\n	padding: 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-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-teams);\n}\n.identity {\n	display: flex;\n	gap: var(--office-space-3);\n	align-items: center;\n	margin-bottom: var(--office-space-4);\n}\n.identity strong {\n	overflow-wrap: anywhere;\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n}\nselect {\n	font: inherit;\n	padding: var(--office-space-2);\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}\n.connection {\n	color: var(--office-teams-text-subtle);\n	margin-bottom: 0;\n	font-size: var(--office-font-size-sm);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
+
+// src/teams/app/profile-menu.ts
+var AVAILABILITY = ["available", "busy", "away"];
+var TeamsProfileMenu = class extends LitElement {
+  static styles = unsafeCSS(profile_menu_default);
+  static properties = { state: { attribute: false }, open: { state: true } };
+  constructor() {
+    super();
+    this.state = null;
+    this.open = false;
+  }
+  willUpdate(changed) {
+    const old = changed.get("state");
+    if (old && old.user.id !== this.state?.user.id)
+      this.renderRoot.querySelector("[popover]")?.hidePopover();
+  }
+  toggle() {
+    const panel = this.renderRoot.querySelector("[popover]");
+    if (toggleAnchoredPopover(panel, this.renderRoot.querySelector("button")))
+      panel.querySelector("select")?.focus();
+  }
+  render() {
+    const state = this.state;
+    if (!state) return nothing;
+    return html`<button
+				type="button"
+				class="profile"
+				aria-label=${`Profile for ${state.user.name}`}
+				aria-expanded=${String(this.open)}
+				aria-haspopup="dialog"
+				aria-controls="profile"
+				@click=${this.toggle}
+			>
+				<office-ui-avatar
+					name=${state.user.name}
+					seed=${state.user.id}
+					presence=${state.availability}
+				></office-ui-avatar>
+			</button>
+			<div
+				id="profile"
+				popover="auto"
+				role="dialog"
+				aria-label="Your profile"
+				@keydown=${(event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      this.renderRoot.querySelector("[popover]")?.hidePopover();
+      this.renderRoot.querySelector("button")?.focus();
+    }}
+				@toggle=${() => {
+      const panel = this.renderRoot.querySelector("[popover]");
+      this.open = panel.matches(":popover-open");
+      if (!this.open && panel.contains(this.shadowRoot?.activeElement ?? null))
+        this.renderRoot.querySelector("button")?.focus();
+    }}
+			>
+				<div class="identity">
+					<office-ui-avatar
+						size="lg"
+						name=${state.user.name}
+						seed=${state.user.id}
+						presence=${state.availability}
+					></office-ui-avatar
+					><strong>${state.user.name}</strong>
+				</div>
+				<label
+					>Availability<select
+						.value=${state.availability}
+						@change=${(event) => {
+      const availability = event.target.value;
+      if (AVAILABILITY.some((value) => value === availability))
+        this.dispatchEvent(
+          new CustomEvent("teams-profile-status", {
+            detail: { availability },
+            bubbles: true,
+            composed: true
+          })
+        );
+    }}
+					>
+						${AVAILABILITY.map((value) => html`<option value=${value} ?selected=${state.availability === value}>${value[0].toUpperCase() + value.slice(1)}</option>`)}
+					</select></label
+				>
+				<p class="connection">
+					${state.mode === "local" ? "Local workspace" : "Workspace server"}: ${state.status}
+				</p>
+			</div>`;
+  }
+};
+function defineTeamsProfileMenu() {
+  if (!customElements.get("teams-profile-menu"))
+    customElements.define("teams-profile-menu", TeamsProfileMenu);
+}
+
+// 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";
+
+// src/teams/app/add-tab-dialog.ts
+var APPS = [
+  { id: "docx", label: "Word", kind: "docx", letter: "W" },
+  { id: "xlsx", label: "Excel", kind: "xlsx", letter: "X" },
+  { id: "pptx", label: "PowerPoint", kind: "pptx", letter: "P" },
+  { id: "vsdx", label: "Visio", kind: "vsdx", letter: "V" },
+  { id: "markdown", label: "Markdown", kind: "markdown", letter: "M" },
+  { id: "site", label: "Static site", kind: "website", letter: "H" },
+  { id: "text", label: "Text", kind: "text", letter: "T" },
+  { id: "website", label: "Website", kind: null, letter: "\u2197" }
+];
+var fileKey2 = (file) => JSON.stringify([file.messageId, file.name, file.url]);
+var TeamsAddTabDialog = class extends LitElement {
+  static styles = unsafeCSS(add_tab_dialog_default);
+  static properties = {
+    open: { type: Boolean },
+    client: { attribute: false },
+    channelId: { attribute: false },
+    channelName: { attribute: false },
+    files: { attribute: false },
+    add: { attribute: false },
+    app: { state: true },
+    query: { state: true },
+    selectedKey: { state: true },
+    name: { state: true },
+    url: { state: true },
+    error: { state: true },
+    postToChannel: { state: true }
+  };
+  owner = null;
+  context = "";
+  contextName = "";
+  constructor() {
+    super();
+    this.open = false;
+    this.client = null;
+    this.channelId = "";
+    this.channelName = "";
+    this.files = [];
+    this.add = null;
+    this.app = null;
+    this.query = "";
+    this.selectedKey = "";
+    this.name = "";
+    this.url = "";
+    this.error = "";
+    this.postToChannel = true;
+  }
+  willUpdate(changed) {
+    if (changed.has("open") && this.open) {
+      this.owner = this.client;
+      this.context = this.channelId;
+      this.contextName = this.channelName;
+      this.app = null;
+      this.query = "";
+      this.selectedKey = "";
+      this.name = "";
+      this.url = "";
+      this.error = "";
+      this.postToChannel = true;
+    }
+  }
+  updated(changed) {
+    const dialog = this.renderRoot.querySelector("dialog");
+    if (this.open && !dialog.open) dialog.showModal();
+    else if (!this.open && dialog.open) dialog.close();
+    if (changed.has("app") && this.open)
+      this.renderRoot.querySelector(this.app ? "[data-configure]" : "[data-first-app]")?.focus();
+  }
+  close() {
+    this.dispatchEvent(new CustomEvent("teams-add-tab-close", { bubbles: true, composed: true }));
+  }
+  get current() {
+    return !!this.owner && this.owner === this.client && this.context === this.channelId && this.owner.getState().selectedChannelId === this.context && this.owner.getState().channels.some((channel) => channel.id === this.context);
+  }
+  eligible(kind) {
+    return this.files.filter(
+      (file) => detectContentKind(file.name, file.mime) === kind && !!contentUrl(file.url, this.ownerDocument.baseURI)
+    );
+  }
+  get selected() {
+    const app = APPS.find((entry) => entry.id === this.app);
+    return app?.kind ? this.eligible(app.kind).find((file) => fileKey2(file) === this.selectedKey) : void 0;
+  }
+  availableLabel(kind) {
+    const count = this.eligible(kind).length;
+    return `${count} shared ${count === 1 ? "file" : "files"}`;
+  }
+  choose(app) {
+    this.app = app;
+    this.query = "";
+    this.selectedKey = "";
+    this.name = "";
+    this.url = "";
+    this.error = "";
+  }
+  submit(event) {
+    event.preventDefault();
+    this.error = "";
+    if (!this.current || !this.owner || !this.add) {
+      this.error = "The channel changed. Close this dialog and try again.";
+      return;
+    }
+    if (this.app === "website" && !contentUrl(this.url, this.ownerDocument.baseURI)) {
+      this.error = "Enter a valid http or https website URL.";
+      return;
+    }
+    const content = this.app === "website" ? { type: "website", url: this.url } : this.selected ? { type: "file", attachment: this.selected } : null;
+    if (!content) {
+      this.error = "Choose a file shared in this channel.";
+      return;
+    }
+    const result = this.add(this.name, content, this.context, this.owner, this.postToChannel);
+    if (!result) this.error = "Enter a tab name and valid content.";
+  }
+  render() {
+    const app = APPS.find((entry) => entry.id === this.app);
+    const files = app?.kind ? filterFiles(this.eligible(app.kind), this.query) : [];
+    return html`<dialog aria-label="Add a tab" @cancel=${this.close} @close=${this.close}>
+			<header>
+				<h1>Add a tab</h1>
+				<button type="button" aria-label="Close add tab" @click=${this.close}>×</button>
+			</header>
+			${!app ? html`<section>
+							<h2>Choose an app</h2>
+							<p>Pin content to # ${this.contextName} so everyone in the channel can find it.</p>
+							<div class="apps">
+								${APPS.map(
+      (entry, index) => html`<button
+										type="button"
+										class="app"
+										aria-label=${`Choose ${entry.label}`}
+										?data-first-app=${index === 0}
+										?autofocus=${index === 0}
+										@click=${() => this.choose(entry.id)}
+									>
+										<span class="badge" data-kind=${entry.kind ?? "other"}>${entry.letter}</span
+										><strong>${entry.label}</strong>
+										<small
+											>${entry.kind ? this.availableLabel(entry.kind) : "Add a web address"}</small
+										>
+									</button>`
+    )}
+							</div>
+							<p class="hint">File tabs use files already shared in this channel.</p>
+						</section>` : html`<form @submit=${this.submit}>
+							<div class="app-heading">
+								<span class="badge" data-kind=${app.kind ?? "other"}>${app.letter}</span>
+								<h2>${app.label}</h2>
+								<button
+									type="button"
+									@click=${() => {
+      this.app = null;
+      this.error = "";
+    }}
+								>
+									Back
+								</button>
+							</div>
+							<label
+								>Tab name<input
+									data-configure
+									name="name"
+									maxlength="80"
+									required
+									.value=${this.name}
+									@input=${(event) => {
+      this.name = event.target.value;
+      this.error = "";
+    }}
+							/></label>
+							${!app.kind ? html`<label
+												>Tab website URL<input
+													type="url"
+													required
+													maxlength="2048"
+													placeholder="https://example.com"
+													.value=${this.url}
+													@input=${(event) => {
+      this.url = event.target.value;
+      this.error = "";
+    }}
+											/></label>
+											<p class="hint">
+												Some websites block embedding. Their link remains available from the
+												preview.
+											</p>` : html`<label
+												>Search shared files<input
+													type="search"
+													.value=${this.query}
+													@input=${(event) => this.query = event.target.value}
+											/></label>
+											<fieldset class="files">
+												<legend>Choose a file</legend>
+												${files.map(
+      (file) => html`<label class="file"
+															><input
+																type="radio"
+																name="shared-file"
+																.value=${fileKey2(file)}
+																.checked=${this.selectedKey === fileKey2(file)}
+																@change=${() => {
+        this.selectedKey = fileKey2(file);
+        this.name = file.name;
+        this.error = "";
+      }}
+															/><span
+																><strong>${file.name}</strong
+																><small>Shared by ${file.author}</small></span
+															></label
+														>`
+    )}
+												${files.length ? nothing : html`<p class="hint">${this.query ? "No matching files." : `No ${app.label} files are shared in this channel. Upload a file from Shared first.`}</p>`}
+											</fieldset>
+											${this.selected ? html`<p class="hint">Selected: ${this.selected.name}</p>` : this.selectedKey ? html`<p role="alert">This file is no longer shared in this channel.</p>` : nothing}`}
+							${!this.current ? html`<p role="alert">The channel changed. Close this dialog and try again.</p>` : nothing}
+							${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
+							<label class="post-choice"
+								><input
+									type="checkbox"
+									.checked=${this.postToChannel}
+									@change=${(event) => this.postToChannel = event.target.checked}
+								/>Post to the channel about this tab</label
+							>
+							<footer>
+								<button type="button" @click=${this.close}>Cancel</button
+								><button
+									type="submit"
+									class="primary"
+									?disabled=${!this.current || !this.name.trim() || (app.kind ? !this.selected : !this.url.trim())}
+								>
+									Save
+								</button>
+							</footer>
+						</form>`}
+		</dialog>`;
+  }
+};
+function defineTeamsAddTabDialog() {
+  if (!customElements.get("teams-add-tab-dialog"))
+    customElements.define("teams-add-tab-dialog", TeamsAddTabDialog);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/navigation-drawer.css?raw
+var navigation_drawer_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	inset: 0 auto 0 0;\n	margin: 0;\n	width: min(24em, 92vw);\n	max-width: 92vw;\n	height: 100dvh;\n	max-height: 100dvh;\n	padding: 0;\n	border: 0;\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog[open] {\n	display: flex;\n	flex-direction: column;\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3) var(--office-space-4);\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}\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	font: inherit;\n	background: var(--office-background);\n	color: inherit;\n	cursor: pointer;\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nnav {\n	flex: 1;\n	min-height: 0;\n	overflow: auto;\n	overscroll-behavior: contain;\n}\n";
+
+// src/dialog/focus.ts
+var MODAL_FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isAvailable(element) {
+  if (element.hidden || element.getAttribute("aria-hidden") === "true") {
+    return false;
+  }
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  return style?.display !== "none" && style?.visibility !== "hidden";
+}
+function focusableElements(root, found = []) {
+  for (const child of Array.from(root.children)) {
+    if (child instanceof HTMLElement) {
+      if (!isAvailable(child)) continue;
+      if (child.matches(MODAL_FOCUSABLE_SELECTOR) && isAvailable(child)) {
+        found.push(child);
+      }
+      if (child.shadowRoot && isAvailable(child)) {
+        focusableElements(child.shadowRoot, found);
+      }
+    }
+    focusableElements(child, found);
+  }
+  return found;
+}
+function deepActiveElement(doc) {
+  let active = doc.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active;
+}
+function modalFocusableElements(panel) {
+  return focusableElements(panel);
+}
+function modalActiveElement(doc) {
+  return deepActiveElement(doc);
+}
+
+// src/teams/app/navigation-drawer.ts
+var TeamsNavigationDrawer = class extends LitElement {
+  static styles = unsafeCSS(navigation_drawer_default);
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    heading: { type: String }
+  };
+  compact;
+  resized = () => {
+    if (this.open && !this.compact?.matches) this.close();
+  };
+  constructor() {
+    super();
+    this.open = false;
+    this.heading = "Teams and channels";
+    this.addEventListener("keydown", (event) => this.trapTab(event));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.compact = globalThis.matchMedia?.("(max-width: 56.25em)");
+    this.compact?.addEventListener("change", this.resized);
+  }
+  disconnectedCallback() {
+    this.compact?.removeEventListener("change", this.resized);
+    super.disconnectedCallback();
+  }
+  updated() {
+    const dialog = this.renderRoot.querySelector("dialog");
+    if (this.open && !dialog.open) dialog.showModal();
+    else if (!this.open && dialog.open) dialog.close();
+  }
+  trapTab(event) {
+    if (!this.open || event.key !== "Tab") return;
+    const close = this.renderRoot.querySelector("button");
+    const stops = [close, ...modalFocusableElements(this)];
+    const current = modalActiveElement(this.ownerDocument);
+    const index = stops.findIndex((element) => element === current);
+    if (index < 0 || (event.shiftKey ? index === 0 : index === stops.length - 1)) {
+      event.preventDefault();
+      stops[event.shiftKey ? stops.length - 1 : 0]?.focus();
+    }
+  }
+  close() {
+    this.dispatchEvent(
+      new CustomEvent("teams-navigation-close", { bubbles: true, composed: true })
+    );
+  }
+  render() {
+    return html`<dialog
+			aria-label="Workspace navigation"
+			@click=${(event) => {
+      const dialog = event.currentTarget;
+      const rect = dialog.getBoundingClientRect();
+      if (event.target === dialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom))
+        this.close();
+    }}
+			@cancel=${(event) => {
+      event.preventDefault();
+      this.close();
+    }}
+		>
+			<header>
+				<h2>${this.heading}</h2>
+				<button type="button" aria-label="Close navigation" @click=${this.close}>×</button>
+			</header>
+			<nav aria-label="Workspace channels and calls"><slot></slot></nav>
+		</dialog>`;
+  }
+};
+function defineTeamsNavigationDrawer(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-navigation-drawer"))
+    registry.define("teams-navigation-drawer", TeamsNavigationDrawer);
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/create-channel-dialog.css?raw
+var create_channel_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(40em, 94vw);\n	max-height: 90dvh;\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}\nheader {\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	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	font-weight: var(--office-font-weight-bold);\n}\ninput,\ntextarea {\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	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}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
+
+// src/teams/app/create-channel-dialog.ts
+var TeamsCreateChannelDialog = class extends LitElement {
+  static styles = unsafeCSS(create_channel_dialog_default);
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    create: { attribute: false },
+    name: { state: true },
+    description: { state: true },
+    issue: { state: true }
+  };
+  constructor() {
+    super();
+    this.open = false;
+    this.create = void 0;
+    this.name = "";
+    this.description = "";
+    this.issue = "";
+  }
+  willUpdate(changed) {
+    if (changed.has("open") && this.open) {
+      this.name = "";
+      this.description = "";
+      this.issue = "";
+    }
+  }
+  updated() {
+    const dialog = this.renderRoot.querySelector("dialog");
+    if (this.open && !dialog.open) dialog.showModal();
+    else if (!this.open && dialog.open) dialog.close();
+  }
+  close() {
+    this.dispatchEvent(
+      new CustomEvent("teams-create-channel-close", { bubbles: true, composed: true })
+    );
+  }
+  submit(event) {
+    event.preventDefault();
+    const name = sanitizeChannelName(this.name);
+    if (!name) {
+      this.issue = "Enter a channel name.";
+      this.renderRoot.querySelector("input")?.focus();
+      return;
+    }
+    if (!this.create?.(name, this.description))
+      this.issue = "The channel was not created. Your details are kept here.";
+  }
+  render() {
+    return html`<dialog
+			aria-labelledby="title"
+			@cancel=${(event) => {
+      event.preventDefault();
+      this.close();
+    }}
+		>
+			<header>
+				<h2 id="title">Create a channel</h2>
+				<button type="button" aria-label="Close create channel" @click=${this.close}>×</button>
+			</header>
+			<form @submit=${this.submit}>
+				<label
+					>Channel name<input
+						autofocus
+						maxlength=${MAX_CHANNEL_NAME_CHARS}
+						.value=${this.name}
+						@input=${(event) => {
+      this.name = event.target.value;
+      this.issue = "";
+    }}
+						placeholder="Give your channel a name"
+						aria-describedby="channel-name-help"
+				/></label>
+				<small id="channel-name-help">${MAX_CHANNEL_NAME_CHARS} characters maximum.</small>
+				<label
+					>Description (optional)<textarea
+						maxlength=${MAX_CHANNEL_TOPIC_CHARS}
+						.value=${this.description}
+						@input=${(event) => this.description = event.target.value}
+						placeholder="Help others understand what this channel is for"
+					></textarea>
+				</label>
+				<div>
+					<strong>Standard channel</strong>
+					<p>
+						Available to everyone in this workspace. Private and shared channels are not available
+						yet.
+					</p>
+				</div>
+				${this.issue ? html`<p class="issue" role="alert">${this.issue}</p>` : nothing}
+				<footer>
+					<button type="button" @click=${this.close}>Cancel</button
+					><button type="submit" class="primary">Create</button>
+				</footer>
+			</form>
+		</dialog>`;
+  }
+};
+function defineTeamsCreateChannelDialog(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-create-channel-dialog"))
+    registry.define("teams-create-channel-dialog", TeamsCreateChannelDialog);
+}
+
+// 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: "teams", label: "Teams", icon: "users" },
+  { id: "calls", label: "Calls", icon: "phone" },
+  { id: "files", label: "Files", icon: "folder" },
+  { id: "followed", label: "Followed threads", icon: "chat" },
+  { id: "drafts", label: "Drafts", icon: "chat" }
+];
+var TeamsApp = class extends LitElement {
+  static styles = [unsafeCSS(LOCAL_THEME), unsafeCSS(teams_app_default)];
+  static properties = {
+    workspaceId: { type: String, attribute: "workspace-id" },
+    userName: { type: String, attribute: "user-name" },
+    userId: { type: String, attribute: "user-id" },
+    serverConfig: { type: String, attribute: "server-config" },
+    config: { attribute: false },
+    uploadFile: { attribute: false },
+    openers: { attribute: false },
+    embeds: { attribute: false },
+    preview: { state: true },
+    addingTab: { state: true },
+    creatingChannel: { state: true },
+    rail: { state: true },
+    tab: { state: true },
+    panel: { state: true },
+    meeting: { state: true },
+    settingsOpen: { state: true },
+    navigationOpen: { state: true },
+    toast: { state: true },
+    identity: { state: true },
+    followedUnreadOnly: { state: true },
+    theme: { state: true },
+    fileOpenPreference: { state: true },
+    chatDensity: { state: true },
+    showAppNames: { state: true }
+  };
+  teams = new TeamsController(this, (text) => this.notify(text));
+  toastTimer;
+  openRequest = 0;
+  retainedTab;
+  themeStorageKey = "";
+  popoutRequested = new URL(globalThis.location?.href ?? "https://workspace.invalid").searchParams.get(
+    "openteams-file"
+  ) === "1";
+  popout = filePopoutDetail(
+    globalThis.location?.href ?? "https://workspace.invalid"
+  );
+  constructor() {
+    super();
+    this.workspaceId = "demo";
+    this.userName = "";
+    this.userId = "";
+    this.serverConfig = "";
+    this.config = null;
+    this.uploadFile = void 0;
+    this.openers = {};
+    this.embeds = {};
+    this.preview = null;
+    this.retainedTab = void 0;
+    this.addingTab = false;
+    this.creatingChannel = false;
+    this.rail = "teams";
+    this.tab = "posts";
+    this.panel = "";
+    this.meeting = false;
+    this.settingsOpen = false;
+    this.navigationOpen = false;
+    this.toast = "";
+    this.identity = null;
+    this.followedUnreadOnly = false;
+    this.theme = "system";
+    this.fileOpenPreference = "teams";
+    this.chatDensity = "comfy";
+    this.showAppNames = true;
+  }
+  /** The core client behind this element, for hosts that want the raw actions. */
+  get client() {
+    return this.teams.client;
+  }
+  connectedCallback() {
+    installOfficeUiTheme();
+    registerControls();
+    definePresence();
+    registerTeams();
+    defineTeamsSettings();
+    defineTeamsContentPreview();
+    defineTeamsChannelTab();
+    defineTeamsFilesPanel();
+    defineTeamsProfileMenu();
+    defineTeamsAddTabDialog();
+    defineTeamsNavigationDrawer();
+    defineTeamsCreateChannelDialog();
+    super.connectedCallback();
+  }
+  // ---- lifecycle --------------------------------------------------------------------------
+  resolveConfig() {
+    if (this.config) return this.config;
+    if (this.serverConfig) {
+      try {
+        return parseServerConfig(JSON.parse(this.serverConfig)).config;
+      } catch {
+      }
+    }
+    return loadConfig() ?? parseServerConfig({}).config;
+  }
+  willUpdate(changed) {
+    if (this.popoutRequested) return;
+    const restart = [
+      "workspaceId",
+      "userName",
+      "userId",
+      "serverConfig",
+      "config",
+      "identity"
+    ].some((k) => changed.has(k));
+    if (!restart && this.teams.client) return;
+    this.preview = null;
+    this.tab = "posts";
+    this.addingTab = false;
+    this.creatingChannel = false;
+    this.navigationOpen = false;
+    this.settingsOpen = false;
+    this.openRequest++;
+    const named = this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : this.identity ?? loadIdentity();
+    if (this.userName && !this.userId) saveIdentity(named);
+    if (!named) return this.teams.stop();
+    const workspaceId = /^[\w-]{1,100}$/u.test(this.workspaceId) ? this.workspaceId : "demo";
+    this.themeStorageKey = `teams:theme:${encodeURIComponent(workspaceId)}:${encodeURIComponent(named.id)}`;
+    const rememberedTheme = safeStorage.getItem(this.themeStorageKey);
+    this.theme = rememberedTheme === "dark" || rememberedTheme === "light" ? rememberedTheme : "system";
+    this.applyTheme();
+    this.showAppNames = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:app-names:")) !== "false";
+    this.chatDensity = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:density:")) === "compact" ? "compact" : "comfy";
+    this.fileOpenPreference = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:file-open:")) === "browser" ? "browser" : "teams";
+    this.teams.start({
+      workspaceId,
+      user: named,
+      config: this.resolveConfig(),
+      storage: safeStorage,
+      ...this.uploadFile ? { uploadFile: this.uploadFile } : {}
+    });
+    this.dispatchEvent(
+      new CustomEvent("teams-ready", { detail: { user: named }, bubbles: true, composed: true })
+    );
+  }
+  updated() {
+    this.setAttribute("data-chat-density", this.chatDensity);
+    const state = this.teams.state;
+    if (state?.thread && document.visibilityState === "visible" && this.renderRoot.querySelector(".thread-pane"))
+      this.teams.client?.markThreadRead(state.selectedChannelId, state.thread.root.id);
+  }
+  notify(text) {
+    this.toast = text;
+    clearTimeout(this.toastTimer);
+    this.toastTimer = setTimeout(() => this.toast = "", 4e3);
+  }
+  // ---- intent -> client actions -----------------------------------------------------------
+  async openFile(a, mode) {
+    if (!this.canLeaveContent()) return;
+    const browser = mode === "browser" || !mode && a.kind !== "other" && a.kind !== "vsdx" && this.fileOpenPreference === "browser";
+    const popout = browser ? globalThis.open("about:blank", "_blank") : null;
+    if (popout) popout.opener = null;
+    const request = ++this.openRequest;
+    const channelId = a.channelId ?? this.teams.state?.selectedChannelId;
+    const url = await this.teams.client?.fileUrl(a);
+    if (request !== this.openRequest || !this.isConnected) {
+      popout?.close();
+      return;
+    }
+    if (!this.canLeaveContent()) {
+      popout?.close();
+      return;
+    }
+    const detail = { attachment: a, url, ...channelId ? { channelId } : {} };
+    if (!this.dispatchEvent(
+      new CustomEvent("teams-open-file", {
+        detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    )) {
+      popout?.close();
+      return;
+    }
+    const opener = this.openers[a.kind];
+    if (opener) {
+      popout?.close();
+      return opener(detail);
+    }
+    if (browser && url) {
+      const target = filePopoutUrl(detail, this.ownerDocument.location.href);
+      if (popout && target) {
+        popout.location.replace(target);
+        return;
+      }
+      popout?.close();
+      this.notify("Allow popups to open this file in a browser tab");
+      return;
+    }
+    popout?.close();
+    if (url) this.preview = detail;
+    else this.notify("This file was shared by name only");
+  }
+  /** Preview a host-provided website or file without changing shared conversation state. */
+  previewContent(detail) {
+    if (!this.canLeaveContent()) return;
+    this.openRequest++;
+    this.preview = detail;
+  }
+  canLeaveContent() {
+    const direct = this.shadowRoot?.querySelector(
+      "teams-content-preview"
+    );
+    const nested = this.shadowRoot?.querySelector("teams-channel-tab")?.shadowRoot?.querySelector("teams-content-preview");
+    return (direct ?? nested)?.canLeave() ?? true;
+  }
+  closePreview() {
+    if (!this.canLeaveContent()) return false;
+    this.openRequest++;
+    this.preview = null;
+    return true;
+  }
+  disconnectedCallback() {
+    this.openRequest++;
+    this.preview = null;
+    clearTimeout(this.toastTimer);
+    super.disconnectedCallback();
+  }
+  createChannel() {
+    this.creatingChannel = true;
+  }
+  commitChannel(name, description, client) {
+    if (!this.creatingChannel || !client || client !== this.client || !this.closePreview())
+      return false;
+    client.createChannel(name, description);
+    this.creatingChannel = false;
+    this.tab = "posts";
+    this.rail = "teams";
+    this.meeting = false;
+    void this.closeNavigation(true);
+    void this.focusCreatedChannel();
+    return true;
+  }
+  async focusCreatedChannel() {
+    await this.updateComplete;
+    await this.renderRoot.querySelector("teams-create-channel-dialog")?.updateComplete;
+    const heading = this.renderRoot.querySelector("main h1");
+    if (heading && !this.creatingChannel) {
+      heading.tabIndex = -1;
+      heading.focus();
+    }
+  }
+  onCallAction(action) {
+    const c = this.teams.client;
+    if (!c) return;
+    if (action === "chat" || action === "people") this.panel = this.panel === action ? "" : action;
+    else if (action === "leave") {
+      this.meeting = false;
+      this.panel = "";
+      c.leaveCall();
+    } else if (action === "mic") c.toggleMic();
+    else if (action === "camera") void c.toggleCamera();
+    else if (action === "screen") void c.toggleScreenShare();
+    else if (action === "hand") c.toggleHand();
+  }
+  startMeeting(channelId) {
+    if (!this.closePreview()) return;
+    void this.teams.client?.openCall(channelId);
+    void this.closeNavigation(true);
+    this.meeting = true;
+    this.rail = "teams";
+  }
+  selectChannel(id) {
+    if (!this.closePreview()) return false;
+    this.settingsOpen = false;
+    this.addingTab = false;
+    this.creatingChannel = false;
+    this.teams.client?.select(id);
+    this.teams.client?.search("");
+    this.meeting = false;
+    this.tab = "posts";
+    this.rail = "teams";
+    void this.closeNavigation(true);
+    return true;
+  }
+  async closeNavigation(navigated = false) {
+    if (!this.navigationOpen) return;
+    this.navigationOpen = false;
+    await this.updateComplete;
+    const drawer = this.renderRoot.querySelector("teams-navigation-drawer");
+    await drawer?.updateComplete;
+    if (this.navigationOpen || !this.isConnected) return;
+    const trigger = this.renderRoot.querySelector("[data-open-navigation]");
+    const heading = this.renderRoot.querySelector("main h1") ?? this.renderRoot.querySelector("main");
+    if (!navigated && trigger?.getClientRects().length) trigger.focus();
+    else if (heading) {
+      heading.tabIndex = -1;
+      heading.focus();
+    }
+  }
+  askSettings() {
+    this.navigationOpen = false;
+    this.settingsOpen = true;
+  }
+  async closeSettings() {
+    this.settingsOpen = false;
+    await this.updateComplete;
+    if (!this.isConnected || this.settingsOpen) return;
+    this.renderRoot.querySelector('office-ui-menu-button[label="Settings and more"]')?.shadowRoot?.querySelector("button")?.focus();
+  }
+  applyTheme() {
+    if (this.theme === "system") this.removeAttribute("data-office-theme");
+    else this.setAttribute("data-office-theme", this.theme);
+  }
+  // ---- template ---------------------------------------------------------------------------
+  render() {
+    if (this.popoutRequested)
+      return this.popout ? html`<div class="popout-view">
+						<teams-content-preview
+							.detail=${this.popout}
+							@teams-preview-close=${() => globalThis.close()}
+						></teams-content-preview>
+					</div>` : html`<p role="alert">The file preview link is invalid.</p>`;
+    const s = this.teams.state;
+    if (!s) return this.welcome();
+    return html`
+			<div
+				class="shell"
+				@office-chat-open-tab=${(event) => {
+      if (this.teams.state?.tabs.some((entry) => entry.id === event.detail.tabId))
+        this.selectTab(event.detail.tabId);
+      else this.notify("This tab is no longer available in this channel");
+    }}
+			>
+				${this.topbar(s)}
+				<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 } : {} }))}
+						selected=${this.rail}
+						@office-rail-select=${(e) => {
+      if (!this.closePreview()) return;
+      this.settingsOpen = false;
+      this.rail = e.detail.id;
+      this.meeting = false;
+    }}
+					></office-ui-app-rail>
+					<aside class="side" ?inert=${this.settingsOpen}>${this.sidebar(s)}</aside>
+					<main class="main" ?inert=${this.settingsOpen}>${this.main(s)}</main>
+					<teams-settings
+						embedded
+						?open=${this.settingsOpen}
+						.config=${this.resolveConfig()}
+						.theme=${this.theme}
+						.fileOpenPreference=${this.fileOpenPreference}
+						.chatDensity=${this.chatDensity}
+						.showAppNames=${this.showAppNames}
+						@teams-settings-app-names=${(event) => {
+      if (typeof event.detail.show !== "boolean") return;
+      this.showAppNames = event.detail.show;
+      safeStorage.setItem(
+        this.themeStorageKey.replace("teams:theme:", "teams:app-names:"),
+        String(this.showAppNames)
+      );
+    }}
+						@teams-settings-density=${(event) => {
+      if (!["comfy", "compact"].includes(event.detail.density)) return;
+      this.chatDensity = event.detail.density;
+      safeStorage.setItem(
+        this.themeStorageKey.replace("teams:theme:", "teams:density:"),
+        this.chatDensity
+      );
+    }}
+						@teams-settings-file-open=${(event) => {
+      if (!["teams", "browser"].includes(event.detail.preference)) return;
+      this.fileOpenPreference = event.detail.preference;
+      safeStorage.setItem(
+        this.themeStorageKey.replace("teams:theme:", "teams:file-open:"),
+        this.fileOpenPreference
+      );
+    }}
+						.followSettings=${s.threadFollowSettings}
+						.userName=${s.user.name}
+						@teams-settings-theme=${(event) => {
+      if (!["system", "light", "dark"].includes(event.detail.theme)) return;
+      this.theme = event.detail.theme;
+      this.applyTheme();
+      safeStorage.setItem(this.themeStorageKey, this.theme);
+    }}
+						@teams-settings-follow=${(event) => this.teams.client?.setThreadFollowSettings(event.detail)}
+						@teams-settings-close=${() => void this.closeSettings()}
+						@teams-settings-apply=${(e) => {
+      if (!this.closePreview()) return;
+      saveConfig(e.detail.config);
+      this.config = e.detail.config;
+      this.settingsOpen = false;
+      this.dispatchEvent(
+        new CustomEvent("teams-config-change", {
+          detail: e.detail,
+          bubbles: true,
+          composed: true
+        })
+      );
+    }}
+					></teams-settings>
+				</div>
+				<teams-create-channel-dialog
+					?open=${this.creatingChannel}
+					.create=${(name, description) => this.commitChannel(name, description, this.client)}
+					@teams-create-channel-close=${() => this.creatingChannel = false}
+				></teams-create-channel-dialog>
+				<teams-navigation-drawer
+					.heading=${this.rail === "calls" ? "Calls" : "Teams and channels"}
+					?open=${this.navigationOpen}
+					@teams-navigation-close=${() => void this.closeNavigation()}
+				>
+					${this.navigationOpen ? this.sidebar(s) : nothing}
+				</teams-navigation-drawer>
+				${this.toast ? html`<div class="toast" role="status">${this.toast}</div>` : nothing}
+
+				<teams-add-tab-dialog
+					.open=${this.addingTab}
+					.client=${this.teams.client}
+					.channelId=${s.selectedChannelId}
+					.channelName=${s.channel?.name ?? ""}
+					.files=${s.files}
+					.add=${(name, content, channelId, client, postToChannel) => {
+      if (client !== this.teams.client || client.getState().selectedChannelId !== channelId)
+        return null;
+      if (!this.closePreview()) return "canceled";
+      const tab = client.addTab(name, content, { postToChannel });
+      if (tab) {
+        this.retainedTab = tab;
+        this.tab = tab.id;
+        this.addingTab = false;
+        this.creatingChannel = false;
+      }
+      return tab;
+    }}
+					@teams-add-tab-close=${() => this.addingTab = false}
+				></teams-add-tab-dialog>
+			</div>
+		`;
+  }
+  welcome() {
+    return html`
+			<div class="welcome">
+				<form
+					@submit=${(e) => {
+      e.preventDefault();
+      const name = new FormData(e.target).get("name")?.toString().trim();
+      if (!name) return;
+      const identity = { id: crypto.randomUUID(), name };
+      saveIdentity(identity);
+      this.identity = identity;
+    }}
+				>
+					<span class="logo">T</span>
+					<h1>Welcome to Teams</h1>
+					<p>Pick the name your colleagues will see.</p>
+					<input
+						name="name"
+						placeholder="Your name"
+						aria-label="Your name"
+						maxlength="40"
+						autocomplete="name"
+						required
+					/>
+					<button type="submit">Continue</button>
+				</form>
+			</div>
+		`;
+  }
+  topbar(s) {
+    return html`
+			<header class="topbar">
+				<div class="brand">
+					<button
+						type="button"
+						class="navigation-toggle"
+						data-open-navigation
+						aria-label="Open navigation"
+						title="Open navigation"
+						aria-haspopup="dialog"
+						aria-expanded=${String(this.navigationOpen)}
+						@click=${() => this.navigationOpen = true}
+					>
+						${icon("navigation")}
+					</button>
+					<span class="logo">T</span><span>Teams</span>
+				</div>
+				<div class="search">
+					<input
+						type="search"
+						placeholder="Search messages"
+						aria-label="Search messages"
+						.value=${s.searchQuery}
+						@input=${(e) => this.teams.client?.search(e.target.value)}
+					/>
+					${s.searchQuery ? html`<ul class="results" role="listbox" aria-label="Search results">
+									${s.searchResults.length === 0 ? html`<li class="none">No results</li>` : s.searchResults.map(
+      (h) => html`<li>
+														<button
+															type="button"
+															@click=${() => {
+        if (this.selectChannel(h.channelId)) {
+          this.teams.client?.search("");
+          void this.openThread(h.message.id);
+        }
+      }}
+														>
+															<strong>${h.message.authorName}</strong>
+															<span class="in">in # ${h.channelName}</span>
+															<span class="snippet">${h.message.text.slice(0, 100)}</span>
+														</button>
+													</li>`
+    )}
+								</ul>` : nothing}
+				</div>
+				<div class="me">
+					<office-ui-menu-button
+						label="Settings and more"
+						icon="more"
+						icon-only
+						@office-command=${(event) => {
+      if (event.detail.command === "teams-settings") this.askSettings();
+    }}
+					>
+						<office-ui-menu-item label="Settings" command="teams-settings"></office-ui-menu-item>
+					</office-ui-menu-button>
+					<teams-profile-menu
+						.state=${s}
+						@teams-profile-status=${(event) => {
+      if (["available", "busy", "away"].includes(event.detail.availability))
+        this.teams.client?.setAvailability(event.detail.availability);
+    }}
+					></teams-profile-menu>
+				</div>
+			</header>
+		`;
+  }
+  sidebar(s) {
+    if (this.rail === "calls") {
+      const live2 = s.channels.filter((c) => c.live);
+      return html`
+				<h2>Calls</h2>
+				<ul class="plain">
+					${s.channels.map(
+        (c) => html`<li>
+							<span># ${c.name}</span>
+							<button
+								type="button"
+								class=${c.live ? "join live" : "join"}
+								@click=${() => this.startMeeting(c.id)}
+							>
+								${c.live ? "Join" : "Meet now"}
+							</button>
+						</li>`
+      )}
+				</ul>
+				${live2.length === 0 ? html`<p class="hint">Nobody is in a call right now.</p>` : nothing}
+			`;
+    }
+    return html`
+			<office-ui-channel-list
+				heading="Channels"
+				selected-id=${s.selectedChannelId}
+				.channels=${s.channels}
+				@office-channel-select=${(e) => this.selectChannel(e.detail.id)}
+				@office-channel-create=${this.createChannel}
+			></office-ui-channel-list>
+		`;
+  }
+  main(s) {
+    if (this.rail === "drafts" && this.teams.client)
+      return draftList(s, this.teams.client, (context) => void this.resumeDraft(context));
+    if (this.preview)
+      return html`<teams-content-preview
+				.detail=${this.preview}
+				.embeds=${this.embeds}
+				.saveCopy=${this.saveCopyFor(this.preview, s)}
+				@teams-preview-close=${this.closePreview}
+			></teams-content-preview>`;
+    if (this.rail === "files") return this.allFiles(s);
+    if (this.rail === "followed" && this.teams.client)
+      return followedThreads(
+        s,
+        this.teams.client,
+        (thread) => {
+          if (this.selectChannel(thread.channelId)) void this.openThread(thread.root.id);
+        },
+        this.followedUnreadOnly,
+        (value) => {
+          this.followedUnreadOnly = value;
+        }
+      );
+    if (s.call && this.meeting) return this.meetingView(s);
+    return html`
+			${s.call && !this.meeting ? html`<div class="callbar">
+							You are in a call in # ${s.call.channelName}
+							<button
+								type="button"
+								@click=${() => {
+      if (this.selectChannel(s.call.channelId)) this.meeting = true;
+    }}
+							>
+								Return to call
+							</button>
+						</div>` : nothing}
+			${this.conversation(s)}
+		`;
+  }
+  conversation(s, compact = false) {
+    const channel = s.channel;
+    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">
+							<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>`
+    )}
+								${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;
+      }
+      if (!c?.openTabConversation(sharedTab.id)) {
+        this.notify("Could not open this tab conversation");
+        return;
+      }
+      await Promise.resolve();
+      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) => {
+      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)) {
+          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>`}
+			${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
+							class="conversation-grid tab-conversation"
+							data-thread=${String(s.thread?.root.tabId === activeTab.id)}
+						>
+							<div class="conversation-main">
+								<teams-channel-tab
+									.tab=${activeTab}
+									.client=${c ?? null}
+									.embeds=${this.embeds}
+									.canSave=${s.canUploadFiles}
+									@teams-preview-close=${() => this.selectTab("posts")}
+								></teams-channel-tab>
+							</div>
+							${s.thread?.root.tabId === activeTab.id && c ? threadPane(
+      s,
+      c,
+      (attachment) => void this.openFile(attachment),
+      () => void this.closeThread()
+    ) : 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">
+									<office-ui-chat-list
+										.messages=${compact ? s.messages : s.posts}
+										.replyCounts=${compact ? {} : s.replyCounts}
+										self-id=${s.user.id}
+										@office-chat-react=${(e) => c?.toggleReaction(e.detail.messageId, e.detail.emoji)}
+										@office-chat-thread=${(e) => void this.openThread(e.detail.messageId)}
+										@office-chat-reply=${(e) => compact ? c?.startReply(e.detail.messageId) : void this.openThread(e.detail.messageId, "reply")}
+										@office-chat-edit=${(e) => compact ? c?.startEdit(e.detail.messageId) : void this.openThread(e.detail.messageId, "edit")}
+										@office-chat-delete=${(e) => globalThis.confirm?.("Delete this message?") !== false && c?.deleteMessage(e.detail.messageId)}
+										@office-chat-open-file=${(e) => this.openFile(e.detail.attachment)}
+									></office-ui-chat-list>
+									${s.thread && !compact ? nothing : html`<office-ui-chat-composer
+													.typing=${s.typing}
+													.replyingTo=${s.replyingTo?.authorName ?? null}
+													.editing=${s.editing !== null}
+													.value=${s.draft.text}
+													.files=${s.draft.files}
+													.missingFiles=${s.draft.missingFiles}
+													@office-chat-draft=${(e) => c?.setDraft(e.detail)}
+													?disabled=${!channel}
+													placeholder=${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)}
+													data-compose=${compose ? "on" : "off"}
+												></office-ui-chat-composer>`}
+								</div>
+								${!compact && c ? threadPane(
+      s,
+      c,
+      (attachment) => void this.openFile(attachment),
+      () => void this.closeThread()
+    ) : nothing}
+							</div>`}
+		`;
+  }
+  selectTab(id) {
+    if (!this.closePreview()) return;
+    this.teams.client?.closeThread();
+    this.tab = id;
+    this.addingTab = false;
+    this.creatingChannel = false;
+  }
+  async openThread(id, action) {
+    const client = this.teams.client;
+    client?.openThread(id);
+    if (action === "reply") client?.startReply(id);
+    if (action === "edit") client?.startEdit(id);
+    await Promise.resolve();
+    await this.updateComplete;
+    this.shadowRoot?.querySelector("[data-thread-heading]")?.focus();
+  }
+  async resumeDraft(context) {
+    if (!this.closePreview() || !this.teams.client?.openDraft(context)) return;
+    this.rail = "teams";
+    this.tab = "posts";
+    this.meeting = false;
+    await Promise.resolve();
+    await this.updateComplete;
+    this.shadowRoot?.querySelector("office-ui-chat-composer")?.shadowRoot?.querySelector("textarea")?.focus();
+  }
+  async closeThread() {
+    const client = this.teams.client;
+    const root = client?.getState().thread?.root.id;
+    client?.closeThread();
+    await Promise.resolve();
+    await this.updateComplete;
+    const tabButton = this.shadowRoot?.querySelector("[data-tab-conversation]");
+    if (tabButton) {
+      tabButton.focus();
+      return;
+    }
+    const list = this.shadowRoot?.querySelector(".conversation-main office-ui-chat-list");
+    const message = Array.from(
+      list?.shadowRoot?.querySelectorAll("[data-message-id]") ?? []
+    ).find((element) => element.dataset.messageId === root);
+    message?.querySelector('.thread-link, button[aria-label="Reply"]')?.focus();
+  }
+  pinFile(file) {
+    if (!this.selectChannel(file.channelId ?? this.teams.state?.selectedChannelId ?? "")) return;
+    const tab = this.teams.client?.addTab(
+      file.name,
+      { type: "file", attachment: file },
+      { postToChannel: true }
+    );
+    if (tab) this.selectTab(tab.id);
+    else this.notify("This file needs an uploaded URL before it can be pinned");
+  }
+  saveCopyFor(detail, state) {
+    const client = this.teams.client;
+    const channelId = detail.channelId;
+    if (!client || !channelId || !state.canUploadFiles) return void 0;
+    return async (file, options) => {
+      await client.saveFileCopy(channelId, file, options);
+    };
+  }
+  fileList(files, state) {
+    return html`<teams-files-panel
+			.client=${this.teams.client}
+			.files=${files}
+			.channelId=${state.selectedChannelId}
+			.channelName=${state.channel?.name ?? ""}
+			.canUpload=${state.canUploadFiles}
+			@teams-files-open=${(event) => void this.openFile(event.detail.attachment, event.detail.mode)}
+			@teams-files-browser=${(event) => void this.openFile(event.detail.attachment, "browser")}
+			@teams-files-pin=${(event) => this.pinFile(event.detail.attachment)}
+		></teams-files-panel>`;
+  }
+  allFiles(s) {
+    return html`<header class="channel-head">
+				<h1>Files</h1>
+				<span class="topic">Shared across your channels</span>
+			</header>
+			${this.fileList(s.allFiles, s)}`;
+  }
+  meetingView(s) {
+    const call = s.call;
+    if (call.phase === "prejoin")
+      return html`
+				<office-ui-prejoin
+					heading=${`# ${call.channelName}`}
+					name=${s.user.name}
+					.preview=${call.preview}
+					?audio=${call.prejoin.audio}
+					?video=${call.prejoin.video}
+					@office-prejoin-change=${(e) => void this.teams.client?.setPrejoin(e.detail)}
+					@office-prejoin-join=${() => void this.teams.client?.joinCall()}
+					@office-prejoin-cancel=${() => (this.meeting = false, this.teams.client?.leaveCall())}
+				></office-ui-prejoin>
+			`;
+    const self = call.self;
+    return html`
+			<section class="meeting">
+				<office-ui-call-controls
+					heading=${`# ${call.channelName}`}
+					started-at=${call.startedAt ?? 0}
+					?mic=${self?.state.audio}
+					?camera=${self?.state.video}
+					?screen=${self?.state.screen}
+					?hand=${self?.state.hand}
+					?share-unavailable=${typeof navigator.mediaDevices?.getDisplayMedia !== "function"}
+					panel=${this.panel}
+					@office-call-action=${(e) => this.onCallAction(e.detail.action)}
+				></office-ui-call-controls>
+				<div class="stage">
+					<office-ui-call-grid
+						.participants=${call.participants.map((p) => ({
+      id: p.id,
+      name: p.name,
+      self: p.self,
+      stream: p.stream,
+      audio: p.state.audio,
+      video: p.state.video,
+      screen: p.state.screen,
+      hand: p.state.hand,
+      connection: p.connection
+    }))}
+					></office-ui-call-grid>
+					${this.panel === "chat" ? html`<aside class="panel chat">${this.conversation(s, true)}</aside>` : this.panel === "people" ? html`<aside class="panel people-panel">
+										<h2>People (${call.participants.length})</h2>
+										<ul class="plain">
+											${call.participants.map(
+      (p) => html`<li>
+													<office-ui-avatar
+														size="sm"
+														name=${p.name}
+														seed=${p.id}
+													></office-ui-avatar>
+													<span>${p.name}${p.self ? " (you)" : ""}</span>
+													${p.state.hand ? html`<span title="Hand raised">✋</span>` : nothing}
+												</li>`
+    )}
+										</ul>
+									</aside>` : nothing}
+				</div>
+			</section>
+		`;
+  }
+};
+function defineTeamsApp(registry = globalThis.customElements) {
+  if (registry && !registry.get("teams-app")) registry.define("teams-app", TeamsApp);
+}
+
+// src/teams/app/bind.ts
+var SCALARS = ["workspaceId", "userName", "userId"];
+function applyTeamsProps(el, props, prev = {}) {
+  for (const key of SCALARS) {
+    if (props[key] === prev[key]) continue;
+    el[key] = props[key] ?? (key === "workspaceId" ? "demo" : "");
+  }
+  if (props.config !== prev.config && props.config !== void 0) el.config = props.config;
+  if (props.uploadFile !== prev.uploadFile) el.uploadFile = props.uploadFile;
+  if (props.openers !== prev.openers) el.openers = props.openers ?? {};
+  if (props.embeds !== prev.embeds) el.embeds = props.embeds ?? {};
+}
+function listenTeamsEvents(el, get) {
+  const ready = (e) => get().onReady?.(e.detail);
+  const open = (e) => {
+    const ce = e;
+    get().onOpenFile?.(ce.detail, ce);
+  };
+  const config = (e) => get().onConfigChange?.(e.detail);
+  el.addEventListener("teams-ready", ready);
+  el.addEventListener("teams-open-file", open);
+  el.addEventListener("teams-config-change", config);
+  return () => {
+    el.removeEventListener("teams-ready", ready);
+    el.removeEventListener("teams-open-file", open);
+    el.removeEventListener("teams-config-change", config);
+  };
+}
+function createTeams(options) {
+  return createTeamsClient({ storage: safeStorage, ...options });
+}
+
+// src/teams/index.ts
+var TEAMS_TAGS = [
+  "office-ui-avatar",
+  "office-ui-app-rail",
+  "office-ui-channel-list",
+  "office-ui-chat-list",
+  "office-ui-chat-composer",
+  "office-ui-prejoin",
+  "office-ui-call-grid",
+  "office-ui-call-controls"
+];
+function registerTeams() {
+  defineAvatar();
+  defineAppRail();
+  defineChannelList();
+  defineChatList();
+  defineChatComposer();
+  definePrejoin();
+  defineCallGrid();
+  defineCallControls();
+}
+
+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 };