ooxml-ui 1.21.0 → 1.22.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-REJECZGV.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-DRBAJ5UO.js';
 import { installOfficeUiTheme } from './chunk-T5ARELU2.js';
 import { registerControls } from './chunk-TJ245GDD.js';
 import { definePresence } from './chunk-YZH2QS7J.js';

package/dist/index.js

@@ -1,7 +1,7 @@
-export { OFFICE_UI_TAGS, registerOfficeUi } from './chunk-ZUDY7TXD.js';
+export { OFFICE_UI_TAGS, registerOfficeUi } from './chunk-REJECZGV.js';
 export { RIBBON_ADD_IN_EVENT, defineRibbonAddInElements, syncRibbonAddIns } from './chunk-C7B7TJ2J.js';
 export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-QBXYGKPB.js';
-export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, activityTime, applyTeamsProps, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-VWN37QJI.js';
+export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, activityTime, applyTeamsProps, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-DRBAJ5UO.js';
 export { TeamsPresentationPreview, defineTeamsPresentationPreview } from './chunk-FHO7TEWA.js';
 export { BUILDING_BLOCKS_CSS, LEGACY_OFFICE_THEME_TOKENS, THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, installOfficeUiThemeFor, legacyThemeAliases, legacyThemeBridge, prepareOfficeUiBlock, shadcnBridge, themeBridge } from './chunk-T5ARELU2.js';
 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_SYMBOLS, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, attachRibbonGroupOverflow, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineChartPicker, defineCheckbox, defineColorCustom, defineColorGrid, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonActions, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineSymbolPicker, defineTabStrip, defineTaskPane, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, fitRibbonGroups, formatCommentTime, glyph, nextEnabledIndex, optionText, optionsLabels, parseOfficeSymbolCode, parseSvgPreview, personalizeSection, profileInitials, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, unavailableCategory, unavailableControl, userInterfaceSection, writeOfficeProfile } from './chunk-TJ245GDD.js';

package/dist/parse-worker.js

@@ -6,7 +6,11 @@ var worker = self;
 worker.onmessage = async (event) => {
   if (event.origin && event.origin !== self.location.origin) return;
   try {
-    const document = await loadVisio(event.data, { metafileConverter: convertMetafileToSvgTree });
+    const request = event.data;
+    const document = request instanceof ArrayBuffer ? await loadVisio(request, { metafileConverter: convertMetafileToSvgTree }) : await loadVisio(request.bytes, {
+      metafileConverter: convertMetafileToSvgTree,
+      pages: request.pages
+    });
     worker.postMessage({ ok: true, document });
   } catch (cause) {
     worker.postMessage({

package/dist/pptx/{chunk-F4IP3UEX.cjs → chunk-72NIN6QF.cjs}

@@ -81,6 +81,7 @@ var collaborationTextNativeEdit = require('ooxml-core/pptx/editor/render/collabo
 var collaborationTextSnapshotPositions = require('ooxml-core/pptx/editor/render/collaboration-text-snapshot-positions');
 var collaborationLoadOrigin = require('ooxml-core/pptx/editor/render/collaboration-load-origin');
 var collaborationDeparture = require('ooxml-core/pptx/editor/render/collaboration-departure');
+var collab = require('ooxml-core/collab');
 var slideTransitionEdits = require('ooxml-core/pptx/editor/render/slide-transition-edits');
 var diagram = require('ooxml-core/diagram');
 var slideSearch = require('ooxml-core/pptx/editor/render/slide-search');
@@ -3575,6 +3576,7 @@ chunkMF3JURQN_cjs.__export(pptx_exports, {
   wrapNotesText: () => wrapNotesText,
   wrapTextByEstimatedWidth: () => chunkG3UVZ5FO_cjs.wrapTextByEstimatedWidth,
   writeAssetFields: () => collaborationSync.writeAssetFields,
+  writeBackReport: () => writeBackReport,
   writeElementParagraphs: () => writeElementParagraphs,
   writeElementToYMap: () => collaborationSync.writeElementToYMap,
   writeSlideToYMap: () => collaborationSync.writeSlideToYMap,
@@ -7032,6 +7034,7 @@ chunkMF3JURQN_cjs.__export(render_exports, {
   wrapForeignObjectSvg: () => wrapForeignObjectSvg,
   wrapTextByEstimatedWidth: () => chunkG3UVZ5FO_cjs.wrapTextByEstimatedWidth,
   writeAssetFields: () => collaborationSync.writeAssetFields,
+  writeBackReport: () => writeBackReport,
   writeElementParagraphs: () => writeElementParagraphs,
   writeElementToYMap: () => collaborationSync.writeElementToYMap,
   writeSlideToYMap: () => collaborationSync.writeSlideToYMap,
@@ -42103,83 +42106,112 @@ function registerCollaborationTeardown(options) {
 function clearLocalAwareness(awareness) {
   awareness?.setLocalState?.(null);
 }
-var DEFAULT_DEBOUNCE_MS = 5e3;
 function createWriteBackScheduler(deps) {
-  let timer = null;
-  let generation = 0;
+  let core = null;
+  let coreKey = "";
+  let current = null;
   let unsubscribe = null;
-  function cancel() {
-    generation++;
+  let detachPageClose = null;
+  const isReady = () => current?.externalSession?.getSnapshot().synced ?? true;
+  const detachSession = () => {
     unsubscribe?.();
     unsubscribe = null;
-    if (timer !== null) {
-      clearTimeout(timer);
-      timer = null;
+  };
+  function serialize(isCurrentWrite) {
+    const ydoc = deps.getYDoc();
+    const isCurrent = () => isCurrentWrite() && isReady() && deps.getYDoc() === ydoc;
+    if (!ydoc || !current?.onWriteBack || !isReady()) return Promise.resolve(null);
+    return serializeDoc(ydoc, isCurrent);
+  }
+  async function serializeDoc(ydoc, isCurrent) {
+    if (deps.serialize) {
+      try {
+        const bytes2 = await deps.serialize(isCurrent);
+        return bytes2 && isCurrent() ? bytes2 : null;
+      } catch (error) {
+        if (!isCurrent()) return null;
+        throw error;
+      }
+    }
+    const sourceBytes = deps.getSourceBytes?.();
+    if (!sourceBytes) return null;
+    const handler = new pptx.PptxHandler();
+    await handler.load(sourceBytes.buffer);
+    if (!isCurrent()) return null;
+    const slides = collaborationSync.readSlidesFromYDoc(ydoc);
+    const merged = deps.mergeTemplateElements ? deps.mergeTemplateElements(slides, deps.getTemplateElements?.() ?? {}) : slides;
+    const bytes = await handler.save(merged, deps.getSaveOptions?.());
+    return isCurrent() ? bytes : null;
+  }
+  function coreFor(config) {
+    const retry = config.writeBackRetry;
+    const key = [
+      config.writeBackDebounceMs,
+      retry?.attempts,
+      retry?.baseDelayMs,
+      retry?.maxDelayMs
+    ].join("|");
+    if (core && key === coreKey) return core;
+    core?.dispose();
+    coreKey = key;
+    core = collab.createWriteBackScheduler({
+      debounceMs: config.writeBackDebounceMs ?? collab.DEFAULT_WRITE_BACK_DEBOUNCE_MS,
+      ...retry ? { retry } : {},
+      serialize: ({ isCurrent }) => serialize(isCurrent),
+      // Read at write time, so a host callback changed meanwhile is the one called.
+      write: (bytes) => current?.onWriteBack?.(bytes),
+      onStatus: (state) => {
+        if (state.status === "saved" || state.status === "failed" || state.status === "idle") {
+          detachSession();
+        }
+        deps.onWriteBackStatus?.();
+      }
+    });
+    return core;
+  }
+  function cancel() {
+    const config = current;
+    const ydoc = deps.getYDoc();
+    const final = core?.dirty && ydoc && config?.onWriteBack && config.role === "owner" && isReady() ? { ydoc, onWriteBack: config.onWriteBack } : null;
+    if (final) {
+      void serializeDoc(final.ydoc, () => true).then((bytes) => bytes ? final.onWriteBack(bytes) : void 0).catch(() => {
+      });
     }
+    core?.cancel();
+    detachSession();
+    detachPageClose?.();
+    detachPageClose = null;
   }
   function schedule(config) {
-    const isReady = () => config.externalSession?.getSnapshot().synced ?? true;
     if (!config.onWriteBack || config.role !== "owner" || !deps.getYDoc()) {
       return;
     }
-    cancel();
+    current = config;
+    const scheduler = coreFor(config);
+    detachSession();
     if (!isReady()) {
+      scheduler.cancel();
       return;
     }
-    const token = generation;
     if (config.externalSession) {
       const detach = config.externalSession.subscribe(() => {
-        if (!isReady()) {
-          cancel();
-        }
+        if (!isReady()) scheduler.cancel();
       });
-      if (token !== generation || !isReady()) {
+      if (!isReady()) {
         detach();
         return;
       }
       unsubscribe = detach;
     }
-    const debounceMs = config.writeBackDebounceMs ?? DEFAULT_DEBOUNCE_MS;
-    timer = setTimeout(async () => {
-      timer = null;
-      const ydoc = deps.getYDoc();
-      const isCurrent = () => token === generation && isReady() && deps.getYDoc() === ydoc;
-      try {
-        if (!ydoc || !config.onWriteBack || !isReady()) {
-          return;
-        }
-        if (deps.serialize) {
-          const bytes2 = await deps.serialize(isCurrent);
-          if (bytes2 && isCurrent()) {
-            await config.onWriteBack(bytes2);
-          }
-          return;
-        }
-        const sourceBytes = deps.getSourceBytes?.();
-        if (!sourceBytes) {
-          return;
-        }
-        const handler = new pptx.PptxHandler();
-        await handler.load(sourceBytes.buffer);
-        if (!isCurrent()) {
-          return;
-        }
-        const slides = collaborationSync.readSlidesFromYDoc(ydoc);
-        const merged = deps.mergeTemplateElements ? deps.mergeTemplateElements(slides, deps.getTemplateElements?.() ?? {}) : slides;
-        const bytes = await handler.save(merged, deps.getSaveOptions?.());
-        if (isCurrent()) {
-          await config.onWriteBack(bytes);
-        }
-      } catch {
-      } finally {
-        if (token === generation) {
-          unsubscribe?.();
-          unsubscribe = null;
-        }
-      }
-    }, debounceMs);
+    detachPageClose ??= collab.flushWriteBackOnPageClose(scheduler);
+    scheduler.schedule();
   }
-  return { schedule, cancel };
+  return {
+    schedule,
+    cancel,
+    flush: () => core?.flush() ?? Promise.resolve(),
+    getState: () => core ? collab.writeBackStateOf(core.state) : void 0
+  };
 }
 var POSITION_THRESHOLD = 2;
 var SIZE_THRESHOLD = 2;
@@ -77363,6 +77395,10 @@ function createSlidePackageClipboard(initialHost) {
 }
 
 // src/pptx/render/collaboration-state.ts
+function writeBackReport(config, state) {
+  if (!config?.onWriteBack || config.role !== "owner") return void 0;
+  return state ?? { status: "idle" };
+}
 var COLLABORATION_OFF = Object.freeze({
   active: false,
   roomId: void 0,
@@ -77395,12 +77431,13 @@ function buildCollaborationState(input) {
     roomId: input.roomId || void 0,
     status: input.status,
     synced: input.synced,
-    people
+    people,
+    ...input.writeBack ? { writeBack: input.writeBack } : {}
   };
 }
 function collaborationStatesEqual(a, b) {
   if (a === b) return true;
-  if (a.active !== b.active || a.roomId !== b.roomId || a.status !== b.status || a.synced !== b.synced || a.people.length !== b.people.length) {
+  if (a.active !== b.active || a.roomId !== b.roomId || a.status !== b.status || a.synced !== b.synced || a.people.length !== b.people.length || a.writeBack?.status !== b.writeBack?.status || a.writeBack?.lastSavedAt !== b.writeBack?.lastSavedAt || a.writeBack?.error !== b.writeBack?.error) {
     return false;
   }
   return a.people.every((person, index) => {
@@ -94855,6 +94892,7 @@ exports.withRecordEntry = withRecordEntry;
 exports.withSlideSizeOrientation = withSlideSizeOrientation;
 exports.wrapForeignObjectSvg = wrapForeignObjectSvg;
 exports.wrapNotesText = wrapNotesText;
+exports.writeBackReport = writeBackReport;
 exports.writeElementParagraphs = writeElementParagraphs;
 exports.writeStoredViewerPrefs = writeStoredViewerPrefs;
 exports.zeroDelayCssAnimation = zeroDelayCssAnimation;