ooxml-ui 1.0.0 → 1.2.0

package/dist/{chunk-T3HB5LMH.js → chunk-7FNDOWTX.js}

@@ -1,7 +1,7 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-BOX43CZD.js';
-import { initialsOf } from './chunk-OXKWNNNJ.js';
-import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-ZV2Z4IWH.js';
-import { tok, OFFICE_TOKENS } from './chunk-JFJXBYRD.js';
+import { initialsOf } from './chunk-VUB44CAJ.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens } from './chunk-YK2DPYMU.js';
+import { tok, OFFICE_TOKENS } from './chunk-XNCWB2X6.js';
 import { html, LitElement, nothing, render, svg } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -1009,6 +1009,299 @@ var OfficeUiFindBar = class extends OfficeElement {
 };
 var defineFindBar = definer("office-ui-find-bar", () => OfficeUiFindBar);
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/comments/comments-pane.css?raw
+var comments_pane_default = ":host {\n	box-sizing: border-box;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n	width: var(--office-comments-pane-width);\n	padding: var(--office-space-2-5) var(--office-space-3);\n	overflow-y: auto;\n	border-inline-start: var(--office-border-width) solid var(--office-border);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	font: var(--office-font-size-sm) / var(--office-line-height) var(--office-font);\n}\n:host([hidden]) {\n	display: none;\n}\n:host([list-only]) {\n	width: auto;\n	padding: 0;\n	border: 0;\n	background: transparent;\n}\n.header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size);\n	font-weight: var(--office-font-weight-bold);\n}\n.composer,\n.reply,\n.edit {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: var(--office-space-1);\n}\ntextarea {\n	box-sizing: border-box;\n	width: 100%;\n	min-height: var(--office-control-height-lg);\n	resize: vertical;\n	padding: var(--office-space-1) var(--office-space-1-5);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\nbutton {\n	min-height: var(--office-input-height);\n	padding: var(--office-space-0) var(--office-space-2);\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n}\nbutton:disabled,\ntextarea:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.threads {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n}\n.thread {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1-5);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius);\n	background: var(--office-background);\n	cursor: pointer;\n}\n.thread[aria-current='true'] {\n	border-color: var(--office-accent);\n	box-shadow: inset var(--office-border-width-thick) 0 0 var(--office-accent);\n}\n.thread[data-resolved='true'] {\n	opacity: 0.65;\n}\n.anchor {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.anchor-label {\n	font-weight: var(--office-font-weight-medium);\n}\n.badge {\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-selected);\n}\n.comment {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n	cursor: auto;\n}\n.comment.reply {\n	margin-inline-start: var(--office-space-3);\n	padding-inline-start: var(--office-space-2);\n	border-inline-start: var(--office-border-width) solid var(--office-border);\n}\n.meta {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.avatar {\n	display: inline-grid;\n	flex: none;\n	place-items: center;\n	width: var(--office-comment-avatar-size);\n	height: var(--office-comment-avatar-size);\n	border-radius: 50%;\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n}\n.author {\n	overflow: hidden;\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-medium);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\ntime {\n	margin-inline-start: auto;\n	white-space: nowrap;\n}\n.text {\n	margin: 0;\n	white-space: pre-wrap;\n	overflow-wrap: anywhere;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n}\n.empty {\n	margin: 0;\n	color: var(--office-muted-foreground);\n}\n.thread:focus-visible,\ntextarea:focus-visible,\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n@media (forced-colors: active) {\n	.thread[aria-current='true'] {\n		border-color: Highlight;\n	}\n	.avatar {\n		border: var(--office-border-width) solid CanvasText;\n	}\n}\n";
+
+// src/comments/types.ts
+var DEFAULT_COMMENTS_LABELS = {
+  heading: "Comments",
+  list: "Comments",
+  close: "Close comments",
+  newComment: "New comment",
+  add: "Add comment",
+  reply: "Reply",
+  resolve: "Resolve",
+  reopen: "Reopen",
+  resolved: "Resolved",
+  edit: "Edit",
+  save: "Save",
+  cancel: "Cancel",
+  delete: "Delete",
+  edited: "Edited",
+  empty: "No comments"
+};
+function commentInitials(author) {
+  const words = author.trim().split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? [words[0], words.at(-1)] : words;
+  return letters.map((word) => [...word][0] ?? "").join("").toLocaleUpperCase();
+}
+function formatCommentTime(created, locale) {
+  if (!created) return "";
+  if (!/^\d{4}-\d{2}-\d{2}/.test(created)) return created;
+  const date = new Date(created);
+  if (Number.isNaN(date.getTime())) return created;
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(
+      date
+    );
+  } catch {
+    return created;
+  }
+}
+
+// src/comments/comments-pane.ts
+var INTERACTIVE = /* @__PURE__ */ new Set(["BUTTON", "TEXTAREA", "INPUT", "A", "SELECT"]);
+var OfficeUiCommentsPane = class extends OfficeElement {
+  static styles = controlStyles(comments_pane_default);
+  static properties = {
+    threads: { attribute: false },
+    activeThreadId: { attribute: "active-thread-id", type: String },
+    readOnly: { attribute: "read-only", ...flag },
+    listOnly: { attribute: "list-only", ...flag },
+    closable: flag,
+    addDisabled: { attribute: "add-disabled", ...flag },
+    currentAuthor: { attribute: "current-author", type: String },
+    labels: { attribute: false },
+    classNames: { attribute: false },
+    locale: { type: String }
+  };
+  focusedId;
+  editingId;
+  constructor() {
+    super();
+    this.threads = [];
+    this.activeThreadId = null;
+    this.readOnly = false;
+    this.listOnly = false;
+    this.closable = false;
+    this.addDisabled = false;
+    this.currentAuthor = null;
+    this.labels = {};
+    this.classNames = {};
+    this.locale = null;
+  }
+  get text() {
+    return { ...DEFAULT_COMMENTS_LABELS, ...this.labels };
+  }
+  get locked() {
+    return present(this.readOnly);
+  }
+  /** The thread that takes Tab focus: the last one focused, else the active one, else the first. */
+  get rovingId() {
+    const ids = this.threads.map((thread) => thread.id);
+    if (this.focusedId && ids.includes(this.focusedId)) return this.focusedId;
+    if (this.activeThreadId && ids.includes(this.activeThreadId)) return this.activeThreadId;
+    return ids[0];
+  }
+  card(id) {
+    if (id === void 0) return null;
+    return [...this.renderRoot.querySelectorAll(".thread")].find(
+      (card) => card.dataset.threadId === id
+    ) ?? null;
+  }
+  /** Focus the current thread, or the new-comment box when there is none. */
+  focus(options) {
+    const target = this.card(this.rovingId) ?? this.renderRoot.querySelector("textarea");
+    if (target) target.focus(options);
+    else super.focus(options);
+  }
+  submitNew() {
+    const box = this.renderRoot.querySelector("textarea.new");
+    const text = box?.value.trim();
+    if (!box || !text || this.locked || present(this.addDisabled)) return;
+    box.value = "";
+    this.fire("comment-add", { text });
+  }
+  submitReply(threadId) {
+    const box = this.card(threadId)?.querySelector("textarea.reply-box");
+    const text = box?.value.trim();
+    if (!box || !text || this.locked) return;
+    box.value = "";
+    this.fire("comment-reply", { threadId, text });
+  }
+  startEdit(commentId) {
+    this.editingId = commentId;
+    this.requestUpdate();
+    this.renderRoot.querySelector("textarea.edit-box")?.focus();
+  }
+  stopEdit() {
+    this.editingId = void 0;
+    this.requestUpdate();
+  }
+  saveEdit(thread, comment) {
+    const box = this.renderRoot.querySelector("textarea.edit-box");
+    const text = box?.value.trim();
+    this.stopEdit();
+    if (!text || text === comment.text || this.locked) return;
+    this.fire("comment-edit", { threadId: thread.id, commentId: comment.id, text });
+  }
+  /** Ctrl+Enter (Cmd+Enter) posts from any box, like Office. */
+  onBoxKey(event, submit) {
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && !event.isComposing) {
+      event.preventDefault();
+      submit();
+    }
+  }
+  onEditKey(event, thread, comment) {
+    if (event.key !== "Escape") return this.onBoxKey(event, () => this.saveEdit(thread, comment));
+    event.preventDefault();
+    event.stopPropagation();
+    this.stopEdit();
+  }
+  select(threadId) {
+    this.focusedId = threadId;
+    this.requestUpdate();
+    this.fire("thread-select", { threadId });
+  }
+  onThreadClick(event, threadId) {
+    const inner = event.composedPath().some((node) => node instanceof HTMLElement && INTERACTIVE.has(node.tagName));
+    if (!inner) this.select(threadId);
+  }
+  onListKey(event) {
+    const card = event.composedPath()[0];
+    if (!(card instanceof HTMLElement) || !card.classList.contains("thread")) return;
+    const ids = this.threads.map((thread) => thread.id);
+    const at = ids.indexOf(card.dataset.threadId ?? "");
+    if (at < 0) return;
+    const moves = {
+      ArrowDown: Math.min(at + 1, ids.length - 1),
+      ArrowUp: Math.max(at - 1, 0),
+      Home: 0,
+      End: ids.length - 1
+    };
+    const move = moves[event.key];
+    if (move !== void 0) {
+      event.preventDefault();
+      this.focusedId = ids[move];
+      this.requestUpdate();
+      this.card(this.focusedId)?.focus();
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.select(ids[at]);
+    }
+  }
+  renderActions(thread, comment, first) {
+    if (present(this.listOnly)) return nothing;
+    const l = this.text;
+    const locked = this.locked;
+    const own = Boolean(this.currentAuthor) && comment.author === this.currentAuthor;
+    const threadId = thread.id;
+    const status = thread.resolved ? "reopen" : "resolve";
+    return html`<div class="actions"
+			>${first ? html`<button type="button" data-action=${status} ?disabled=${locked} @click=${() => thread.resolved ? this.fire("thread-reopen", { threadId }) : this.fire("thread-resolve", { threadId })}>${thread.resolved ? l.reopen : l.resolve}</button>` : nothing}${own && this.editingId !== comment.id ? html`<button type="button" data-action="edit" ?disabled=${locked} @click=${() => this.startEdit(comment.id)}>${l.edit}</button>` : nothing}<button
+				type="button"
+				data-action="delete"
+				?disabled=${locked}
+				@click=${() => this.fire("comment-delete", { threadId, commentId: comment.id })}
+				>${l.delete}</button
+			></div
+		>`;
+  }
+  renderComment(thread, comment, first) {
+    const l = this.text;
+    const time = formatCommentTime(comment.created, this.locale ?? void 0);
+    const body = this.editingId === comment.id && !this.locked ? html`<div class="edit">
+						<textarea
+							class="edit-box"
+							aria-label=${l.edit}
+							.value=${comment.text}
+							@keydown=${(event) => this.onEditKey(event, thread, comment)}
+						></textarea
+						><div class="actions"
+							><button
+								type="button"
+								data-action="save"
+								@click=${() => this.saveEdit(thread, comment)}
+								>${l.save}</button
+							><button type="button" data-action="cancel" @click=${() => this.stopEdit()}
+								>${l.cancel}</button
+							></div
+						></div
+					>` : html`<p class="text">${comment.text}</p>`;
+    return html`<div
+			class="comment ${first ? "root" : "reply"} ${this.classNames.comment ?? ""}"
+			data-comment-id=${comment.id}
+			data-resolved=${String(thread.resolved)}
+			><div class="meta"
+				><span
+					class="avatar"
+					aria-hidden="true"
+					style=${ifDefined(comment.color ? `background:${comment.color}` : void 0)}
+					>${comment.initials || commentInitials(comment.author)}</span
+				><span class="author">${comment.author}</span
+				>${time ? html`<time datetime=${ifDefined(comment.created)}>${time}</time>` : nothing}${comment.edited ? html`<span class="edited">${l.edited}</span>` : nothing}</div
+			>${body}${this.renderActions(thread, comment, first)}</div
+		>`;
+  }
+  renderThread(thread, roving) {
+    const l = this.text;
+    const [first, ...replies] = thread.comments;
+    const badge = thread.resolved && l.resolved;
+    const anchor = thread.anchorLabel || badge ? html`<div class="anchor"
+						>${thread.anchorLabel ? html`<span class="anchor-label">${thread.anchorLabel}</span>` : nothing}${badge ? html`<span class="badge">${l.resolved}</span>` : nothing}</div
+					>` : nothing;
+    const reply = present(this.listOnly) ? nothing : html`<div class="reply">
+					<textarea
+						class="reply-box"
+						aria-label=${l.reply}
+						placeholder=${l.reply}
+						?disabled=${this.locked}
+						@keydown=${(event) => this.onBoxKey(event, () => this.submitReply(thread.id))}
+					></textarea
+					><button
+						type="button"
+						data-action="reply"
+						?disabled=${this.locked}
+						@click=${() => this.submitReply(thread.id)}
+						>${l.reply}</button
+					></div
+				>`;
+    return html`<article
+			role="listitem"
+			class="thread ${this.classNames.thread ?? ""}"
+			data-thread-id=${thread.id}
+			data-resolved=${String(thread.resolved)}
+			aria-current=${ifDefined(thread.id === this.activeThreadId ? "true" : void 0)}
+			tabindex=${thread.id === roving ? "0" : "-1"}
+			@click=${(event) => this.onThreadClick(event, thread.id)}
+			>${anchor}${first ? this.renderComment(thread, first, true) : nothing}${replies.map((comment) => this.renderComment(thread, comment, false))}${reply}</article
+		>`;
+  }
+  render() {
+    const l = this.text;
+    const closable = present(this.closable);
+    const header = l.heading || closable ? html`<div class="header"
+						>${l.heading ? html`<h2>${l.heading}</h2>` : nothing}${closable ? html`<button type="button" class="close" data-action="close" aria-label=${l.close} @click=${() => this.fire("comments-close", {})}>${l.close}</button>` : nothing}</div
+					>` : nothing;
+    const composer = present(this.listOnly) ? nothing : html`<div class="composer">
+					<textarea
+						class="new"
+						aria-label=${l.newComment}
+						placeholder=${l.newComment}
+						?disabled=${this.locked}
+						@keydown=${(event) => this.onBoxKey(event, () => this.submitNew())}
+					></textarea
+					><button
+						type="button"
+						data-action="add"
+						?disabled=${this.locked || present(this.addDisabled)}
+						@click=${() => this.submitNew()}
+						>${l.add}</button
+					></div
+				>`;
+    const roving = this.rovingId;
+    const list = this.threads.length ? html`<div class="threads" role="list" aria-label=${l.list} @keydown=${this.onListKey}
+					>${repeat(
+      this.threads,
+      (thread) => thread.id,
+      (thread) => this.renderThread(thread, roving)
+    )}</div
+				>` : html`<p class="empty">${l.empty}</p>`;
+    return html`${header}${composer}${list}`;
+  }
+};
+var defineCommentsPane = definer("office-ui-comments-pane", () => OfficeUiCommentsPane);
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/print-preview.css?raw
 var print_preview_default = ":host {\n	display: block;\n	max-width: var(--office-print-preview-width);\n	font: var(--office-font-size-sm) var(--office-font);\n	color: var(--office-foreground);\n}\n.sheet {\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-border);\n	background: var(--office-paper);\n	box-shadow: var(--office-shadow-sm);\n}\n.sheet > * {\n	display: block;\n	width: 100%;\n	height: auto;\n}\n.empty {\n	color: var(--office-muted-foreground);\n}\n.nav {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n}\n.nav[hidden] {\n	display: none;\n}\nbutton {\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n	cursor: pointer;\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n";
 
@@ -1100,7 +1393,7 @@ var OfficeUiPrintPreview = class extends OfficeElement {
 var definePrintPreview = definer("office-ui-print-preview", () => OfficeUiPrintPreview);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/ribbon/ribbon-tabs.css?raw
-var ribbon_tabs_default = ":host {\n	display: block;\n	min-width: 0;\n}\n.head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.file {\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	margin: 0 var(--office-space-1) 0 0;\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border: 0;\n	border-radius: 0;\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n.file:hover {\n	background: var(--office-accent-hover);\n}\n.file[hidden] {\n	display: none;\n}\n[role='tablist'] {\n	display: flex;\n	flex: 0 1 auto;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n[role='tab'] {\n	position: relative;\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n[role='tab']:hover {\n	color: var(--office-foreground);\n	background: var(--office-surface);\n}\n[role='tab'][aria-selected='true'] {\n	color: var(--office-accent);\n}\n[role='tab'][aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 0;\n	height: var(--office-tab-indicator-width);\n	background: var(--office-accent);\n}\n[role='tab'][data-contextual],\n[role='tab'][data-contextual][aria-selected='true'] {\n	color: var(--office-ribbon-contextual);\n}\n[role='tab'][data-contextual][aria-selected='true']::after {\n	background: var(--office-ribbon-contextual);\n}\n.file:focus-visible,\n[role='tab']:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n::slotted([slot='search']) {\n	align-self: center;\n}\n\n.collapse {\n	flex: none;\n	align-self: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	margin-inline: auto var(--office-space-1);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: none;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.collapse[hidden] {\n	display: none;\n}\n.collapse:hover {\n	background: var(--office-surface);\n}\n.collapse:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.collapse .glyph {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	transform: rotate(90deg);\n}\n.collapse[aria-pressed='true'] .glyph {\n	transform: rotate(-90deg);\n}\n:host([collapsed][peek]) {\n	position: relative;\n}\n:host([collapsed][peek]) ::slotted([data-ribbon-tab]:not([hidden])) {\n	position: absolute;\n	inset: 100% 0 auto;\n	z-index: 60;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow);\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n	.file,\n	[role='tab'] {\n		min-height: var(--office-target-size-touch);\n	}\n	.file {\n		min-width: var(--office-ribbon-file-min-width);\n	}\n}\n@media (forced-colors: active) {\n	.file {\n		border: var(--office-border-width) solid ButtonText;\n	}\n	[role='tab'][aria-selected='true']::after {\n		background: Highlight;\n	}\n}\n";
+var ribbon_tabs_default = ":host {\n	display: block;\n	min-width: 0;\n}\n.head {\n	display: flex;\n	align-items: stretch;\n	min-width: 0;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.file {\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	margin: 0 var(--office-space-1) 0 0;\n	padding: var(--office-space-1-5) var(--office-space-4);\n	border: 0;\n	border-radius: 0;\n	background: var(--office-accent);\n	color: var(--office-accent-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n.file:hover {\n	background: var(--office-accent-hover);\n}\n.file[hidden] {\n	display: none;\n}\n[role='tablist'] {\n	display: flex;\n	flex: 0 1 auto;\n	align-items: stretch;\n	min-width: 0;\n	overflow-x: auto;\n	scrollbar-width: none;\n}\n[role='tab'] {\n	position: relative;\n	flex: none;\n	min-height: var(--office-ribbon-tab-height);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border: 0;\n	border-radius: 0;\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	font-size: var(--office-font-size);\n	cursor: pointer;\n}\n[role='tab']:hover {\n	color: var(--office-foreground);\n	background: var(--office-surface);\n}\n[role='tab'][aria-selected='true'] {\n	color: var(--office-accent);\n}\n[role='tab'][aria-selected='true']::after {\n	content: '';\n	position: absolute;\n	inset: auto 0 0;\n	height: var(--office-tab-indicator-width);\n	background: var(--office-accent);\n}\n[role='tab'][data-contextual],\n[role='tab'][data-contextual][aria-selected='true'] {\n	color: var(--office-ribbon-contextual);\n}\n[role='tab'][data-contextual][aria-selected='true']::after {\n	background: var(--office-ribbon-contextual);\n}\n.file:focus-visible,\n[role='tab']:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(-1 * var(--office-focus-width));\n}\n::slotted([slot='search']) {\n	align-self: center;\n}\n/* The auto start margin keeps the actions, and the collapse button after them, at the right end of\n   the tab row even while the slot is empty. */\nslot[name='actions'] {\n	display: flex;\n	flex: none;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin-inline: auto var(--office-space-1);\n}\n\n.collapse {\n	flex: none;\n	align-self: center;\n	width: var(--office-target-size);\n	height: var(--office-target-size);\n	margin-inline: 0 var(--office-space-1);\n	padding: 0;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: none;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.collapse[hidden] {\n	display: none;\n}\n.collapse:hover {\n	background: var(--office-surface);\n}\n.collapse:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.collapse .glyph {\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	transform: rotate(90deg);\n}\n.collapse[aria-pressed='true'] .glyph {\n	transform: rotate(-90deg);\n}\n:host([collapsed][peek]) {\n	position: relative;\n}\n:host([collapsed][peek]) ::slotted([data-ribbon-tab]:not([hidden])) {\n	position: absolute;\n	inset: 100% 0 auto;\n	z-index: 60;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow);\n}\n\n@media (max-width: 760px), (pointer: coarse) {\n	.file,\n	[role='tab'] {\n		min-height: var(--office-target-size-touch);\n	}\n	.file {\n		min-width: var(--office-ribbon-file-min-width);\n	}\n}\n@media (forced-colors: active) {\n	.file {\n		border: var(--office-border-width) solid ButtonText;\n	}\n	[role='tab'][aria-selected='true']::after {\n		background: Highlight;\n	}\n}\n";
 
 // src/ribbon/ribbon-tabs.ts
 var OfficeUiRibbon = class extends OfficeElement {
@@ -1322,6 +1615,7 @@ var OfficeUiRibbon = class extends OfficeElement {
 				</div>
 				<slot name="search"></slot>
 				<slot name="end"></slot>
+				<slot name="actions" part="actions"></slot>
 				<button
 					class="collapse"
 					part="collapse"
@@ -1975,7 +2269,7 @@ var OfficeUiGallery = class extends OfficeElement {
 var defineGallery = definer("office-ui-gallery", () => OfficeUiGallery);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/ruler.css?raw
-var ruler_default = ":host {\n	display: block;\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-muted-foreground);\n	overflow: hidden;\n	font-size: var(--office-font-size-3xs);\n	font-family: var(--office-font);\n}\n:host(:not([orientation='vertical'])) {\n	height: var(--office-ruler-size);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n:host([orientation='vertical']) {\n	width: var(--office-ruler-size);\n	border-inline-end: var(--office-border-width) solid var(--office-border);\n}\ncanvas {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n";
+var ruler_default = ":host {\n	display: block;\n	position: relative;\n	box-sizing: border-box;\n	background: var(--office-background);\n	color: var(--office-muted-foreground);\n	overflow: hidden;\n	font-size: var(--office-font-size-3xs);\n	font-family: var(--office-font);\n}\n:host(:not([orientation='vertical'])) {\n	height: var(--office-ruler-size);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n:host([orientation='vertical']) {\n	width: var(--office-ruler-size);\n	border-inline-end: var(--office-border-width) solid var(--office-border);\n}\ncanvas {\n	position: relative;\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n.margin {\n	position: absolute;\n	top: 0;\n	bottom: 0;\n	background: var(--office-selected);\n}\n:host([orientation='vertical']) .margin {\n	top: auto;\n	bottom: auto;\n	left: 0;\n	right: 0;\n}\n.marker {\n	position: absolute;\n	z-index: 1;\n	width: 0;\n	height: 0;\n	margin-left: calc(var(--office-space-1) * -1);\n	border-right: var(--office-space-1) solid transparent;\n	border-left: var(--office-space-1) solid transparent;\n	cursor: ew-resize;\n	touch-action: none;\n	pointer-events: auto;\n}\n.marker::after {\n	content: '';\n	position: absolute;\n	inset: calc(var(--office-space-1-5) * -1);\n	margin-left: calc(var(--office-space-1) * -1);\n}\n.marker.top {\n	top: var(--office-space-px);\n	border-top: var(--office-space-1-5) solid var(--office-accent);\n}\n.marker.bottom {\n	bottom: var(--office-space-px);\n	border-bottom: var(--office-space-1-5) solid var(--office-accent);\n}\n:host([orientation='vertical']) .marker {\n	margin-top: calc(var(--office-space-1) * -1);\n	margin-left: 0;\n	border: 0;\n	border-top: var(--office-space-1) solid transparent;\n	border-bottom: var(--office-space-1) solid transparent;\n	cursor: ns-resize;\n}\n:host([orientation='vertical']) .marker.top {\n	top: auto;\n	left: var(--office-space-px);\n	border-left: var(--office-space-1-5) solid var(--office-accent);\n}\n:host([orientation='vertical']) .marker.bottom {\n	right: var(--office-space-px);\n	bottom: auto;\n	border-right: var(--office-space-1-5) solid var(--office-accent);\n}\n";
 
 // src/chrome/ruler.ts
 function rulerDivisions(unitPixels) {
@@ -1987,9 +2281,17 @@ var OfficeUiRuler = class extends OfficeElement {
     orientation: { type: String, reflect: true },
     origin: { type: Number },
     scale: { type: Number },
-    direction: { type: String }
+    direction: { type: String },
+    extent: { type: Number },
+    marginStart: { type: Number },
+    marginEnd: { type: Number },
+    zoom: { type: Number },
+    labelsWithinMargins: { type: Boolean },
+    label: { type: String },
+    markers: { attribute: false }
   };
   frame = 0;
+  zoomApplied = false;
   observer;
   constructor() {
     super();
@@ -1997,6 +2299,13 @@ var OfficeUiRuler = class extends OfficeElement {
     this.origin = 0;
     this.scale = 96;
     this.direction = "";
+    this.extent = 0;
+    this.marginStart = 0;
+    this.marginEnd = 0;
+    this.zoom = 1;
+    this.labelsWithinMargins = false;
+    this.label = "";
+    this.markers = [];
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2018,11 +2327,61 @@ var OfficeUiRuler = class extends OfficeElement {
     if (!this.frame) this.draw();
   }
   willUpdate() {
-    this.setAttribute("aria-hidden", "true");
+    if (this.label) {
+      this.removeAttribute("aria-hidden");
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+    } else {
+      this.setAttribute("aria-hidden", "true");
+      if (this.getAttribute("role") === "img") this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+    }
   }
   updated() {
+    if (this.extent > 0)
+      this.style.setProperty(
+        this.orientation === "vertical" ? "height" : "width",
+        `${this.extent}px`
+      );
+    if (this.zoom !== 1 && this.zoom > 0) {
+      this.style.setProperty("zoom", String(this.zoom));
+      this.zoomApplied = true;
+    } else if (this.zoomApplied) {
+      this.style.removeProperty("zoom");
+      this.zoomApplied = false;
+    }
     this.schedule();
   }
+  get zoomFactor() {
+    return this.zoom > 0 ? this.zoom : 1;
+  }
+  pointerPosition(event) {
+    const box = this.getBoundingClientRect();
+    const offset = this.orientation === "vertical" ? event.clientY - box.top : event.clientX - box.left;
+    return offset / this.zoomFactor;
+  }
+  emit(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+  dragMarker(event, name) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const marker = event.currentTarget;
+    marker.setPointerCapture?.(event.pointerId);
+    const move = (e) => this.emit("ruler-marker-move", { name, position: this.pointerPosition(e) });
+    const finish = (e) => {
+      marker.removeEventListener("pointermove", move);
+      marker.removeEventListener("pointerup", finish);
+      marker.removeEventListener("pointercancel", finish);
+      this.emit(e.type === "pointerup" ? "ruler-marker-commit" : "ruler-marker-cancel", {
+        name,
+        position: this.pointerPosition(e)
+      });
+    };
+    marker.addEventListener("pointermove", move);
+    marker.addEventListener("pointerup", finish);
+    marker.addEventListener("pointercancel", finish);
+  }
   draw() {
     this.frame = 0;
     const canvas = this.renderRoot.querySelector("canvas");
@@ -2031,9 +2390,9 @@ var OfficeUiRuler = class extends OfficeElement {
     const vertical = this.orientation === "vertical";
     const reverse = this.direction === "reverse";
     const box = this.getBoundingClientRect();
-    const length = vertical ? box.height : box.width;
-    const thickness = (vertical ? box.width : box.height) || parseFloat(OFFICE_TOKENS["--office-ruler-size"]);
-    const ratio = view?.devicePixelRatio ?? 1;
+    const length = (vertical ? this.offsetHeight : this.offsetWidth) || (vertical ? box.height : box.width);
+    const thickness = (vertical ? this.offsetWidth || box.width : this.offsetHeight || box.height) || parseFloat(OFFICE_TOKENS["--office-ruler-size"]);
+    const ratio = (view?.devicePixelRatio ?? 1) * this.zoomFactor;
     canvas.width = Math.max(1, Math.round((vertical ? thickness : length) * ratio));
     canvas.height = Math.max(1, Math.round((vertical ? length : thickness) * ratio));
     const context = canvas.getContext?.("2d");
@@ -2066,6 +2425,8 @@ var OfficeUiRuler = class extends OfficeElement {
         context.lineTo(at, thickness - tick);
       }
       if (index % divisions !== 0) continue;
+      if (this.labelsWithinMargins && (index < 0 || at < this.marginStart || at > length - this.marginEnd))
+        continue;
       const label = String(index / divisions);
       if (!vertical) context.fillText(label, at + 2, 9);
       else {
@@ -2079,7 +2440,22 @@ var OfficeUiRuler = class extends OfficeElement {
     context.stroke();
   }
   render() {
-    return html`<canvas></canvas>`;
+    const vertical = this.orientation === "vertical";
+    const band = (side, size) => size > 0 ? html`<div
+						class="margin"
+						data-margin=${side}
+						style="${side === "start" ? vertical ? "top" : "left" : vertical ? "bottom" : "right"}:0;${vertical ? "height" : "width"}:${size}px"
+					></div>` : nothing;
+    return html`${band("start", this.marginStart)}${band("end", this.marginEnd)}<canvas
+			></canvas>${this.markers.map(
+      (marker) => html`<div
+					class="marker ${marker.edge === "top" ? "top" : "bottom"}"
+					data-marker=${marker.name}
+					style="${vertical ? "top" : "left"}:${marker.position}px"
+					aria-label=${marker.label ?? nothing}
+					@pointerdown=${(event) => this.dragMarker(event, marker.name)}
+				></div>`
+    )}`;
   }
 };
 var defineRuler = definer("office-ui-ruler", () => OfficeUiRuler);
@@ -3867,7 +4243,7 @@ var OfficeUiSelect = class extends OfficeElement {
 var defineSelect = definer("office-ui-select", () => OfficeUiSelect);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/status-bar.css?raw
-var status_bar_default = ":host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: var(--office-status-bar-height);\n	padding: 0 var(--office-space-2);\n	font-size: var(--office-font-size-xs);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	border-top: var(--office-border-width) solid var(--office-border);\n	font-family: var(--office-font);\n}\n::slotted([slot='end']) {\n	margin-inline-start: auto;\n}\n.bar {\n	display: contents;\n}\n[hidden] {\n	display: none !important;\n}\n:host([data-controlled]) {\n	display: block;\n	flex: none;\n	padding: 0;\n	gap: 0;\n}\n:host([data-controlled]) .bar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	width: 100%;\n	min-height: var(--office-status-bar-height);\n	padding: var(--office-space-0) var(--office-space-2);\n	color: var(--office-muted-foreground);\n}\n:host([data-controlled]) ::slotted([slot='end']) {\n	margin-inline-start: 0;\n}\n.items {\n	display: flex;\n	align-items: center;\n	min-width: 0;\n}\n.item {\n	flex: none;\n	white-space: nowrap;\n}\n.item + .item::before {\n	content: '';\n	display: inline-block;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-2);\n	vertical-align: middle;\n	background: var(--office-border);\n}\n.item.saving {\n	color: var(--office-warning);\n}\n.item.error {\n	color: var(--office-danger);\n}\n.spacer {\n	flex: 1;\n}\n.toggles,\n.group {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-0);\n	background: var(--office-border);\n}\n.bar button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-xs);\n	min-height: var(--office-control-height-xs);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.bar button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button[aria-pressed='true'] {\n	color: var(--office-accent);\n}\n.bar button:active {\n	opacity: 0.8;\n}\n.bar button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.bar svg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.toggle svg,\n.zoom-step svg {\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n.zoom-fit {\n	min-width: var(--office-zoom-value-width);\n	font-variant-numeric: tabular-nums;\n}\n@media (max-width: 767px) {\n	.narrow-hide,\n	.toggle .label {\n		display: none !important;\n	}\n}\n@media (pointer: coarse) {\n	.bar button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		background: Canvas;\n		color: CanvasText;\n		border-top-color: CanvasText;\n	}\n	.bar button {\n		color: ButtonText;\n	}\n	.bar button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.bar button[aria-pressed='true'] {\n		border: var(--office-border-width) solid Highlight;\n	}\n	.bar button:focus-visible {\n		outline-color: Highlight;\n	}\n	.sep,\n	.item + .item::before {\n		background: CanvasText;\n	}\n}\n";
+var status_bar_default = ":host {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: var(--office-status-bar-height);\n	padding: 0 var(--office-space-2);\n	font-size: var(--office-font-size-xs);\n	background: var(--office-surface);\n	color: var(--office-foreground);\n	border-top: var(--office-border-width) solid var(--office-border);\n	font-family: var(--office-font);\n}\n::slotted([slot='end']) {\n	margin-inline-start: auto;\n}\n.bar {\n	display: contents;\n}\n[hidden] {\n	display: none !important;\n}\n:host([data-controlled]) {\n	display: block;\n	flex: none;\n	padding: 0;\n	gap: 0;\n}\n:host([data-controlled]) .bar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	width: 100%;\n	min-height: var(--office-status-bar-height);\n	padding: var(--office-space-0) var(--office-space-2);\n	color: var(--office-muted-foreground);\n}\n:host([data-controlled]) ::slotted([slot='end']) {\n	margin-inline-start: 0;\n}\n.items {\n	display: flex;\n	align-items: center;\n	min-width: 0;\n}\n.item {\n	flex: none;\n	white-space: nowrap;\n}\n.item + .item::before {\n	content: '';\n	display: inline-block;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-2);\n	vertical-align: middle;\n	background: var(--office-border);\n	opacity: var(--office-status-bar-separator-opacity);\n}\n.item.saving {\n	color: var(--office-warning);\n}\n.item.error {\n	color: var(--office-danger);\n}\n.spacer {\n	flex: 1;\n}\n.toggles,\n.group {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-3);\n	margin: 0 var(--office-space-0);\n	background: var(--office-border);\n	opacity: var(--office-status-bar-separator-opacity);\n}\n.bar button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-xs);\n	min-height: var(--office-control-height-xs);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.bar button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button[aria-pressed='true'] {\n	color: var(--office-accent);\n}\n.bar button:active {\n	opacity: 0.8;\n}\n.bar button:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.bar svg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.toggle svg,\n.zoom-step svg {\n	width: var(--office-icon-size-sm);\n	height: var(--office-icon-size-sm);\n}\n.zoom-fit {\n	min-width: var(--office-zoom-value-width);\n	font-variant-numeric: tabular-nums;\n}\n@media (max-width: 767px) {\n	.narrow-hide,\n	.toggle .label {\n		display: none !important;\n	}\n}\n@media (pointer: coarse) {\n	.bar button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	:host {\n		background: Canvas;\n		color: CanvasText;\n		border-top-color: CanvasText;\n	}\n	.bar button {\n		color: ButtonText;\n	}\n	.bar button:hover {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.bar button[aria-pressed='true'] {\n		border: var(--office-border-width) solid Highlight;\n	}\n	.bar button:focus-visible {\n		outline-color: Highlight;\n	}\n	.sep,\n	.item + .item::before {\n		background: CanvasText;\n	}\n}\n";
 
 // src/chrome/status-bar.ts
 var OfficeUiStatusBar = class extends OfficeElement {
@@ -3958,6 +4334,7 @@ var OfficeUiStatusBar = class extends OfficeElement {
 				</span>
 				<slot></slot>
 				<span class="spacer" ?hidden=${!state}></span>
+				<slot name="summary"></slot>
 				<span class="toggles" ?hidden=${togglesHidden}>
 					${repeat(
       toggles,
@@ -4186,7 +4563,7 @@ function matchTitleBarCommands(search, query) {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/title-bar.css?raw
-var title_bar_default = ":host {\n	display: block;\n	flex: none;\n}\n:host([data-empty]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\n.bar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	width: 100%;\n	height: var(--office-title-bar-height);\n	padding: 0 var(--office-space-2);\n	border-bottom: var(--office-border-width) solid var(--office-title-bar-border);\n	background: var(--office-title-bar-background);\n	color: var(--office-title-bar-foreground);\n	font: var(--office-font-size-xs)/var(--office-line-height-tight) var(--office-font);\n	user-select: none;\n}\n:host([placement='belowRibbon']) .bar {\n	height: auto;\n	min-height: var(--office-title-bar-below-height);\n	padding-block: var(--office-space-0);\n}\n.mark {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	width: var(--office-title-bar-mark-size);\n	height: var(--office-title-bar-mark-size);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-title-bar-mark-background);\n	color: var(--office-title-bar-mark-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n}\n.autosave {\n	flex: none;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	padding: 0 var(--office-space-0) 0 var(--office-space-1-5);\n	white-space: nowrap;\n}\n.label,\n.dot,\n.status {\n	color: var(--office-muted-foreground);\n	white-space: nowrap;\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-4);\n	margin: 0 var(--office-space-1);\n	background: var(--office-title-bar-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	min-width: 0;\n}\n.qat button,\n.results button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-md);\n	min-height: var(--office-control-height-md);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.qat button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.qat button:active:not(:disabled) {\n	opacity: 0.7;\n}\n.qat button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n.qat small {\n	font-size: var(--office-font-size-xs);\n	white-space: nowrap;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.file {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n	padding: 0 var(--office-space-1);\n	flex: 0 1 auto;\n}\n.name {\n	max-width: var(--office-title-bar-name-max-width);\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	color: var(--office-title-bar-foreground);\n	font-size: var(--office-font-size-sm);\n	font-weight: var(--office-font-weight-medium);\n}\n.status.saving {\n	color: var(--office-warning);\n}\n.status.error {\n	color: var(--office-danger);\n}\n.search {\n	position: relative;\n	flex: 1;\n	display: flex;\n	justify-content: center;\n	min-width: 0;\n	padding: 0 var(--office-space-2);\n}\n.box {\n	position: relative;\n	width: 100%;\n	max-width: var(--office-title-bar-search-max-width);\n	min-width: 0;\n}\n.box > [part='search'] {\n	width: 100%;\n}\n.results {\n	position: absolute;\n	z-index: var(--office-z-popover);\n	top: calc(100% + var(--office-space-1));\n	right: 0;\n	left: 0;\n	max-height: var(--office-title-bar-results-max-height);\n	overflow-y: auto;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.05em;\n	text-transform: uppercase;\n}\n.empty {\n	padding: var(--office-space-2) var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\n.results button {\n	display: flex;\n	width: 100%;\n	justify-content: flex-start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border-radius: 0;\n	color: inherit;\n	text-align: start;\n}\n.results button:hover,\n.results button[aria-selected='true'] {\n	background: var(--office-selected);\n}\n.results .cat {\n	margin-inline-start: auto;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	text-transform: capitalize;\n}\n.results .content {\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n.end {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: flex-end;\n	gap: var(--office-space-1);\n}\n.sr {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	overflow: hidden;\n	clip-path: inset(50%);\n	white-space: nowrap;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {\n	:host(:not([placement='belowRibbon'])) {\n		display: none !important;\n	}\n}\n@media (max-width: 1100px) {\n	.qat small {\n		display: none;\n	}\n	.name {\n		max-width: var(--office-title-bar-name-max-width-narrow);\n	}\n}\n@media (pointer: coarse) {\n	.qat button,\n	.results button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n	.bar {\n		height: auto;\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.bar {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.mark {\n		border: var(--office-border-width) solid CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.label,\n	.dot,\n	.status,\n	.name,\n	.qat button,\n	.results button {\n		color: CanvasText;\n	}\n	.sep {\n		background: CanvasText;\n	}\n	.qat button:hover:not(:disabled),\n	.results button:hover,\n	.results button[aria-selected='true'] {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.qat button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.results {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
+var title_bar_default = ":host {\n	display: block;\n	flex: none;\n}\n:host([data-empty]) {\n	display: none !important;\n}\n[hidden] {\n	display: none !important;\n}\n.bar {\n	box-sizing: border-box;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	width: 100%;\n	height: var(--office-title-bar-height);\n	padding: 0 var(--office-space-2);\n	border-bottom: var(--office-border-width) solid var(--office-title-bar-border);\n	background: var(--office-title-bar-background);\n	color: var(--office-title-bar-foreground);\n	font: var(--office-font-size-xs)/var(--office-line-height-tight) var(--office-font);\n	user-select: none;\n}\n:host([placement='belowRibbon']) .bar {\n	height: auto;\n	min-height: var(--office-title-bar-below-height);\n	padding-block: var(--office-space-0);\n}\n.mark {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	width: var(--office-title-bar-mark-size);\n	height: var(--office-title-bar-mark-size);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-title-bar-mark-background);\n	color: var(--office-title-bar-mark-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n}\n.autosave {\n	flex: none;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	padding: 0 var(--office-space-0) 0 var(--office-space-1-5);\n	white-space: nowrap;\n}\n.label,\n.dot,\n.status {\n	color: var(--office-muted-foreground);\n	white-space: nowrap;\n}\n.sep {\n	flex: none;\n	width: var(--office-border-width);\n	height: var(--office-space-4);\n	margin: 0 var(--office-space-1);\n	background: var(--office-title-bar-border);\n}\n.qat {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	min-width: 0;\n}\n.qat button,\n.results button {\n	box-sizing: border-box;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: var(--office-control-height-md);\n	min-height: var(--office-control-height-md);\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n	color: var(--office-muted-foreground);\n	font: inherit;\n	cursor: pointer;\n	touch-action: manipulation;\n}\n.qat button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.qat button:active:not(:disabled) {\n	opacity: 0.7;\n}\n.qat button:disabled {\n	opacity: 0.4;\n	cursor: not-allowed;\n}\n.qat small {\n	font-size: var(--office-font-size-xs);\n	white-space: nowrap;\n}\nsvg {\n	flex: none;\n	width: var(--office-icon-size);\n	height: var(--office-icon-size);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.file {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n	padding: 0 var(--office-space-1);\n	flex: 0 1 auto;\n}\n.name {\n	max-width: var(--office-title-bar-name-max-width);\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	color: var(--office-title-bar-name-foreground);\n	font-size: var(--office-font-size-sm);\n	font-weight: var(--office-font-weight-medium);\n}\n.status.saving {\n	color: var(--office-warning);\n}\n.status.error {\n	color: var(--office-danger);\n}\n.search {\n	position: relative;\n	flex: 1;\n	display: flex;\n	justify-content: center;\n	min-width: 0;\n	padding: 0 var(--office-space-2);\n}\n.box {\n	position: relative;\n	width: 100%;\n	max-width: var(--office-title-bar-search-max-width);\n	min-width: 0;\n}\n.box > [part='search'] {\n	width: 100%;\n}\n.results {\n	position: absolute;\n	z-index: var(--office-z-popover);\n	top: calc(100% + var(--office-space-1));\n	right: 0;\n	left: 0;\n	max-height: var(--office-title-bar-results-max-height);\n	overflow-y: auto;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: var(--office-popover-foreground);\n	box-shadow: var(--office-shadow-lg);\n}\n.heading {\n	padding: var(--office-space-1-5) var(--office-space-3);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	font-weight: var(--office-font-weight-bold);\n	letter-spacing: 0.05em;\n	text-transform: uppercase;\n}\n.empty {\n	padding: var(--office-space-2) var(--office-space-3);\n	color: var(--office-muted-foreground);\n}\n.results button {\n	display: flex;\n	width: 100%;\n	justify-content: flex-start;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1-5) var(--office-space-3);\n	border-radius: 0;\n	color: inherit;\n	text-align: start;\n}\n.results button:hover,\n.results button[aria-selected='true'] {\n	background: var(--office-title-bar-result-selected);\n}\n.results .cat {\n	margin-inline-start: auto;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-2xs);\n	text-transform: capitalize;\n}\n.results .content {\n	border-top: var(--office-border-width) solid var(--office-border);\n}\n.end {\n	flex: none;\n	display: flex;\n	align-items: center;\n	justify-content: flex-end;\n	gap: var(--office-space-1);\n}\n.sr {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	overflow: hidden;\n	clip-path: inset(50%);\n	white-space: nowrap;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (max-width: 767px), (max-width: 1023px) and (max-height: 520px) {\n	:host(:not([placement='belowRibbon'])) {\n		display: none !important;\n	}\n}\n@media (max-width: 1100px) {\n	.qat small {\n		display: none;\n	}\n	.name {\n		max-width: var(--office-title-bar-name-max-width-narrow);\n	}\n}\n@media (pointer: coarse) {\n	.qat button,\n	.results button {\n		min-width: var(--office-target-size-touch);\n		min-height: var(--office-target-size-touch);\n	}\n	.bar {\n		height: auto;\n		min-height: var(--office-target-size-touch);\n	}\n}\n@media (forced-colors: active) {\n	.bar {\n		border-bottom-color: CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.mark {\n		border: var(--office-border-width) solid CanvasText;\n		background: Canvas;\n		color: CanvasText;\n	}\n	.label,\n	.dot,\n	.status,\n	.name,\n	.qat button,\n	.results button {\n		color: CanvasText;\n	}\n	.sep {\n		background: CanvasText;\n	}\n	.qat button:hover:not(:disabled),\n	.results button:hover,\n	.results button[aria-selected='true'] {\n		background: Highlight;\n		color: HighlightText;\n	}\n	.qat button:disabled {\n		color: GrayText;\n		opacity: 1;\n	}\n	.results {\n		border-color: CanvasText;\n		background: Canvas;\n	}\n	button:focus-visible {\n		outline-color: Highlight;\n	}\n}\n";
 
 // src/chrome/title-bar.ts
 var EMPTY = { fileName: "" };
@@ -4985,10 +5362,11 @@ var CONTROL_DEFINERS = [
   definePasteOptions,
   defineTitleBar,
   defineRibbonSection,
-  defineGallery
+  defineGallery,
+  defineCommentsPane
 ];
 function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_COMMENTS_LABELS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, formatCommentTime, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile };