ooxml-ui 1.21.0 → 1.23.0

package/README.md

@@ -10,13 +10,15 @@
 
 Part of [ooxml](https://github.com/ChristopherVR/ooxml#readme): **[Office](https://github.com/ChristopherVR/ooxml#ooxml-office-the-whole-suite-in-one-app)** · [Word](https://github.com/ChristopherVR/ooxml/tree/main/viewers/docx#readme) · [Excel](https://github.com/ChristopherVR/ooxml/tree/main/viewers/xlsx#readme) · [PowerPoint](https://github.com/ChristopherVR/ooxml/tree/main/viewers/pptx#readme) · [Visio](https://github.com/ChristopherVR/ooxml/tree/main/viewers/visio#readme) · [OpenTeams](https://github.com/ChristopherVR/ooxml/tree/main/viewers/teams#readme) · [Core](https://github.com/ChristopherVR/ooxml/tree/main/src/core#readme)
 
-Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint and
-Excel). Custom elements with shadow-root controls and typed events, no framework. The runtime
+Shared, format-neutral web components and styles for the Office products (Word, Excel, PowerPoint,
+Visio and Teams), and the product editors themselves as `ooxml-ui/<product>` subpaths. Custom
+elements with shadow-root controls and typed events, no framework. The runtime
 dependencies are `ooxml-core` (types and a few pure helpers) and `lit`, which every element is built on
 (see "How the elements are built").
 
 > **You do not install this package.** It is a regular `dependency` of every published editor
-> package (`docx-*-viewer`, `pptx-*-viewer` and `xlsx-*-viewer`), so installing the editor of your framework pulls it
+> package (`docx-*-viewer`, `xlsx-*-viewer`, `pptx-*-viewer`, `visio-*-viewer` and
+> `openteams-*-viewer`), so installing the editor of your framework pulls it
 > in. It is published separately only so that the editors share one copy of the controls. Do not
 > add it to your own install instructions or `package.json`; import controls through the editor
 > package, which registers them for you. Importing `ooxml-ui` directly is for
@@ -45,7 +47,7 @@ strip, task pane, backstage, account, find bar, print preview, ruler), `comments
 - **Updates are synchronous.** Setting a property or attribute redraws the shadow DOM before the call
   returns (the contract the earlier hand-built elements had and every test relies on). The team
   elements keep Lit's batched updates (`static syncUpdates = false`).
-- **Products subclass these elements** (pptx-viewer registers `pptx-ui-*` aliases that keep their own
+- **Products subclass these elements** (`ooxml-ui/pptx` registers `pptx-ui-*` aliases that keep their own
   event names and ids), so the base class keeps what those subclasses lean on: the shadow root exists
   when the constructor returns, a connected element renders on first `shadowRoot` read or in a
   microtask even if a subclass skips `super.connectedCallback()`, and a property that a product hook
@@ -64,7 +66,7 @@ strip, task pane, backstage, account, find bar, print preview, ruler), `comments
 ## Team workspace elements (`ooxml-ui/teams`)
 
 The chat and meeting pieces of the open-source Teams-style workspace (logic in `ooxml-core/teams`,
-app in the `teams-viewer` repository): `office-ui-avatar`, `-app-rail`, `-channel-list`, `-chat-list`,
+app in `viewers/teams`, the editor element in `ooxml-ui/teams`): `office-ui-avatar`, `-app-rail`, `-channel-list`, `-chat-list`,
 `-chat-composer`, `-prejoin`, `-call-grid` and `-call-controls`. Properties in, bubbling `office-*`
 events out, no data fetching; message text is always rendered as text.
 
@@ -122,6 +124,12 @@ applies at once.
 | `ooxml-ui/controls` | button, checkbox, switch, select, ribbon group, toolbar, dialog, status bar and item, zoom slider, tab strip |
 | `ooxml-ui/presence` | `<office-ui-presence>` avatar stack for collaboration awareness                                              |
 | `ooxml-ui/smartart` | `<office-ui-smartart>`: draws a core `DiagramDrawing` as SVG                                                 |
+| `ooxml-ui/teams`    | the Teams elements and `<teams-app>`                                                                         |
+| `ooxml-ui/suite`    | browser document persistence the Office suite uses                                                           |
+| `ooxml-ui/docx`     | the Word editor and viewer elements (`<docx-editor>`)                                                        |
+| `ooxml-ui/xlsx`     | the Excel editor and viewer elements (`<xlsx-editor>`)                                                       |
+| `ooxml-ui/visio`    | the Visio editor and viewer elements (`<visio-viewer>`)                                                      |
+| `ooxml-ui/pptx`     | the PowerPoint renderer, editor and web components; also `/pptx/theme`, `/loader`, `/i18n`, `/ai`, `/dom`    |
 
 Every entry declares an `import` and a `default` export condition, so CommonJS consumers on Node 20.19+ or 22.12+ load it through `require(esm)`.
 
@@ -344,9 +352,10 @@ event detail (`approximatedGeometries`, `approximatedFills`, `flattened3d`); not
 ## Scope
 
 Only what every Office product needs lives here. Product-specific ribbon content (PowerPoint
-slides, transitions, animations; Word styles and review) stays in the viewers. See
-`docs/ooxml-ui-plan.md` in the repository for what moves when, and how the `pptx-ui-*` tags
-become aliases of `office-ui-*`.
+slides, transitions, animations; Word styles and review) lives in the product's own subpath (`src/ui/src/<product>/`), not in the shared entries. The
+`pptx-ui-*` tags are thin subclasses of the `office-ui-*` elements; `docs/ooxml-ui-plan.md` in the
+repository keeps the decisions that still apply (layout, style rules, the tag aliases and the
+token map).
 
 ## Development
 
@@ -387,7 +396,7 @@ expansion budget. Set `reading: true` on a slide stage for accessible reading
 content and native media controls without editing overlays.
 
 [Core and UI source](https://github.com/ChristopherVR/ooxml) |
-[Shared UI plan](https://github.com/ChristopherVR/ooxml/blob/main/docs/ooxml-ui-plan.md)
+[Shared UI decisions](https://github.com/ChristopherVR/ooxml/blob/main/docs/ooxml-ui-plan.md)
 
 ## License
 

package/dist/{chunk-ZUDY7TXD.js → chunk-6RCASLEC.js}

@@ -1,5 +1,5 @@
 import { defineSmartArt } from './chunk-QBXYGKPB.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-VWN37QJI.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-FX6CF43K.js';
 import { installOfficeUiTheme } from './chunk-T5ARELU2.js';
 import { registerControls } from './chunk-TJ245GDD.js';
 import { definePresence } from './chunk-YZH2QS7J.js';

package/dist/{chunk-VWN37QJI.js → chunk-FX6CF43K.js}

@@ -9,6 +9,7 @@ import { filterActivity, ACTIVITY_FILTERS, localZone, startOfDay, occurrencesBet
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
 import { keyed } from 'lit/directives/keyed.js';
+import { fileCommandDetail } from 'ooxml-core/embedding';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/reset.css?raw
 var reset_default = ":host {\n	box-sizing: border-box;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\n*,\n*::before,\n*::after {\n	box-sizing: inherit;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nsvg.icon {\n	width: 1.25em;\n	height: 1.25em;\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n";
@@ -2022,7 +2023,7 @@ var TYPES = {
 };
 var OPEN_ACCEPT = ".xlsx,.xlsm,.xltx,.xls,.csv,.tsv,.txt";
 function announceFileCommand(host, command, fileName) {
-  return emit(host, "file-command", { command, ...fileName === void 0 ? {} : { fileName } });
+  return emit(host, "file-command", fileCommandDetail(command, fileName));
 }
 var extensionOf = (fileName) => /\.([^./\\]+)$/.exec(fileName)?.[1]?.toLowerCase() ?? "";
 function withExtension(fileName, extension) {

package/dist/chunk-HTIJ2EAA.js

@@ -0,0 +1,364 @@
+import { defineRibbonGroup, defineRibbonStack, defineButton, defineMenuItem, defineMenuButton } from './chunk-TJ245GDD.js';
+import { acceptedRibbonAddIns, findRibbonAddInCommand, RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
+export { RIBBON_ADD_IN_EVENT } from 'ooxml-core/ribbon';
+import { sameRenderer, sameRegionContext, hostBackstagePageId, acceptedHostBackstagePages, placeHostBackstagePages, hostBackstageItemId, withHostMenuCommands, isHostMenuEntry, resolveHostMenuCommands, withoutHiddenEntries, hostBackstageRegionId } from 'ooxml-core/embedding';
+
+function defineRibbonAddInElements(registry) {
+  if (!registry) return;
+  for (const define of [
+    defineRibbonGroup,
+    defineRibbonStack,
+    defineButton,
+    defineMenuItem,
+    defineMenuButton
+  ])
+    define(registry);
+}
+var SMALL_ROWS = 3;
+function button(doc, spec) {
+  const menu = !!spec.items?.length;
+  const el = doc.createElement(menu ? "office-ui-menu-button" : "office-ui-button");
+  if (!menu) el.setAttribute("command", spec.id);
+  el.dataset.addInCommand = spec.id;
+  el.setAttribute("label", spec.label);
+  el.setAttribute("title", spec.title ?? spec.label);
+  if (spec.icon) el.setAttribute("icon", spec.icon);
+  const small = spec.size === "small";
+  if (!menu) el.setAttribute("size", small ? "small" : "large");
+  else if (!small) el.setAttribute("variant", "stacked");
+  else el.style.setProperty("--office-target-size", "var(--office-control-height)");
+  if (spec.disabled) el.setAttribute("disabled", "");
+  for (const item of spec.items ?? []) {
+    const entry = doc.createElement("office-ui-menu-item");
+    entry.setAttribute("command", item.id);
+    entry.dataset.addInCommand = item.id;
+    entry.setAttribute("label", item.label);
+    if (item.title) entry.setAttribute("title", item.title);
+    if (item.icon) entry.setAttribute("icon", item.icon);
+    if (item.disabled) entry.setAttribute("disabled", "");
+    el.append(entry);
+  }
+  return el;
+}
+function group(doc, spec) {
+  const el = doc.createElement("office-ui-ribbon-group");
+  el.setAttribute("label", spec.label);
+  let column;
+  for (const command of spec.commands) {
+    if (command.size !== "small") {
+      column = void 0;
+      el.append(button(doc, command));
+      continue;
+    }
+    if (!column || column.childElementCount >= SMALL_ROWS) {
+      column = doc.createElement("office-ui-ribbon-stack");
+      el.append(column);
+    }
+    column.append(button(doc, command));
+  }
+  return el;
+}
+var ownTabs = (ribbon) => new Set(
+  [...ribbon.children].flatMap(
+    (child) => child instanceof HTMLElement && child.dataset.ribbonTab && !("addIn" in child.dataset) ? [child.dataset.ribbonTab] : []
+  )
+);
+var shown = /* @__PURE__ */ new WeakMap();
+var addInPanels = (ribbon) => [...ribbon.children].filter(
+  (child) => child instanceof HTMLElement && "addIn" in child.dataset
+);
+function syncRibbonAddIns(ribbon, tabs, options = {}) {
+  const doc = ribbon.ownerDocument;
+  const accepted = acceptedRibbonAddIns(tabs, ownTabs(ribbon));
+  if (accepted.length) defineRibbonAddInElements(doc.defaultView?.customElements);
+  const ids = accepted.map((tab) => tab.id);
+  const look = JSON.stringify([options.panelClass ?? "", accepted]);
+  const current = new Map(accepted.map((tab) => [tab.id, tab]));
+  const existing = addInPanels(ribbon);
+  const before = shown.get(ribbon);
+  shown.set(ribbon, { look, tabs: current });
+  if (before?.look === look && existing.length === ids.length && existing.every((panel, index) => panel.dataset.ribbonTab === ids[index]))
+    return ids;
+  for (const panel of existing) panel.remove();
+  for (const tab of accepted) {
+    const panel = doc.createElement("div");
+    if (options.panelClass) panel.className = options.panelClass;
+    panel.id = `add-in-${tab.id}-panel`;
+    panel.dataset.addIn = "";
+    panel.dataset.ribbonTab = tab.id;
+    panel.dataset.label = tab.label;
+    if (tab.keytip) panel.dataset.tabKeytip = tab.keytip;
+    const groups = tab.groups.map((spec) => group(doc, spec));
+    panel.append(...options.wrap ? options.wrap(doc, tab, groups) : groups);
+    panel.addEventListener("office-command", (event) => {
+      event.stopPropagation();
+      const id = event.detail?.command;
+      const latest = shown.get(ribbon)?.tabs.get(tab.id);
+      const command = latest && findRibbonAddInCommand(latest, id);
+      if (!command) return;
+      command.run?.();
+      ribbon.dispatchEvent(
+        new CustomEvent(RIBBON_ADD_IN_EVENT, {
+          detail: { tab: tab.id, command: command.id },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    ribbon.append(panel);
+  }
+  return ids;
+}
+var HOST_REGION_ATTRIBUTE = "data-office-region";
+var HostRegionHost = class {
+  #container;
+  #callbackKeys;
+  #attribute;
+  #label;
+  #renderer;
+  #context;
+  #result;
+  #element;
+  /** The latest context as the product passed it, callbacks included. */
+  #latest;
+  constructor(container, options = {}) {
+    this.#container = container;
+    this.#callbackKeys = /* @__PURE__ */ new Set(["close", ...options.callbackKeys ?? []]);
+    this.#attribute = options.attribute ?? HOST_REGION_ATTRIBUTE;
+    this.#label = options.label ?? "[ooxml-ui]";
+  }
+  /** The container this host fills. */
+  get container() {
+    return this.#container;
+  }
+  /** True while a renderer is mounted. */
+  get mounted() {
+    return this.#renderer !== void 0;
+  }
+  /** Mount `renderer`, or deliver a changed `context` to the mounted one. */
+  render(renderer, latest) {
+    this.#latest = latest;
+    const context = this.#stable(latest);
+    this.#container.setAttribute(this.#attribute, context.region);
+    if (!sameRenderer(renderer, this.#renderer)) {
+      this.#unmount();
+      this.#renderer = renderer;
+      this.#context = context;
+      this.#mount(renderer, context);
+      return;
+    }
+    if (this.#context && sameRegionContext(this.#context, context, this.#callbackKeys)) return;
+    this.#context = context;
+    if (this.#element) this.#element.context = context;
+    else this.#guard(() => this.#result?.update?.(context));
+  }
+  /** Tear the renderer down and empty the container. */
+  destroy() {
+    this.#unmount();
+    this.#renderer = void 0;
+    this.#context = void 0;
+    this.#latest = void 0;
+  }
+  /**
+   * `context` with its callbacks swapped for stable ones that call the latest product
+   * callback, so a renderer that kept an older context never calls a stale closure.
+   */
+  #stable(context) {
+    const latest = () => this.#latest ?? context;
+    const call = (key) => (...args) => latest()[key]?.(...args);
+    const stable = { ...context };
+    for (const key of this.#callbackKeys) if (key in context) stable[key] = call(key);
+    return stable;
+  }
+  #mount(renderer, context) {
+    if (typeof renderer === "function") {
+      const result = this.#guard(() => renderer(this.#container, context));
+      this.#result = typeof result === "function" ? { destroy: result } : result ?? void 0;
+      return;
+    }
+    const spec = typeof renderer === "string" ? { element: renderer } : renderer;
+    const element = this.#guard(() => this.#container.ownerDocument.createElement(spec.element));
+    if (!element) return;
+    Object.assign(element, spec.properties);
+    this.#element = element;
+    this.#element.context = context;
+    this.#container.append(element);
+  }
+  #unmount() {
+    const result = this.#result;
+    this.#result = void 0;
+    this.#guard(() => result?.destroy?.());
+    this.#element?.remove();
+    this.#element = void 0;
+  }
+  #guard(run) {
+    try {
+      return run();
+    } catch (error) {
+      console.error(`${this.#label} A host region renderer threw:`, error);
+      return void 0;
+    }
+  }
+};
+function createHostBackstagePages(backstage, options) {
+  let pages = [];
+  const hosts = /* @__PURE__ */ new Map();
+  const container = (page) => {
+    let host = hosts.get(page.id);
+    if (host) return host;
+    const element = backstage.ownerDocument.createElement("div");
+    element.dataset.backstagePage = hostBackstageItemId(page.id);
+    if (options.pageClass) element.className = options.pageClass;
+    element.hidden = true;
+    backstage.append(element);
+    host = new HostRegionHost(element, options.label ? { label: options.label } : {});
+    hosts.set(page.id, host);
+    return host;
+  };
+  const render = (page, host) => {
+    const region = hostBackstageRegionId(page.id);
+    host.render(page.render, options.context(region, page));
+  };
+  const drop = (id) => {
+    const host = hosts.get(id);
+    if (!host) return;
+    host.destroy();
+    host.container.remove();
+    hosts.delete(id);
+  };
+  return {
+    items(builtIn) {
+      return placeHostBackstagePages(builtIn, pages, (page) => ({
+        id: hostBackstageItemId(page.id),
+        label: page.label,
+        ...page.group === "footer" ? { group: "footer" } : {}
+      }));
+    },
+    setPages(next) {
+      pages = acceptedHostBackstagePages(next);
+      const kept = new Set(pages.map((page) => page.id));
+      for (const id of [...hosts.keys()]) if (!kept.has(id)) drop(id);
+      for (const page of pages) {
+        const host = hosts.get(page.id);
+        if (host?.mounted) render(page, host);
+      }
+    },
+    show(itemId) {
+      const id = hostBackstagePageId(itemId);
+      const page = id === void 0 ? void 0 : pages.find((candidate) => candidate.id === id);
+      if (!page) return false;
+      render(page, container(page));
+      return true;
+    },
+    refresh() {
+      for (const page of pages) {
+        const host = hosts.get(page.id);
+        if (host?.mounted) render(page, host);
+      }
+    },
+    destroy() {
+      for (const id of [...hosts.keys()]) drop(id);
+    }
+  };
+}
+function withHostMenuItems(items, commands, context) {
+  const rows = withHostMenuCommands(items, commands, context);
+  const host = /* @__PURE__ */ new Map();
+  const drawn = rows.map((row) => {
+    if (!isHostMenuEntry(row)) return row;
+    host.set(row.id, row);
+    return {
+      id: row.id,
+      label: row.label,
+      ...row.separatorBefore ? { separatorBefore: true } : {},
+      ...row.disabled ? { disabled: true } : {},
+      ...row.icon ? { icon: row.icon } : {}
+    };
+  });
+  return {
+    items: drawn,
+    run(id) {
+      const entry = host.get(id);
+      if (!entry) return false;
+      entry.onSelect();
+      return true;
+    }
+  };
+}
+var HOST_CHILD = "data-host-command";
+var hostRuns = /* @__PURE__ */ new WeakMap();
+function listen(menu) {
+  const runs = /* @__PURE__ */ new Map();
+  hostRuns.set(menu, runs);
+  menu.addEventListener("office-command", (event) => {
+    const id = event.detail?.command;
+    if (id) runs.get(id)?.onSelect();
+  });
+  return runs;
+}
+function syncHostMenuChildren(menu, commands, context) {
+  for (const child of [...menu.querySelectorAll(`:scope > [${HOST_CHILD}]`)]) child.remove();
+  const doc = menu.ownerDocument;
+  const { top, bottom } = resolveHostMenuCommands(commands, context);
+  const runs = hostRuns.get(menu) ?? listen(menu);
+  runs.clear();
+  const item = (entry) => {
+    runs.set(entry.id, entry);
+    const row = doc.createElement("office-ui-menu-item");
+    row.setAttribute(HOST_CHILD, "");
+    row.setAttribute("command", entry.id);
+    row.setAttribute("label", entry.label);
+    if (entry.icon) row.setAttribute("icon", entry.icon);
+    if (entry.disabled) row.setAttribute("disabled", "");
+    return row;
+  };
+  const separator = () => {
+    const rule = doc.createElement("office-ui-menu-separator");
+    rule.setAttribute(HOST_CHILD, "");
+    return rule;
+  };
+  const builtIn = menu.children.length > 0;
+  if (top.length) menu.prepend(...top.map(item), ...builtIn ? [separator()] : []);
+  if (bottom.length)
+    menu.append(...builtIn || top.length ? [separator()] : [], ...bottom.map(item));
+}
+var TIDY_HIDDEN = "data-separator-tidy";
+function tidyMenuSeparators(menu) {
+  const isSeparator = (node) => node.localName === "office-ui-menu-separator";
+  const separators = [];
+  const rows = [];
+  let pending = [];
+  for (const child of menu.children) {
+    if (!(child instanceof HTMLElement)) continue;
+    if (isSeparator(child)) {
+      if (child.hidden && !child.hasAttribute(TIDY_HIDDEN)) continue;
+      separators.push(child);
+      pending.push(child);
+      continue;
+    }
+    rows.push({ row: child, before: pending, separatorBefore: pending.length > 0 });
+    pending = [];
+  }
+  const starts = new Map(
+    withoutHiddenEntries(rows, (entry) => entry.row.hidden !== false).map((entry) => [
+      entry.row,
+      entry.separatorBefore
+    ])
+  );
+  const shown2 = /* @__PURE__ */ new Set();
+  let carried = [];
+  for (const entry of rows) {
+    carried = [...carried, ...entry.before];
+    if (!starts.has(entry.row)) continue;
+    const separator = carried.at(-1);
+    if (starts.get(entry.row) && separator) shown2.add(separator);
+    carried = [];
+  }
+  for (const separator of separators) {
+    const hide = !shown2.has(separator);
+    separator.hidden = hide;
+    separator.toggleAttribute(TIDY_HIDDEN, hide);
+  }
+}
+
+export { HOST_REGION_ATTRIBUTE, HostRegionHost, createHostBackstagePages, defineRibbonAddInElements, syncHostMenuChildren, syncRibbonAddIns, tidyMenuSeparators, withHostMenuItems };

package/dist/docx/backstage-pages.d.ts

@@ -2,6 +2,7 @@ import { PROPERTY_FIELDS, type DocumentModel } from 'ooxml-core/docx';
 import type { DocumentStats } from 'ooxml-core/docx';
 import type { FileCommand } from './file-commands.js';
 import type { BackstageOptions, BackstageOptionKey } from './backstage-options.js';
+import type { ResolvedWordCustomization, WordRegionContext } from './customization.js';
 /** What the File view needs from the editor; every value is read when a page opens. */
 export interface BackstageHandlers {
     fileCommand(command: FileCommand, fileName?: string): void;
@@ -21,6 +22,10 @@ export interface BackstageHandlers {
     ribbon(): HTMLElement | undefined;
     hiddenActions(): readonly string[];
     setHiddenActions(ids: string[]): void;
+    /** The host customisation: hidden pages and host pages (`backstage.extraPages`). */
+    customization(): ResolvedWordCustomization;
+    /** The context of a host page's region. */
+    regionContext(region: string): WordRegionContext;
 }
 export interface PageContext {
     handlers: BackstageHandlers;

package/dist/docx/backstage.d.ts

@@ -11,6 +11,13 @@ export interface Backstage {
     readonly isOpen: boolean;
     /** Retranslates the navigation after the editor locale changed, and redraws the open page. */
     relocalize(): void;
+    /**
+     * Re-applies the host customisation: hides the pages disabled capabilities remove, places
+     * the host pages (`backstage.extraPages`) and delivers a fresh context to mounted ones.
+     */
+    refresh(): void;
+    /** Tears the host pages down. */
+    destroy(): void;
 }
 /**
  * Word's File view. Left: Back, Info, New, Open, Save and its siblings (Save As, Print, Export)

package/dist/docx/component.d.ts

@@ -42,6 +42,7 @@ export declare class DocxEditorElement extends DocxEditorApi {
     get documentModel(): DocumentModel | null;
     set documentModel(value: DocumentModel | null);
     get readOnly(): boolean;
+    /** True when the document cannot be edited: this switch, a `viewer` role or `capabilities.edit` off. */
     set readOnly(value: boolean);
     /**
      * Shares the loaded document in a room while set; `null` leaves (see

package/dist/docx/context-menu.d.ts

@@ -1,6 +1,10 @@
 import type { EditorView } from 'prosemirror-view';
+import { type MenuItem } from './context-menu-items.js';
 import { type EditorLocale } from './localization.js';
 import type { RibbonAction } from './ribbon-action.js';
+import type { ResolvedWordCustomization } from './customization.js';
+/** `items` without the `hidden` ids; a removed group start passes its separator on. */
+export declare function withoutMenuItems(items: readonly MenuItem[], hidden: ReadonlySet<string>): MenuItem[];
 export interface ContextMenuHost {
     /** Element the menu is appended to (inside the shadow root, so theme tokens apply). */
     container: HTMLElement;
@@ -13,6 +17,8 @@ export interface ContextMenuHost {
     locale(): EditorLocale;
     run(action: RibbonAction): void;
     warn(message: string): void;
+    /** The host customisation: entries capabilities remove and host commands to add. */
+    customization(): ResolvedWordCustomization;
 }
 export interface ContextMenu {
     readonly isOpen: boolean;

package/dist/docx/customization-apply.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Applies `<docx-editor>`'s `customization` property: the capabilities reach the ribbon (through
+ * `hiddenActions`), the read-only state (a lock beside the host's switch and a viewer role), the
+ * File tab, the title bar, the context menu and the shortcuts, which all read the resolved object
+ * from `core.viewOptions.customization`.
+ */
+import type { EditorCore } from './editor-core.js';
+import { type WordCustomization, type WordRegionContext } from './customization.js';
+/** Replaces the customisation (an equal object identity is a no-op) and re-applies it. */
+export declare function setWordCustomization(core: EditorCore, value: WordCustomization | null): void;
+/** The context of a host region of `<docx-editor>` (a File tab page). */
+export declare function wordRegionContext(core: EditorCore, region: string): WordRegionContext;

package/dist/docx/customization.d.ts

@@ -0,0 +1,52 @@
+/**
+ * `<docx-editor>`'s `customization` property: the shared contract of `ooxml-core/embedding`
+ * (capabilities, host File tab pages, host context-menu commands) bound to Word. The host passes
+ * one plain object; `resolveWordCustomization` turns it into the sets every render site asks,
+ * so the ribbon, the File tab, the context menu, the shortcuts and the file commands agree.
+ */
+import { type EditorCustomization, type HostBackstagePage, type HostMenuCommand, type HostRegionContextBase, type HostRegionRenderer } from 'ooxml-core/embedding';
+import { type RibbonActionId, type WordBackstagePageId, type WordCapabilityId, type WordFileCommandId, type WordShortcutId } from 'ooxml-core/docx/ui';
+/** What a host region (a File tab page) of `<docx-editor>` receives. */
+export interface WordRegionContext extends HostRegionContextBase {
+    /** The `<docx-editor>` element: its whole public API (save, documentModel, readOnly...). */
+    readonly editor: HTMLElement;
+    /** The document's file name. */
+    readonly fileName: string;
+}
+/** What a host context-menu command of `<docx-editor>` receives: the menu's selection. */
+export interface WordMenuContext {
+    /** The selected text; empty for a caret. */
+    readonly selectedText: string;
+    /** Selection start and end, as document positions (equal for a caret). */
+    readonly from: number;
+    readonly to: number;
+    /** True when the document cannot be edited (prop, capability, protection, collaboration). */
+    readonly readOnly: boolean;
+    readonly inTable: boolean;
+    readonly onLink: boolean;
+}
+export type WordRegionRenderer = HostRegionRenderer<HTMLElement, WordRegionContext>;
+export type WordBackstagePage = HostBackstagePage<WordRegionRenderer>;
+export type WordMenuCommand = HostMenuCommand<WordMenuContext>;
+/** The whole `customization` object of `<docx-editor>`. Every field is optional. */
+export type WordCustomization = EditorCustomization<WordCapabilityId, WordRegionRenderer, WordMenuContext>;
+/** A customisation resolved into what each render site asks. */
+export interface ResolvedWordCustomization {
+    /** False when `capabilities.edit` is off: the document opens read-only. */
+    readonly canEdit: boolean;
+    /** Ribbon controls the capabilities remove, unioned with `hiddenActions` by the ribbon. */
+    readonly hiddenActions: readonly RibbonActionId[];
+    readonly fileCommands: ReadonlySet<WordFileCommandId>;
+    readonly backstagePages: ReadonlySet<WordBackstagePageId>;
+    readonly shortcuts: ReadonlySet<WordShortcutId>;
+    /** Built-in context-menu entries to remove. */
+    readonly menuItems: ReadonlySet<string>;
+    /** True when `copy` is off: the editor also refuses copy and cut from the keyboard. */
+    readonly blockCopy: boolean;
+    readonly extraPages: readonly WordBackstagePage[];
+    readonly menuCommands: readonly WordMenuCommand[];
+}
+/** Resolves a host customisation (none: everything on, nothing added). */
+export declare function resolveWordCustomization(customization?: WordCustomization | null): ResolvedWordCustomization;
+/** The resolution of "no customisation", shared so it is allocated once. */
+export declare const EMPTY_WORD_CUSTOMIZATION: ResolvedWordCustomization;

package/dist/docx/editor-chrome.d.ts

@@ -1,10 +1,12 @@
 import { type DocumentModel } from 'ooxml-core/docx';
+import { type DocumentStorage } from 'ooxml-core/embedding';
 import { type Backstage } from './backstage.js';
 import type { BackstageOptions, BackstageOptionKey } from './backstage-options.js';
 import { type FileCommand } from './file-commands.js';
 import { type EditorLocale } from './localization.js';
 import { type RibbonActions } from './ribbon-actions.js';
 import { type StatusBar } from './status-bar.js';
+import type { ResolvedWordCustomization, WordRegionContext } from './customization.js';
 import { type SaveState, type TitleBar } from './title-bar.js';
 /** What the chrome needs from the editor element; keeps component.ts free of chrome details. */
 export interface ChromeHost {
@@ -18,6 +20,8 @@ export interface ChromeHost {
     newDocument(): void;
     load(bytes: Uint8Array): Promise<void>;
     save(): Promise<Uint8Array>;
+    /** Host-owned storage for Save and Open, when the host set one. */
+    storage?(): DocumentStorage | undefined;
     print(): void;
     history(key: 'undo' | 'redo'): void;
     toggleComments(): void;
@@ -33,6 +37,10 @@ export interface ChromeHost {
     setOption(key: BackstageOptionKey, value: string): void;
     hiddenActions(): readonly string[];
     setHiddenActions(ids: string[]): void;
+    /** The resolved host customisation (`customization` property). */
+    customization(): ResolvedWordCustomization;
+    /** The context of a host region (a File tab page). */
+    regionContext(region: string): WordRegionContext;
 }
 export declare const DEFAULT_FILE_NAME = "Document1.docx";
 /**
@@ -58,9 +66,20 @@ export declare class EditorChrome {
     setSaveState(state: SaveState): void;
     setLocale(locale: EditorLocale): void;
     refresh(pageText: string, wordText: string): void;
+    /** Re-applies the host customisation to the File tab, title bar and ribbon actions. */
+    applyCustomization(): void;
     closeBackstage(): void;
     /** Runs a file command unless a host cancels the `file-command` event to handle it itself. */
     run(command: FileCommand, fileName?: string): Promise<void>;
+    /** True while a save is pending. */
+    saving: boolean;
+    /**
+     * Saves to the host's storage when there is one, else downloads a copy. An edit made while the
+     * save runs keeps the document dirty: the saved bytes do not contain it.
+     */
+    private saveDocument;
+    /** Opens from the host's storage when it can open, else shows the file picker. */
+    private open;
     private newDocument;
     private openSelectedFile;
 }