ooxml-ui 1.14.0 → 1.15.0

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

@@ -1,10 +1,10 @@
 import { THEME_CSS, installOfficeUiTheme } from './chunk-7E3HU7RL.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-LAVVSCRJ.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-7QGML32D.js';
 import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
 import { initialsOf, definePresence } from './chunk-KNC2UEUR.js';
 import { definer, OfficeElement, controlStyles } from './chunk-CWBSXK7P.js';
 import { nothing, html, LitElement, unsafeCSS, svg } from 'lit';
-import { filterActivity, ACTIVITY_FILTERS, describeActivity, localZone, startOfDay, occurrencesBetween, DAY_MS as DAY_MS$1, dayKey, zonedToUtc, viewDays, zonedParts, shiftAnchor, layoutDay, mentionQueryAt, filterMentionTargets, insertMention, MAX_ATTACHMENTS, mentionsUser, mentionSegments, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, STATUS_DURATION_LABELS, PRESENCE_LABELS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, MAX_CHAT_MEMBERS, occurrenceAt, MAX_RECURRENCE_COUNT, MINUTE_MS, MAX_MEETING_TITLE, MAX_MEETING_DESCRIPTION, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
+import { filterActivity, ACTIVITY_FILTERS, describeActivity, localZone, startOfDay, occurrencesBetween, DAY_MS as DAY_MS$1, dayKey, zonedToUtc, viewDays, zonedParts, shiftAnchor, layoutDay, mentionQueryAt, filterMentionTargets, insertMention, MAX_ATTACHMENTS, mentionsUser, mentionSegments, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, STATUS_DURATION_LABELS, PRESENCE_LABELS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, MAX_CHAT_MEMBERS, occurrenceAt, MAX_RECURRENCE_COUNT, MINUTE_MS, MAX_MEETING_TITLE, MAX_MEETING_DESCRIPTION, markdownBlocks, repeatChoices, serverOrigin, probeTeamsAccounts, requestTeamsSession, signOutTeamsSession, checkTeamsSession, createTeamsClient, sanitizeAttachment, markdownInline, TeamsSignInError } from 'ooxml-core/teams';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -3563,7 +3563,35 @@ function messageTransfers(state, client) {
 }
 
 // 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	max-height: min(80vh, 40em);\n	overflow: auto;\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	margin-bottom: var(--office-space-3);\n}\n.who {\n	display: grid;\n	min-width: 0;\n}\n.status-line,\n.message,\n.hint {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\n.hint:empty {\n	display: none;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.actions 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	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.actions button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.actions button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n@media (pointer: coarse) {\n	.actions button,\n	select,\n	input {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\ninput,\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}\nselect:disabled {\n	opacity: 0.6;\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";
+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	max-height: min(80vh, 40em);\n	overflow: auto;\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	margin-bottom: var(--office-space-3);\n}\n.who {\n	display: grid;\n	min-width: 0;\n}\n.status-line,\n.message,\n.hint {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\n.hint:empty {\n	display: none;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.actions button,\n.account 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	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.actions button:hover:not(:disabled),\n.account button:hover {\n	background: var(--office-selected);\n}\n.actions button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n@media (pointer: coarse) {\n	.actions button,\n	.account button,\n	select,\n	input {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n.account {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\ninput,\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}\nselect:disabled {\n	opacity: 0.6;\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/sign-in-strings.ts
+var SIGN_IN_STRINGS = {
+  title: "Sign in to Teams",
+  intro: "This workspace server needs an account.",
+  userLabel: "User ID",
+  credentialLabel: "Password",
+  submit: "Sign in",
+  submitting: "Signing in",
+  checking: "Connecting to the server",
+  signOut: "Sign out",
+  signedInAs: (id) => `Signed in as ${id}`,
+  expired: "Your session expired. Sign in again to continue.",
+  ended: "The server ended your session. Sign in again to continue.",
+  signedOut: "You signed out."
+};
+function signInErrorText(reason, retryAfterSec) {
+  switch (reason) {
+    case "credentials":
+      return "The user ID or password is not correct.";
+    case "rate-limited":
+      return retryAfterSec ? `Too many attempts. Try again in ${retryAfterSec} seconds.` : "Too many attempts. Try again in a minute.";
+    case "network":
+      return "Could not reach the server. Check your connection and try again.";
+    default:
+      return "The server could not sign you in. Try again later.";
+  }
+}
 
 // src/teams/app/profile-menu.ts
 var idleLabel = (minutes) => minutes === 0 ? "Never" : `${minutes} minutes`;
@@ -3582,6 +3610,7 @@ var TeamsProfileMenu = class extends LitElement {
   static styles = unsafeCSS(profile_menu_default);
   static properties = {
     state: { attribute: false },
+    account: { type: String },
     open: { state: true },
     draft: { state: true },
     resetAfter: { state: true },
@@ -3590,6 +3619,7 @@ var TeamsProfileMenu = class extends LitElement {
   constructor() {
     super();
     this.state = null;
+    this.account = "";
     this.open = false;
     this.draft = null;
     this.resetAfter = "never";
@@ -3752,6 +3782,16 @@ var TeamsProfileMenu = class extends LitElement {
 						${IDLE_MINUTE_CHOICES.map((minutes) => html`<option value=${minutes} ?selected=${presence.idleMinutes === minutes}>${idleLabel(minutes)}</option>`)}
 					</select></label
 				>
+				${this.account ? html`<div class="account">
+								<span>${SIGN_IN_STRINGS.signedInAs(this.account)}</span>
+								<button
+									type="button"
+									name="sign-out"
+									@click=${() => this.fire("teams-sign-out", {})}
+								>
+									${SIGN_IN_STRINGS.signOut}
+								</button>
+							</div>` : nothing}
 				<p class="connection">
 					${state.mode === "local" ? "Local workspace" : "Workspace server"}: ${state.status}
 				</p>
@@ -3762,6 +3802,266 @@ function defineTeamsProfileMenu() {
   if (!customElements.get("teams-profile-menu"))
     customElements.define("teams-profile-menu", TeamsProfileMenu);
 }
+var PROBE_AFTER_MS = 4e3;
+var PROBE_AGAIN_MS = 15e3;
+var MAX_TIMER_MS = 2 ** 31 - 1;
+var SignInFlow = class {
+  constructor(host) {
+    this.host = host;
+  }
+  host;
+  phase = "open";
+  session = null;
+  /** Kept across a re-prompt so the person only retypes the password. */
+  userId = "";
+  notice = "";
+  error = "";
+  busy = false;
+  retryAfterSec = 0;
+  accounts = /* @__PURE__ */ new Map();
+  probing = "";
+  expiryTimer;
+  checkTimer;
+  checking = false;
+  generation = 0;
+  key(config) {
+    return `${serverOrigin(config) ?? ""}|${config.token ?? ""}`;
+  }
+  /**
+   * Whether the client must wait: true while the server is being asked and while the sign-in
+   * screen is showing. Call it from every (re)start with the settings-derived config.
+   */
+  gate(config) {
+    if (config.mode !== "server" || config.sessionToken || !serverOrigin(config)) {
+      this.phase = "open";
+      return false;
+    }
+    if (this.session) {
+      this.phase = "open";
+      return false;
+    }
+    const key = this.key(config);
+    const known = this.accounts.get(key);
+    if (known === false) {
+      this.phase = "open";
+      return false;
+    }
+    if (known === true) {
+      this.phase = "required";
+      return true;
+    }
+    this.phase = "checking";
+    if (this.probing !== key) {
+      this.probing = key;
+      const generation = this.generation;
+      void probeTeamsAccounts(config).then((accounts) => {
+        if (generation !== this.generation || this.probing !== key) return;
+        this.probing = "";
+        if (accounts !== null) this.accounts.set(key, accounts);
+        this.phase = accounts ? "required" : "open";
+        this.host.changed();
+      });
+    }
+    return true;
+  }
+  /** The config to start the client with: the session, when there is one, rides along. */
+  apply(config) {
+    return this.session && !config.sessionToken ? { ...config, sessionToken: this.session.token } : config;
+  }
+  async submit(config, userId, credential) {
+    if (this.busy) return;
+    const id = userId.trim();
+    this.userId = id;
+    this.error = "";
+    this.retryAfterSec = 0;
+    this.busy = true;
+    this.host.changed();
+    try {
+      const session = await requestTeamsSession(config, { userId: id, credential });
+      this.session = session;
+      this.userId = session.userId;
+      this.notice = "";
+      this.phase = "open";
+      this.armExpiry(session);
+      this.host.emit("teams-signed-in", { userId: session.userId, expiresAt: session.expiresAt });
+    } catch (error) {
+      const failure = error instanceof TeamsSignInError ? error : null;
+      this.error = signInErrorText(failure?.reason ?? "server", failure?.retryAfterSec);
+      this.retryAfterSec = failure?.retryAfterSec ?? 0;
+    } finally {
+      this.busy = false;
+      this.host.changed();
+    }
+  }
+  /** The session no longer works: back to the sign-in screen, keeping the user id. */
+  expire(message) {
+    if (!this.session) return;
+    this.drop();
+    this.notice = message;
+    this.host.emit("teams-session-ended", { userId: this.userId });
+    this.host.changed();
+  }
+  async signOut(config) {
+    const session = this.session;
+    if (!session) return;
+    this.drop();
+    this.userId = "";
+    this.notice = SIGN_IN_STRINGS.signedOut;
+    this.host.emit("teams-signed-out", { userId: session.userId });
+    this.host.changed();
+    await signOutTeamsSession(config, session.token);
+  }
+  /** Feed the connection status after every render; a session that stays unusable is checked. */
+  watchConnection(connected, config) {
+    if (!this.session) return;
+    if (connected) {
+      clearTimeout(this.checkTimer);
+      this.checkTimer = void 0;
+      return;
+    }
+    if (this.checkTimer !== void 0 || this.checking) return;
+    this.scheduleCheck(config, PROBE_AFTER_MS);
+  }
+  scheduleCheck(config, delay) {
+    const session = this.session;
+    if (!session) return;
+    this.checkTimer = setTimeout(() => {
+      this.checkTimer = void 0;
+      this.checking = true;
+      void checkTeamsSession(config, session.token).then((result) => {
+        this.checking = false;
+        if (this.session !== session) return;
+        if (result === "rejected") this.expire(SIGN_IN_STRINGS.ended);
+        else this.scheduleCheck(config, PROBE_AGAIN_MS);
+      });
+    }, delay);
+  }
+  armExpiry(session) {
+    clearTimeout(this.expiryTimer);
+    const wait = Math.min(Math.max(session.expiresAt - Date.now(), 0), MAX_TIMER_MS);
+    this.expiryTimer = setTimeout(() => {
+      if (this.session === session) this.expire(SIGN_IN_STRINGS.expired);
+    }, wait);
+  }
+  drop() {
+    this.session = null;
+    this.error = "";
+    this.retryAfterSec = 0;
+    clearTimeout(this.expiryTimer);
+    clearTimeout(this.checkTimer);
+    this.checkTimer = void 0;
+    this.phase = "required";
+  }
+  /** Forget everything (the element is leaving the page). */
+  dispose() {
+    this.generation++;
+    this.probing = "";
+    clearTimeout(this.expiryTimer);
+    clearTimeout(this.checkTimer);
+    this.checkTimer = void 0;
+  }
+};
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-sign-in.css?raw
+var teams_sign_in_default = ":host {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n	color: var(--office-foreground);\n	font: inherit;\n}\n.card {\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.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 2.4em;\n	height: 2.4em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\nh1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\np {\n	margin: 0;\n	text-align: center;\n	overflow-wrap: anywhere;\n}\n.muted {\n	color: var(--office-teams-text-subtle);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	width: 100%;\n}\ninput {\n	width: 100%;\n	box-sizing: border-box;\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}\ninput:focus-visible,\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.error {\n	color: var(--office-danger);\n}\nbutton {\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: inherit;\n	font-weight: var(--office-font-weight-bold);\n	cursor: pointer;\n}\nbutton:disabled {\n	opacity: 0.6;\n	cursor: not-allowed;\n}\n";
+
+// src/teams/app/teams-sign-in.ts
+var TeamsSignIn = class extends LitElement {
+  static styles = unsafeCSS(teams_sign_in_default);
+  static properties = {
+    userId: { type: String },
+    notice: { type: String },
+    error: { type: String },
+    retryAfter: { type: Number },
+    busy: { type: Boolean },
+    checking: { type: Boolean },
+    wait: { state: true }
+  };
+  timer;
+  constructor() {
+    super();
+    this.userId = "";
+    this.notice = "";
+    this.error = "";
+    this.retryAfter = 0;
+    this.busy = false;
+    this.checking = false;
+    this.wait = 0;
+  }
+  willUpdate(changed) {
+    if (!changed.has("retryAfter") && !changed.has("error")) return;
+    clearInterval(this.timer);
+    this.wait = this.error ? this.retryAfter : 0;
+    if (this.wait <= 0) return;
+    this.timer = setInterval(() => {
+      this.wait = Math.max(0, this.wait - 1);
+      if (this.wait === 0) clearInterval(this.timer);
+    }, 1e3);
+  }
+  updated(changed) {
+    if (changed.has("busy") && !this.busy && this.error)
+      this.renderRoot.querySelector('input[name="credential"]')?.focus();
+  }
+  disconnectedCallback() {
+    clearInterval(this.timer);
+    super.disconnectedCallback();
+  }
+  submit(event) {
+    event.preventDefault();
+    if (this.busy || this.wait > 0) return;
+    const form = event.target;
+    const data = new FormData(form);
+    const userId = String(data.get("user") ?? "").trim();
+    const credential = String(data.get("credential") ?? "");
+    form.elements.namedItem("credential").value = "";
+    if (!userId || !credential) return;
+    this.dispatchEvent(
+      new CustomEvent("teams-sign-in-submit", {
+        detail: { userId, credential },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    if (this.checking)
+      return html`<div class="card" role="status" aria-live="polite">
+				<span class="logo" aria-hidden="true">T</span>
+				<p class="muted">${SIGN_IN_STRINGS.checking}</p>
+			</div>`;
+    const locked = this.busy || this.wait > 0;
+    const error = this.error && this.wait > 0 && this.retryAfter > 0 ? this.error.replace(/\d+ seconds/u, `${this.wait} seconds`) : this.error;
+    return html`<form class="card" @submit=${this.submit} aria-busy=${String(this.busy)}>
+			<span class="logo" aria-hidden="true">T</span>
+			<h1>${SIGN_IN_STRINGS.title}</h1>
+			<p class="muted">${this.notice || SIGN_IN_STRINGS.intro}</p>
+			<label
+				>${SIGN_IN_STRINGS.userLabel}<input
+					name="user"
+					autocomplete="username"
+					autocapitalize="none"
+					spellcheck="false"
+					maxlength="64"
+					required
+					.value=${this.userId}
+					?disabled=${this.busy}
+			/></label>
+			<label
+				>${SIGN_IN_STRINGS.credentialLabel}<input
+					name="credential"
+					type="password"
+					autocomplete="current-password"
+					required
+					?disabled=${this.busy}
+			/></label>
+			${error ? html`<p class="error" role="alert">${error}</p>` : nothing}
+			<button type="submit" ?disabled=${locked}>${this.busy ? SIGN_IN_STRINGS.submitting : SIGN_IN_STRINGS.submit}</button>
+		</form>`;
+  }
+};
+function defineTeamsSignIn() {
+  if (!customElements.get("teams-sign-in")) customElements.define("teams-sign-in", TeamsSignIn);
+}
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/pinned-bar.css?raw
 var pinned_bar_default = ":host {\n	display: block;\n	flex: none;\n	font: inherit;\n	color: inherit;\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nsection {\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: 0;\n	background: transparent;\n}\n.summary {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-3);\n}\n.latest {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-2);\n	min-width: 0;\n	min-height: 2.2em;\n	padding: var(--office-space-1) var(--office-space-2);\n	border-radius: var(--office-radius);\n	text-align: start;\n}\n.latest:hover,\n.count:hover,\n.jump:hover,\n.unpin:hover {\n	background: var(--office-selected);\n}\n.mark {\n	display: inline-grid;\n	flex: none;\n	color: var(--office-teams-brand);\n}\nsvg {\n	width: 1.1em;\n	height: 1.1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.text {\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.count {\n	flex: none;\n	min-height: 2.2em;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-radius: var(--office-radius);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nul {\n	display: grid;\n	gap: var(--office-space-1);\n	max-height: 14em;\n	margin: 0;\n	padding: 0 var(--office-space-3) var(--office-space-2);\n	overflow: auto;\n	list-style: none;\n}\nli {\n	display: flex;\n	align-items: center;\n	gap: 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}\n.jump {\n	display: grid;\n	flex: 1;\n	gap: var(--office-space-0);\n	min-width: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n	border-radius: var(--office-radius-md);\n	text-align: start;\n}\n.by {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.unpin {\n	flex: none;\n	margin-inline-end: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-3);\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@media (pointer: coarse) {\n	.latest,\n	.count,\n	.unpin {\n		min-height: var(--office-touch-target, 44px);\n	}\n	.unpin {\n		min-width: var(--office-touch-target, 44px);\n	}\n}\n";
@@ -4500,10 +4800,79 @@ function defineTeamsChatPeopleDialog(registry = globalThis.customElements) {
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/meeting-dialog.css?raw
 var meeting_dialog_default = ".times {\n	display: grid;\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n	gap: var(--office-space-3);\n}\noffice-ui-people-picker {\n	font-weight: normal;\n}\n@media (max-width: 40em) {\n	.times {\n		grid-template-columns: minmax(0, 1fr);\n	}\n}\n";
+var WEEKDAYS = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday"
+];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var ORDINALS = {
+  1: "first",
+  2: "second",
+  3: "third",
+  4: "fourth",
+  [-1]: "last"
+};
+var weekdayRule = (ordinal, weekday) => `the ${ORDINALS[ordinal] ?? "first"} ${WEEKDAYS[weekday] ?? ""}`;
+var NO_REPEAT = { repeat: "none", monthlyBy: "date", ordinal: 1 };
+var repeatValue = (r) => r.repeat === "monthly" ? r.monthlyBy === "weekday" ? `monthly-${r.ordinal}` : "monthly-date" : r.repeat;
+function parseRepeatValue(value) {
+  if (value === "monthly-date") return { repeat: "monthly", monthlyBy: "date", ordinal: 1 };
+  const m = /^monthly-(-?\d)$/u.exec(value);
+  if (m) return { repeat: "monthly", monthlyBy: "weekday", ordinal: Number(m[1]) };
+  if (value === "daily" || value === "weekly" || value === "yearly")
+    return { repeat: value, monthlyBy: "date", ordinal: 1 };
+  return NO_REPEAT;
+}
+function repeatOptions(start, zone) {
+  const { month, day, weekday, ordinals } = repeatChoices(start, zone);
+  const options = [
+    { value: "none", label: "Does not repeat" },
+    { value: "daily", label: "Every day" },
+    { value: "weekly", label: "Every week" },
+    { value: "monthly-date", label: `Every month on day ${day}` },
+    ...ordinals.map((o) => ({
+      value: `monthly-${o}`,
+      label: `Every month on ${weekdayRule(o, weekday)}`
+    })),
+    { value: "yearly", label: `Every year on ${MONTHS[month - 1]} ${day}` }
+  ];
+  return options;
+}
+function repeatText(m) {
+  if (m.repeat === "none") return "";
+  if (m.repeat === "daily") return "Repeats every day";
+  if (m.repeat === "weekly") return "Repeats every week";
+  const { month, day, weekday } = repeatChoices(m.start, m.zone);
+  if (m.repeat === "yearly") return `Repeats every year on ${MONTHS[month - 1]} ${day}`;
+  return m.monthlyBy === "weekday" && m.ordinal !== void 0 ? `Repeats every month on ${weekdayRule(m.ordinal, weekday)}` : `Repeats every month on day ${day}`;
+}
 
 // src/teams/app/meeting-dialog.ts
 var SLOT = 30 * MINUTE_MS;
 var NOT_SAVED = "The meeting was not saved. Your details are kept here.";
+var repeatOption = (o, current) => html`<option value=${o.value} ?selected=${o.value === current}>${o.label}</option>`;
+function repeatFields(r) {
+  if (r.repeat !== "monthly") return { repeat: r.repeat };
+  return r.monthlyBy === "weekday" ? { repeat: "monthly", monthlyBy: "weekday", ordinal: r.ordinal } : { repeat: "monthly", monthlyBy: "date" };
+}
 function toLocalInput(ms) {
   const d = new Date(ms);
   const p = (n) => String(n).padStart(2, "0");
@@ -4523,7 +4892,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     description: { state: true },
     startText: { state: true },
     endText: { state: true },
-    repeat: { state: true },
+    repeatChoice: { state: true },
     endMode: { state: true },
     untilText: { state: true },
     countText: { state: true },
@@ -4543,7 +4912,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     this.description = "";
     this.startText = "";
     this.endText = "";
-    this.repeat = "none";
+    this.repeatChoice = NO_REPEAT;
     this.endMode = "never";
     this.untilText = "";
     this.countText = "10";
@@ -4560,7 +4929,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     this.description = one?.description ?? m?.description ?? "";
     this.startText = toLocalInput(begin);
     this.endText = toLocalInput(one?.end ?? m?.end ?? begin + SLOT);
-    this.repeat = m?.repeat ?? "none";
+    this.repeatChoice = m ? { repeat: m.repeat, monthlyBy: m.monthlyBy ?? "date", ordinal: m.ordinal ?? 1 } : NO_REPEAT;
     this.endMode = m?.count !== void 0 ? "count" : m?.until !== void 0 ? "date" : "never";
     this.countText = String(m?.count ?? 10);
     this.untilText = toLocalInput(m?.until ?? begin + 28 * 864e5).slice(0, 10);
@@ -4577,6 +4946,20 @@ var TeamsMeetingDialog = class extends TeamsDialog {
       this.endText = toLocalInput(end + (after - before));
     this.issue = "";
   }
+  /** The zone the series is defined in: the organizer's for an existing meeting, else this device's. */
+  zone() {
+    return this.meeting?.zone ?? localZone();
+  }
+  /**
+   * The repeat to store. A weekday ordinal that no longer fits the start date (the start moved)
+   * becomes the first one that does.
+   */
+  repeatToStore(start) {
+    const choice = this.repeatChoice;
+    if (choice.repeat !== "monthly" || choice.monthlyBy !== "weekday") return choice;
+    const fits = repeatOptions(start, this.zone()).map((o) => o.value);
+    return fits.includes(repeatValue(choice)) ? choice : parseRepeatValue(fits.find((v) => v.startsWith("monthly-") && v !== "monthly-date") ?? "");
+  }
   validCount() {
     const n = Number(this.countText);
     return Number.isInteger(n) && n >= 1 && n <= MAX_RECURRENCE_COUNT;
@@ -4590,7 +4973,8 @@ var TeamsMeetingDialog = class extends TeamsDialog {
   }
   /** The end of the repeat to store: a count, the end of a day, or none (null clears an old end). */
   recurrenceEnd() {
-    if (this.repeat === "none" || this.endMode === "never") return { count: null, until: null };
+    if (this.repeatChoice.repeat === "none" || this.endMode === "never")
+      return { count: null, until: null };
     return this.endMode === "count" ? { count: Number(this.countText), until: null } : { count: null, until: this.untilTime() };
   }
   submit(event) {
@@ -4604,9 +4988,9 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     else if (this.occurrence) {
       const one = { title: this.meetingTitle, description: this.description, start, end };
       if (!this.save?.(one, this.meeting?.id, this.occurrence)) this.issue = NOT_SAVED;
-    } else if (this.repeat !== "none" && this.endMode === "count" && !this.validCount())
+    } else if (this.repeatChoice.repeat !== "none" && this.endMode === "count" && !this.validCount())
       this.issue = `Enter a number of events from 1 to ${MAX_RECURRENCE_COUNT}.`;
-    else if (this.repeat !== "none" && this.endMode === "date" && !this.validUntil(start))
+    else if (this.repeatChoice.repeat !== "none" && this.endMode === "date" && !this.validUntil(start))
       this.issue = "The series must end on or after its first event.";
     else if (!this.save?.(
       {
@@ -4614,7 +4998,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
         description: this.description,
         start,
         end,
-        repeat: this.repeat,
+        ...repeatFields(this.repeatToStore(start)),
         ...this.recurrenceEnd(),
         attendeeIds: this.channelId ? [] : this.attendees,
         ...this.channelId ? { channelId: this.channelId } : {}
@@ -4626,6 +5010,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
   render() {
     const editing = this.meeting !== null;
     const single = this.occurrence !== 0;
+    const current = repeatValue(this.repeatToStore(new Date(this.startText).getTime()));
     return this.frame(
       single ? "Edit this event" : editing ? "Edit meeting" : "New meeting",
       html`<form @submit=${this.submit}>
@@ -4659,15 +5044,15 @@ var TeamsMeetingDialog = class extends TeamsDialog {
 				${single ? html`<small>Only this event changes. The rest of the series stays as it is.</small>` : html`
 								<label
 									>Repeat<select
-										.value=${this.repeat}
-										@change=${(e) => this.repeat = e.target.value}
+										@change=${(e) => this.repeatChoice = parseRepeatValue(e.target.value)}
 									>
-										<option value="none">Does not repeat</option>
-										<option value="daily">Every day</option>
-										<option value="weekly">Every week</option>
+										${repeatOptions(
+        new Date(this.startText).getTime() || Date.now(),
+        this.zone()
+      ).map((o) => repeatOption(o, current))}
 									</select></label
 								>
-								${this.repeat === "none" ? nothing : html`<label
+								${this.repeatChoice.repeat === "none" ? nothing : html`<label
 													>Ends<select
 														.value=${this.endMode}
 														@change=${(e) => this.endMode = e.target.value}
@@ -4749,7 +5134,6 @@ function defineTeamsMeetingDialog(registry = globalThis.customElements) {
 var meeting_details_default = ".when {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\nh3 {\n	margin: 0 0 var(--office-space-1);\n	font-size: var(--office-font-size);\n}\n.people ul {\n	margin: 0;\n	padding-inline-start: var(--office-space-5);\n}\n.description {\n	color: var(--office-foreground);\n	white-space: pre-wrap;\n}\n.scope {\n	display: grid;\n	gap: var(--office-space-3);\n}\n.scope fieldset {\n	display: grid;\n	gap: var(--office-space-2);\n	margin: 0;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.scope label {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\nfooter[hidden] {\n	display: none;\n}\n";
 
 // src/teams/app/meeting-details.ts
-var REPEAT_TEXT = { none: "", daily: "Repeats every day", weekly: "Repeats every week" };
 var TeamsMeetingDetails = class extends TeamsDialog {
   static styles = dialogStyles(meeting_details_default);
   static properties = {
@@ -4855,7 +5239,7 @@ var TeamsMeetingDetails = class extends TeamsDialog {
       occurrence?.title ?? m.title,
       html`<div class="body">
 				<p class="when">${icon("calendar")} ${formatWhen(start, end)}</p>
-				${m.repeat !== "none" ? html`<p>${REPEAT_TEXT[m.repeat]}${this.endText(m)}</p>` : nothing}
+				${m.repeat !== "none" ? html`<p>${repeatText(m)}${this.endText(m)}</p>` : nothing}
 				${m.zone !== this.zone ? html`<p>Scheduled in the organizer's time zone, ${m.zone.replaceAll("_", " ")}.</p>` : nothing}
 				<p>Organized by ${m.mine ? "you" : m.organizerName}</p>
 				${m.channelId ? html`<p>
@@ -5016,8 +5400,15 @@ var TeamsApp = class extends LitElement {
     theme: { state: true },
     fileOpenPreference: { state: true },
     chatDensity: { state: true },
-    showAppNames: { state: true }
+    showAppNames: { state: true },
+    authRevision: { state: true }
   };
+  /** Sign-in for servers that require accounts; a server without them never gates the app. */
+  signIn = new SignInFlow({
+    changed: () => this.authRevision++,
+    emit: (name, detail) => this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }))
+  });
+  authKey = "";
   teams = new TeamsController(
     this,
     (text) => this.notify(text),
@@ -5072,6 +5463,7 @@ var TeamsApp = class extends LitElement {
     this.fileOpenPreference = "teams";
     this.chatDensity = "comfy";
     this.showAppNames = true;
+    this.authRevision = 0;
   }
   /** The core client behind this element, for hosts that want the raw actions. */
   get client() {
@@ -5094,8 +5486,10 @@ var TeamsApp = class extends LitElement {
     defineTeamsChatPeopleDialog();
     defineTeamsMeetingDialog();
     defineTeamsMeetingDetails();
+    defineTeamsSignIn();
     this.stopActivity = watchActivity(this.ownerDocument, () => this.teams.client?.noteActivity());
     super.connectedCallback();
+    if (this.signIn.phase === "checking") this.authRevision++;
   }
   // ---- lifecycle --------------------------------------------------------------------------
   resolveConfig() {
@@ -5110,14 +5504,13 @@ var TeamsApp = class extends LitElement {
   }
   willUpdate(changed) {
     if (this.popoutRequested) return;
-    const restart = [
-      "workspaceId",
-      "userName",
-      "userId",
-      "serverConfig",
-      "config",
-      "identity"
-    ].some((k) => changed.has(k));
+    const base = this.resolveConfig();
+    const waiting = this.signIn.gate(base);
+    const authKey = `${waiting}|${this.signIn.session?.token ?? ""}`;
+    const restart = ["workspaceId", "userName", "userId", "serverConfig", "config", "identity"].some(
+      (k) => changed.has(k)
+    ) || changed.has("authRevision") && authKey !== this.authKey;
+    this.authKey = authKey;
     if (!restart && this.teams.client) return;
     this.preview = null;
     this.tab = "posts";
@@ -5127,8 +5520,14 @@ var TeamsApp = class extends LitElement {
     this.meetingForm = this.meetingDetails = null;
     this.settingsOpen = false;
     this.openRequest++;
-    const named = this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : this.identity ?? loadIdentity();
-    if (this.userName && !this.userId) saveIdentity(named);
+    if (waiting) return this.teams.stop();
+    const account = this.signIn.session;
+    const remembered = this.identity ?? loadIdentity();
+    const named = account ? {
+      id: account.userId,
+      name: this.userName || (remembered?.id === account.userId ? remembered.name : account.userId)
+    } : this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : remembered;
+    if (this.userName && !this.userId && !account) 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)}`;
@@ -5142,7 +5541,7 @@ var TeamsApp = class extends LitElement {
     this.teams.start({
       workspaceId,
       user: named,
-      config: this.resolveConfig(),
+      config: this.signIn.apply(base),
       storage: safeStorage,
       ...this.uploadFile ? { uploadFile: this.uploadFile } : {}
     });
@@ -5153,6 +5552,7 @@ var TeamsApp = class extends LitElement {
   updated() {
     this.setAttribute("data-chat-density", this.chatDensity);
     const state = this.teams.state;
+    this.signIn.watchConnection(state?.status === "connected", this.resolveConfig());
     if (state?.channels.some((c) => c.id === state.selectedChannelId))
       this.lastChannelId = state.selectedChannelId;
     if (state?.thread && document.visibilityState === "visible" && this.renderRoot.querySelector(".thread-pane"))
@@ -5258,6 +5658,7 @@ var TeamsApp = class extends LitElement {
     clearTimeout(this.highlightTimer);
     this.stopActivity?.();
     this.stopActivity = void 0;
+    this.signIn.dispose();
     super.disconnectedCallback();
   }
   createChannel() {
@@ -5345,6 +5746,7 @@ var TeamsApp = class extends LitElement {
 							@teams-preview-close=${() => globalThis.close()}
 						></teams-content-preview>
 					</div>` : html`<p role="alert">The file preview link is invalid.</p>`;
+    if (this.signIn.phase !== "open") return this.signInScreen();
     const s = this.teams.state;
     if (!s) return this.welcome();
     return html`
@@ -5465,6 +5867,18 @@ var TeamsApp = class extends LitElement {
 			</div>
 		`;
   }
+  signInScreen() {
+    const flow = this.signIn;
+    return html`<teams-sign-in
+			.userId=${flow.userId}
+			.notice=${flow.notice}
+			.error=${flow.error}
+			.retryAfter=${flow.retryAfterSec}
+			?busy=${flow.busy}
+			?checking=${flow.phase === "checking"}
+			@teams-sign-in-submit=${(event) => void flow.submit(this.resolveConfig(), event.detail.userId, event.detail.credential)}
+		></teams-sign-in>`;
+  }
   welcome() {
     return html`
 			<div class="welcome">
@@ -5542,6 +5956,8 @@ var TeamsApp = class extends LitElement {
 					</office-ui-menu-button>
 					<teams-profile-menu
 						.state=${s}
+						.account=${this.signIn.session?.userId ?? ""}
+						@teams-sign-out=${() => void this.signIn.signOut(this.resolveConfig())}
 						@teams-profile-status=${(event) => {
       const { availability, duration } = event.detail;
       if (isPresenceStatus(availability))