ooxml-ui 0.27.2 → 0.28.0

package/dist/{chunk-LE4FTRWB.js → chunk-AJ2J734X.js}

@@ -1,9 +1,12 @@
+import { installOfficeUiTheme } from './chunk-7QLJS57B.js';
+import { registerControls } from './chunk-G4ZGQYBH.js';
 import { registerIcon, getIcon } from './chunk-HZ422LTR.js';
-import { initialsOf } from './chunk-V6W5DKJ6.js';
+import { initialsOf, definePresence } from './chunk-V6W5DKJ6.js';
 import { definer, OfficeElement, controlStyles } from './chunk-ZWBP2WTC.js';
-import { html, nothing, unsafeCSS, svg } from 'lit';
+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/packages/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";
@@ -808,6 +811,619 @@ var OfficeUiPrejoin = class extends TeamsElement {
   }
 };
 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/packages/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/packages/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 = [
@@ -831,4 +1447,4 @@ function registerTeams() {
   defineCallControls();
 }
 
-export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles };
+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 };

package/dist/{chunk-4PBFBPOH.js → chunk-G4ZGQYBH.js}

@@ -4553,7 +4553,8 @@ function attachKeyTips(scope) {
     const next = panel ? [...scope.querySelectorAll("[data-keytip-level]")].find((el2) => el2.id === panel) ?? null : null;
     if (next) {
       levels.push(next);
-      view?.requestAnimationFrame ? view.requestAnimationFrame(render2) : render2();
+      if (view?.requestAnimationFrame) view.requestAnimationFrame(render2);
+      else render2();
     } else stop();
   };
   const onKeyDown = (event) => {