ooxml-ui 0.30.0 → 0.31.0

package/dist/chunk-NEDNYLXX.js

@@ -1,1450 +0,0 @@
-import { installOfficeUiTheme } from './chunk-7QLJS57B.js';
-import { registerControls } from './chunk-4VKD3COE.js';
-import { registerIcon, getIcon } from './chunk-HZ422LTR.js';
-import { initialsOf, definePresence } from './chunk-4TSBX6J3.js';
-import { definer, OfficeElement, controlStyles } from './chunk-ZWBP2WTC.js';
-import { html, nothing, LitElement, unsafeCSS, svg } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-import { live } from 'lit/directives/live.js';
-import { parseServerConfig, createTeamsClient } from 'ooxml-core/teams';
-
-// 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 = {
-  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.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 }
-  };
-  constructor() {
-    super();
-    this.items = [];
-    this.selected = "";
-  }
-  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}
-								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";
-
-// src/teams/chat-composer.ts
-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 = 10;
-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 },
-    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.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.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;
-    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 = "";
-  }
-  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">
-				${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)}
-										>
-											${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.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.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-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-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" }
-  };
-  stickToBottom = true;
-  constructor() {
-    super();
-    this.messages = [];
-    this.selfId = "";
-  }
-  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-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}
-					</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)}
-				</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 = [];
-  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() {
-    this.stop();
-  }
-};
-
-// 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	width: min(36em, 94vw);\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}\nform {\n	display: grid;\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}\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";
-
-// src/teams/app/teams-settings.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((s) => [[s.urls].flat().join(","), s.username, s.credential].filter(Boolean).join(" ")).join("\n");
-var TeamsSettings = class extends LitElement {
-  static styles = unsafeCSS(teams_settings_default);
-  static properties = {
-    config: { attribute: false },
-    open: { type: Boolean, reflect: true },
-    issues: { state: true }
-  };
-  constructor() {
-    super();
-    this.config = { mode: "local", iceServers: [] };
-    this.open = false;
-    this.issues = [];
-  }
-  updated() {
-    const dialog = this.renderRoot.querySelector("dialog");
-    if (!dialog) return;
-    if (this.open && !dialog.open) dialog.showModal();
-    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.dispatchEvent(new CustomEvent("teams-settings-close", { bubbles: true, composed: true }));
-  }
-  render() {
-    const c = this.config;
-    return html`
-			<dialog @close=${this.close} @cancel=${this.close}>
-				<form @submit=${this.apply}>
-					<h2>Server settings</h2>
-					<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>
-			</dialog>
-		`;
-  }
-};
-function defineTeamsSettings(registry = globalThis.customElements) {
-  if (registry && !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*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me select {\n	padding: var(--office-space-1) var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.link {\n	border: 0;\n	background: transparent;\n	text-decoration: underline;\n	color: var(--office-teams-brand);\n}\n.conn {\n	width: 0.7em;\n	height: 0.7em;\n	border-radius: 50%;\n	background: var(--office-presence-offline);\n}\n.conn[data-status="connected"] { background: var(--office-presence-available); }\n.conn[data-status="connecting"] { background: var(--office-presence-away); }\n.conn[data-status="error"] { background: var(--office-presence-busy); }\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\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.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	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 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.files {\n	display: grid;\n	flex: 1;\n	align-content: start;\n	gap: var(--office-space-2);\n	margin: 0;\n	padding: var(--office-space-4) var(--office-space-5);\n	overflow: auto;\n	list-style: none;\n}\n.files li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.files .none {\n	justify-content: center;\n	border: 0;\n	color: var(--office-teams-text-subtle);\n}\n.files .meta {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n}\n.files small {\n	color: var(--office-teams-text-subtle);\n}\n.files button {\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);\n	background: var(--office-teams-panel);\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"] { background: var(--office-file-docx); }\n.badge[data-kind="xlsx"] { background: var(--office-file-xlsx); }\n.badge[data-kind="pptx"] { background: var(--office-file-pptx); }\n.badge[data-kind="vsdx"] { background: var(--office-file-vsdx); }\n\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@media (max-width: 900px) {\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\n	}\n}\n';
-
-// src/teams/app/teams-app.ts
-var RAIL = [
-  { id: "teams", label: "Teams", icon: "users" },
-  { id: "calls", label: "Calls", icon: "phone" },
-  { id: "files", label: "Files", icon: "folder" }
-];
-var AVAILABILITY = ["available", "busy", "away"];
-var TeamsApp = class extends LitElement {
-  static styles = 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 },
-    rail: { state: true },
-    tab: { state: true },
-    panel: { state: true },
-    meeting: { state: true },
-    settingsOpen: { state: true },
-    toast: { state: true },
-    identity: { state: true }
-  };
-  teams = new TeamsController(this, (text) => this.notify(text));
-  toastTimer;
-  constructor() {
-    super();
-    this.workspaceId = "demo";
-    this.userName = "";
-    this.userId = "";
-    this.serverConfig = "";
-    this.config = null;
-    this.uploadFile = void 0;
-    this.openers = {};
-    this.rail = "teams";
-    this.tab = "posts";
-    this.panel = "";
-    this.meeting = false;
-    this.settingsOpen = false;
-    this.toast = "";
-    this.identity = null;
-  }
-  /** 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();
-    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) {
-    const restart = ["workspaceId", "userName", "userId", "serverConfig", "config", "identity"].some((k) => changed.has(k));
-    if (!restart && this.teams.client) return;
-    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.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 }));
-  }
-  notify(text) {
-    this.toast = text;
-    clearTimeout(this.toastTimer);
-    this.toastTimer = setTimeout(() => this.toast = "", 4e3);
-  }
-  // ---- intent -> client actions -----------------------------------------------------------
-  async openFile(a) {
-    const url = await this.teams.client?.fileUrl(a);
-    const detail = { attachment: a, url };
-    if (!this.dispatchEvent(new CustomEvent("teams-open-file", { detail, bubbles: true, composed: true, cancelable: true }))) return;
-    const opener = this.openers[a.kind];
-    if (opener) return opener(detail);
-    if (url) globalThis.open(url, "_blank", "noopener");
-    else this.notify("This file was shared by name only");
-  }
-  createChannel() {
-    const name = globalThis.prompt?.("Channel name")?.trim();
-    if (name) {
-      this.teams.client?.createChannel(name);
-      this.rail = "teams";
-      this.meeting = false;
-    }
-  }
-  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) {
-    void this.teams.client?.openCall(channelId);
-    this.meeting = true;
-    this.rail = "teams";
-  }
-  selectChannel(id) {
-    this.teams.client?.select(id);
-    this.teams.client?.search("");
-    this.meeting = false;
-    this.tab = "posts";
-    this.rail = "teams";
-  }
-  askSettings() {
-    this.settingsOpen = true;
-  }
-  // ---- template ---------------------------------------------------------------------------
-  render() {
-    const s = this.teams.state;
-    if (!s) return this.welcome();
-    return html`
-			<div class="shell">
-				${this.topbar(s)}
-				<div class="body">
-					<office-ui-app-rail
-						.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) => (this.rail = e.detail.id, this.meeting = false)}
-					></office-ui-app-rail>
-					<aside class="side">${this.sidebar(s)}</aside>
-					<main class="main">${this.main(s)}</main>
-				</div>
-				${this.toast ? html`<div class="toast" role="status">${this.toast}</div>` : nothing}
-				<teams-settings
-					?open=${this.settingsOpen}
-					.config=${this.resolveConfig()}
-					@teams-settings-close=${() => this.settingsOpen = false}
-					@teams-settings-apply=${(e) => {
-      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>
-		`;
-  }
-  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"><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=${() => this.selectChannel(h.channelId)}>
-													<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">
-					<span class="conn" data-status=${s.status} title=${s.mode === "server" ? `Server: ${s.status}` : "Local: tabs of this browser"}></span>
-					<button type="button" class="link" @click=${this.askSettings}>Server</button>
-					<select
-						aria-label="Availability"
-						.value=${s.availability}
-						@change=${(e) => this.teams.client?.setAvailability(e.target.value)}
-					>
-						${AVAILABILITY.map((a) => html`<option value=${a} ?selected=${a === s.availability}>${a[0].toUpperCase() + a.slice(1)}</option>`)}
-					</select>
-					<office-ui-avatar name=${s.user.name} seed=${s.user.id} presence=${s.availability}></office-ui-avatar>
-				</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 === "files") return this.allFiles(s);
-    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=${() => (this.meeting = true, this.teams.client?.select(s.call.channelId))}>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;
-    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.tab = t}
-								>
-									${t === "posts" ? "Posts" : "Files"}
-								</button>`
-    )}
-						</nav>
-						<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>`}
-			${this.tab === "files" && !compact ? this.fileList(s.files) : html`
-						<office-ui-chat-list
-							.messages=${s.messages}
-							self-id=${s.user.id}
-							@office-chat-react=${(e) => c?.toggleReaction(e.detail.messageId, e.detail.emoji)}
-							@office-chat-reply=${(e) => c?.startReply(e.detail.messageId)}
-							@office-chat-edit=${(e) => c?.startEdit(e.detail.messageId)}
-							@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>
-						<office-ui-chat-composer
-							.typing=${s.typing}
-							.replyingTo=${s.replyingTo?.authorName ?? null}
-							.editing=${s.editing !== null}
-							.value=${s.editing?.text ?? ""}
-							?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>
-					`}
-		`;
-  }
-  fileList(files) {
-    return html`
-			<ul class="files">
-				${files.length === 0 ? html`<li class="none">No files shared yet.</li>` : files.map(
-      (f) => html`<li>
-								<span class="badge" data-kind=${f.kind}>${f.kind === "other" ? "F" : f.kind[0].toUpperCase()}</span>
-								<span class="meta">
-									<strong>${f.name}</strong>
-									<small>${f.author} · ${new Date(f.ts).toLocaleString()}${f.channelName ? ` \xB7 # ${f.channelName}` : ""}</small>
-								</span>
-								<button type="button" @click=${() => this.openFile(f)}>Open</button>
-							</li>`
-    )}
-			</ul>
-		`;
-  }
-  allFiles(s) {
-    return html`<header class="channel-head"><h1>Files</h1></header>${this.fileList(s.allFiles)}`;
-  }
-  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 ?? {};
-}
-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, TeamsController, TeamsElement, TeamsSettings, applyTeamsProps, colorFor, createTeams, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, defineTeamsApp, defineTeamsSettings, formatElapsed, formatSize, formatTime, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles };