ooxml-ui 1.2.0 → 1.4.0

package/dist/xlsx/calc-preparation.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Builds the open workbook's formula dependency graph while the editor is idle. Opening a large
+ * workbook paints without it, and without this the first edit would wait for every formula to be
+ * parsed and indexed (half a second on a 66,000-formula workbook). After the first paint the work
+ * runs in `requestIdleCallback` slices of at most 8 ms (a `setTimeout` fallback elsewhere),
+ * pauses while the user types, scrolls or edits a cell, and stops when another workbook loads.
+ * An edit made before it finishes is still correct: the core completes what is left first.
+ */
+import type { EditSession } from 'ooxml-core/xlsx';
+/** The longest slice of work, so a frame is never held up noticeably. */
+export declare const SLICE_MS = 8;
+/** How long after the last key, wheel or pointer event the work stays paused. */
+export declare const QUIET_MS = 250;
+/** What a slice is told about the time it has (the part of `IdleDeadline` used here). */
+export interface IdleTime {
+    timeRemaining(): number;
+}
+/** The timers the preparation runs on (the window's, replaced in tests). */
+export interface IdleScheduler {
+    now(): number;
+    idle(run: (deadline: IdleTime) => void): () => void;
+    later(run: () => void, ms: number): () => void;
+    /** Runs `run` once the next frame has been painted. */
+    afterPaint(run: () => void): () => void;
+}
+export declare function windowScheduler(view: (Window & typeof globalThis) | null): IdleScheduler;
+export declare class CalcPreparation {
+    /** True while a cell is being edited: no slice runs then. */
+    private readonly busy;
+    private readonly scheduler;
+    private session;
+    private cancel;
+    private lastActivity;
+    constructor(host: HTMLElement, 
+    /** True while a cell is being edited: no slice runs then. */
+    busy: () => boolean, scheduler?: IdleScheduler);
+    /** Prepares `session` (the workbook just opened) after the next paint; stops earlier work. */
+    start(session: EditSession | undefined): void;
+    stop(): void;
+    /** Whether work is still waiting (tests and diagnostics). */
+    get pending(): boolean;
+    private next;
+    private slice;
+}

package/dist/xlsx/editor-core.d.ts

@@ -11,6 +11,7 @@ import { type DialogRegistry } from 'ooxml-core/xlsx/ui';
 import { DirtyState } from 'ooxml-core/xlsx/ui';
 import { type EditorLocale } from 'ooxml-core/xlsx/ui';
 import type { CalculationMode } from './backstage/index.js';
+import { CalcPreparation } from './calc-preparation.js';
 import { type XlsxCollaboration } from './collaboration.js';
 import type { EditorThemeMode, XlsxTheme } from './theme/index.js';
 /** What the shell exposes back to the core (filled in when the element connects). */
@@ -44,6 +45,8 @@ export declare class EditorCore {
     readonly ctx: EditorContext;
     /** Co-editing over `ooxml-core/collab`; undo and redo go through it while shared. */
     readonly collab: XlsxCollaboration;
+    /** Builds the formula graph in idle time after a workbook opens. */
+    readonly calcPreparation: CalcPreparation;
     private gridController;
     private readonly modelListeners;
     private stopSession;

package/dist/xlsx/ribbon-actions.d.ts

@@ -1,10 +1,11 @@
 /**
  * The controls at the right end of Excel's ribbon tab row: the Editing / Viewing selector, the
- * Comments toggle and Share, in that order, as Excel 365 places them. They sit in the shared
- * ribbon's `actions` slot; the title bar keeps the file name, search and the people in a shared
- * session.
+ * Comments toggle and Share, in that order, as Excel 365 places them. The shared
+ * `office-ui-ribbon-actions` element draws them (Word uses the same one) in the shared ribbon's
+ * `actions` slot; the title bar keeps the file name, search and the people in a shared session.
  */
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
+import { type OfficeUiRibbonActions } from '../ribbon/ribbon-actions.js';
 import type { XlsxCollaborationState } from './collaboration-types.js';
 export interface RibbonActionsHandlers {
     setReadOnly(readOnly: boolean): void;
@@ -13,7 +14,7 @@ export interface RibbonActionsHandlers {
     collaboration?(): XlsxCollaborationState;
 }
 export interface RibbonActions {
-    readonly element: HTMLElement;
+    readonly element: OfficeUiRibbonActions;
     /** Re-reads read-only, sharing and the comments pane state. */
     refresh(): void;
     relocalize(): void;

package/dist/xlsx.js

@@ -1,24 +1,24 @@
-import './chunk-YP5S7DTT.js';
-import { defineSmartArt } from './chunk-Y2E22JVO.js';
-import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-AYXFLBSV.js';
-export { XLSX_EDITOR_EVENTS } from './chunk-AYXFLBSV.js';
+import './chunk-R3LV6SGC.js';
+import { defineSmartArt } from './chunk-NYRRH2MD.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-L4XGRNHF.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-L4XGRNHF.js';
 import './chunk-SNV6YKPC.js';
-import { shadcnBridge } from './chunk-JAJFLFAV.js';
-import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, defineCommentsPane, parseSvgPreview } from './chunk-7FNDOWTX.js';
-import { getIcon, registerIcon } from './chunk-BOX43CZD.js';
-import { definePresence } from './chunk-VUB44CAJ.js';
-import { withTokens } from './chunk-YK2DPYMU.js';
-import './chunk-XNCWB2X6.js';
+import { shadcnBridge } from './chunk-56A2JK63.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, defineCommentsPane, parseSvgPreview } from './chunk-BOIZWKM7.js';
+import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
+import { definePresence } from './chunk-TWQ45BFL.js';
+import { withTokens } from './chunk-IY7QJLQG.js';
+import './chunk-2WLRFPMW.js';
 import { SPECIAL_CODES, FRACTION_CODES, AUTOSUM_FUNCTIONS, themeToCssVars, lightTheme, darkTheme, ICON_ACCENTS, ICON_PATHS, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, normalizeEditorLocale, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, historyOf, onRibbonTabsChange, activeChart, editChart, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, formulaCommands, dataCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, viewing, activeTable, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, evaluateRef, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
 export { EDITOR_LOCALES, THEME_KEYS, normalizeEditorLocale, registerRibbonTabs, themeToCssVars, darkTheme as xlsxDarkTheme, lightTheme as xlsxLightTheme } from 'ooxml-core/xlsx/ui';
-import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, usedRange, chartGradientStopTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
+import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatSelectionStat, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, usedRange, chartGradientStopTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
 import { hyperlinkPolicy } from 'ooxml-core/opc';
 import { resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
 import { render } from 'lit';
 import { RECT_GRADIENT_DIRECTIONS, OFFICE_GRADIENT_PRESETS, officeGradientPresetId, officeGradientPresetFill, resolveDrawingColor, drawingColorBrightness, drawingColorCss, rectGradientDirection } from 'ooxml-core/diagram';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/shell.css?raw
-var shell_default = "/* Frame, title bar and status bar. Mirrors docx-viewer's chrome (styles/base.css,\n   chrome-titlebar.css, status-dialogs.css) with --xve-* tokens. */\n:host {\n	--xl: var(--xve-primary);\n	--xl-strong: color-mix(in srgb, var(--xve-primary) 70%, #000);\n	--xl-soft: color-mix(in srgb, var(--xve-primary) 12%, transparent);\n	--accent-soft: var(--xl-soft);\n	--ink: var(--xve-foreground);\n	--muted: var(--xve-muted-foreground);\n	--line: var(--xve-border);\n	--surface: var(--xve-card);\n	--chrome: var(--xve-background);\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	color: var(--ink);\n	font:\n		13px/1.35 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-frame {\n	position: relative;\n	display: flex;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	overflow: hidden;\n	background: var(--surface);\n}\n:focus-visible {\n	outline: 2px solid var(--xve-ring);\n	outline-offset: 1px;\n}\n[hidden],\n[data-xve-hidden] {\n	display: none !important;\n}\n.xve-icon {\n	flex: none;\n}\n.xve-icon-button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 28px;\n	height: 28px;\n	padding: 0 6px;\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.xve-icon-button:hover:not(:disabled),\n.xve-icon-button[aria-pressed='true'] {\n	background: var(--xl-soft);\n}\n.xve-icon-button:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n\n/* Workspace: formula bar, grid and sheet tabs between the ribbon and the status bar. */\n.xve-workspace {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--xve-sheet-bg);\n}\n.xve-formula-row {\n	flex: none;\n	min-width: 0;\n	border-bottom: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-grid-host {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	overflow: hidden;\n	background: var(--xve-sheet-bg);\n	color-scheme: light;\n}\n.xve-grid-host > * {\n	flex: 1;\n	min-width: 0;\n}\n.xve-tabs-row {\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n	background: var(--chrome);\n}\n.xve-empty {\n	position: absolute;\n	z-index: 5;\n	inset: 0;\n	display: grid;\n	place-items: center;\n	color: var(--muted);\n	background: var(--chrome);\n}\n:host([show-formula-bar='false']) .xve-formula-row,\n:host([show-toolbar='false']) .xve-ribbon {\n	display: none;\n}\n\n/* Title bar: drawn by the shared office-ui-title-bar; the mark, background and borders come from its tokens. */\n.xve-titlebar {\n	display: block;\n	flex: none;\n	--office-title-bar-background: var(--chrome);\n	--office-title-bar-foreground: var(--ink);\n	--office-title-bar-border: var(--line);\n	--office-title-bar-mark-background: var(--xl);\n	--office-title-bar-mark-foreground: var(--xve-primary-foreground);\n}\n\n/* Ribbon tab row, right end (the shared ribbon's actions slot): Editing / Viewing, Comments and\n   Share, as Excel 365 places them. */\n.xve-ribbon-actions {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	padding-inline-start: 8px;\n}\n.xve-mode {\n	position: relative;\n	display: inline-flex;\n	align-items: center;\n	height: 28px;\n	border-radius: 4px;\n	color: var(--ink);\n}\n.xve-mode > .ribbon-icon {\n	position: absolute;\n	inset-inline-start: 8px;\n	pointer-events: none;\n}\n.xve-mode-select {\n	height: 28px;\n	padding: 0 6px 0 30px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-comments-button {\n	gap: 6px;\n	border: 1px solid var(--line);\n}\n.xve-share-button {\n	display: inline-flex;\n	align-items: center;\n	gap: 6px;\n	height: 28px;\n	padding: 0 12px;\n	border: 1px solid var(--xl);\n	border-radius: 4px;\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-share-button:hover,\n.xve-share-button[aria-pressed='true'] {\n	border-color: var(--xl-strong);\n	background: var(--xl-strong);\n}\n.xve-mode-select:focus-visible,\n.xve-comments-button:focus-visible,\n.xve-share-button:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: 1px;\n}\n/* Narrow windows keep the icons and drop the labels, as Office's simplified layout does. */\n@media (max-width: 900px) {\n	.xve-action-label {\n		display: none;\n	}\n}\n\n/* Status bar: drawn by the shared office-ui-status-bar; this places it and styles the slotted stats. */\n.xve-status {\n	display: block;\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n}\n.xve-status-stats {\n	margin-inline-end: 10px;\n	overflow: hidden;\n	color: var(--ink);\n	font-size: 11px;\n	white-space: nowrap;\n}\n\n@media (max-width: 760px) {\n	.xve-status-stats {\n		display: none;\n	}\n}\n";
+var shell_default = "/* Frame, title bar and status bar. Mirrors docx-viewer's chrome (styles/base.css,\n   chrome-titlebar.css, status-dialogs.css) with --xve-* tokens. */\n:host {\n	--xl: var(--xve-primary);\n	--xl-strong: color-mix(in srgb, var(--xve-primary) 70%, #000);\n	--xl-soft: color-mix(in srgb, var(--xve-primary) 12%, transparent);\n	--accent-soft: var(--xl-soft);\n	--ink: var(--xve-foreground);\n	--muted: var(--xve-muted-foreground);\n	--line: var(--xve-border);\n	--surface: var(--xve-card);\n	--chrome: var(--xve-background);\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	color: var(--ink);\n	font:\n		13px/1.35 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-frame {\n	position: relative;\n	display: flex;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	overflow: hidden;\n	background: var(--surface);\n}\n:focus-visible {\n	outline: 2px solid var(--xve-ring);\n	outline-offset: 1px;\n}\n[hidden],\n[data-xve-hidden] {\n	display: none !important;\n}\n.xve-icon {\n	flex: none;\n}\n.xve-icon-button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 28px;\n	height: 28px;\n	padding: 0 6px;\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.xve-icon-button:hover:not(:disabled),\n.xve-icon-button[aria-pressed='true'] {\n	background: var(--xl-soft);\n}\n.xve-icon-button:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n\n/* Workspace: formula bar, grid and sheet tabs between the ribbon and the status bar. */\n.xve-workspace {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--xve-sheet-bg);\n}\n.xve-formula-row {\n	flex: none;\n	min-width: 0;\n	border-bottom: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-grid-host {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	overflow: hidden;\n	background: var(--xve-sheet-bg);\n	color-scheme: light;\n}\n.xve-grid-host > * {\n	flex: 1;\n	min-width: 0;\n}\n.xve-tabs-row {\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n	background: var(--chrome);\n}\n.xve-empty {\n	position: absolute;\n	z-index: 5;\n	inset: 0;\n	display: grid;\n	place-items: center;\n	color: var(--muted);\n	background: var(--chrome);\n}\n:host([show-formula-bar='false']) .xve-formula-row,\n:host([show-toolbar='false']) .xve-ribbon {\n	display: none;\n}\n\n/* Title bar: drawn by the shared office-ui-title-bar; the mark, background and borders come from its tokens. */\n.xve-titlebar {\n	display: block;\n	flex: none;\n	--office-title-bar-background: var(--chrome);\n	--office-title-bar-foreground: var(--ink);\n	--office-title-bar-border: var(--line);\n	--office-title-bar-mark-background: var(--xl);\n	--office-title-bar-mark-foreground: var(--xve-primary-foreground);\n}\n\n/* Status bar: drawn by the shared office-ui-status-bar; this places it and styles the slotted stats. */\n.xve-status {\n	display: block;\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n}\n.xve-status-stats {\n	margin-inline-end: 10px;\n	overflow: hidden;\n	color: var(--ink);\n	font-size: 11px;\n	white-space: nowrap;\n}\n\n@media (max-width: 760px) {\n	.xve-status-stats {\n		display: none;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/ribbon.css?raw
 var ribbon_default = "/* Ribbon: tabs, panels, groups and controls. Mirrors docx-viewer's styles/ribbon*.css. */\n.xve-ribbon-gallery[data-office-gallery] .trigger {\n	flex-direction: column;\n	justify-content: center;\n	min-width: 56px;\n	height: 78px;\n	white-space: normal;\n	text-align: center;\n}\n.xve-ribbon-gallery[data-office-gallery] .trigger > svg {\n	width: 28px;\n	height: 28px;\n}\n.xve-ribbon-gallery[data-office-gallery] .trigger > span:not([aria-hidden]) {\n	max-width: 56px;\n}\n.xve-ribbon {\n	position: relative;\n	display: flex;\n	flex: none;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--surface);\n	border-bottom: 1px solid var(--line);\n}\n/* The tab row, File button and collapse button are the shared office-ui-ribbon; these colour it. */\n.xve-ribbon {\n	--office-ribbon-contextual: #0f7b6c;\n}\n.xve-ribbon::part(file) {\n	font-weight: 600;\n}\n.ribbon-panel {\n	display: flex;\n	flex: none;\n	box-sizing: border-box;\n	height: 104px;\n	min-width: 0;\n	align-items: stretch;\n	gap: 4px;\n	padding: 6px 10px 4px;\n	overflow-x: auto;\n	overflow-y: hidden;\n	scrollbar-width: thin;\n}\n.ribbon-group {\n	position: relative;\n	display: flex;\n	flex: 0 0 auto;\n	align-items: flex-start;\n	min-width: 0;\n	gap: 2px;\n	padding: 2px 10px 18px 2px;\n	border-right: 1px solid var(--line);\n}\n.ribbon-group:last-child {\n	border: 0;\n}\n.ribbon-group::after {\n	position: absolute;\n	right: 0;\n	bottom: 2px;\n	left: 0;\n	color: var(--muted);\n	font-size: 10px;\n	line-height: 1.1;\n	text-align: center;\n	white-space: nowrap;\n	content: attr(data-caption);\n}\n.ribbon-caption-sizer {\n	position: absolute;\n	visibility: hidden;\n	font-size: 10px;\n	white-space: nowrap;\n}\n.ribbon-stack {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n}\n.ribbon-stack > .ribbon-stack {\n	flex-direction: row;\n	align-items: center;\n}\n.ribbon-separator {\n	align-self: stretch;\n	width: 1px;\n	margin: 2px 3px;\n	background: var(--line);\n}\n.ribbon-stack > .ribbon-separator {\n	width: auto;\n	height: 1px;\n}\n.ribbon-stack > .ribbon-stack > .ribbon-separator {\n	width: 1px;\n	height: 20px;\n}\n\n/* Buttons */\n.ribbon-group button {\n	flex: none;\n	min-width: 28px;\n	height: 28px;\n	max-width: 100%;\n	padding: 0 4px;\n	overflow: hidden;\n	border: 1px solid transparent;\n	border-radius: 4px;\n	background: transparent;\n	color: var(--ink);\n	font:\n		400 12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-group button:hover:not(:disabled) {\n	border-color: var(--line);\n	background: var(--accent-soft);\n}\n.ribbon-group button[aria-pressed='true'],\n.ribbon-group button[aria-expanded='true'] {\n	border-color: color-mix(in srgb, var(--xl) 45%, transparent);\n	background: color-mix(in srgb, var(--xl) 20%, transparent);\n}\n.ribbon-group button:active:not(:disabled) {\n	background: color-mix(in srgb, var(--xl) 28%, transparent);\n}\n.ribbon-group button:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -2px;\n}\n.ribbon-group button:disabled,\n.ribbon-group input:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n.ribbon-group button.ribbon-small {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: 4px;\n	height: 24px;\n	padding: 0 3px;\n}\n.ribbon-group button.ribbon-small.ribbon-labelled {\n	justify-content: flex-start;\n	padding: 0 6px 0 4px;\n}\n.ribbon-group button.ribbon-large {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: 2px;\n	width: auto;\n	min-width: 48px;\n	height: 76px;\n	padding: 3px 3px 2px;\n	font-size: 11px;\n	line-height: 1.15;\n	white-space: normal;\n	text-align: center;\n}\n.ribbon-large > .ribbon-icon:last-child:not(:first-child) {\n	margin-top: auto;\n}\n.ribbon-large > span,\n.ribbon-caption {\n	/* Two balanced lines (see ribbon/caption.ts); the button grows to the widest. */\n	white-space: pre;\n}\n.ribbon-icon {\n	flex: none;\n}\n.ribbon-icon[data-icon$='-caret'],\n.ribbon-icon[data-icon='caret'] {\n	opacity: 0.8;\n}\n\n/* Split buttons: a main half and a caret that opens a menu or the colour grid. */\n.ribbon-split {\n	display: inline-flex;\n	align-items: stretch;\n}\n.ribbon-split.ribbon-split-large {\n	flex-direction: column;\n}\n.ribbon-group .ribbon-split > button:first-child {\n	border-top-right-radius: 0;\n	border-bottom-right-radius: 0;\n}\n.ribbon-group .ribbon-split > .ribbon-caret {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	padding: 0;\n	border-top-left-radius: 0;\n	border-bottom-left-radius: 0;\n}\n.ribbon-group .ribbon-split-large > button:first-child {\n	height: 46px;\n	border-radius: 4px 4px 0 0;\n}\n.ribbon-group .ribbon-split-large > .ribbon-caret {\n	width: auto;\n	height: 26px;\n	border-radius: 0 0 4px 4px;\n	font-size: 11px;\n	flex-direction: column;\n	gap: 0;\n}\n.ribbon-color {\n	position: relative;\n}\n.ribbon-group button.ribbon-color::after {\n	position: absolute;\n	right: 4px;\n	bottom: 2px;\n	left: 4px;\n	height: 3px;\n	background: var(--bar, transparent);\n	outline: 1px solid var(--line);\n	content: '';\n}\n\n/* Editable combo boxes (font name and size) and plain selects. */\n.ribbon-combo {\n	display: inline-flex;\n	align-items: stretch;\n	height: 24px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n}\n.ribbon-combo:focus-within {\n	border-color: var(--xl);\n	outline: 1px solid var(--xl);\n}\n.ribbon-combo input {\n	flex: 1;\n	min-width: 0;\n	padding: 0 6px;\n	border: 0;\n	background: transparent;\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	outline: none;\n}\n.ribbon-group .ribbon-combo .ribbon-caret {\n	width: 18px;\n	min-width: 18px;\n	height: 100%;\n	padding: 0;\n	border: 0;\n	border-radius: 0;\n}\n\n/* Plain drop-downs (Number Format) and gallery previews. */\n.ribbon-group select.ribbon-select {\n	height: 24px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n}\n.ribbon-group select.ribbon-select:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -1px;\n}\n.ribbon-gallery-preview {\n	display: block;\n	height: 36px;\n	margin-bottom: 3px;\n	border: 1px solid var(--line);\n	border-radius: 2px;\n	background: #fff;\n	color: #1f1f1f;\n	font-size: 11px;\n	line-height: 36px;\n	text-align: center;\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n}\n.ribbon-gallery-preview > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n\n/* Dialog launcher: the corner arrow of a group. */\n.ribbon-group button.ribbon-launcher {\n	position: absolute;\n	right: 2px;\n	bottom: 0;\n	z-index: 1;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	height: 14px;\n	padding: 0;\n	color: var(--muted);\n}\n\n/* Collapsed groups: a narrow ribbon folds its rightmost groups into one dropdown each. */\n.ribbon-group > .ribbon-overflow-button {\n	display: none;\n}\n.ribbon-group[data-collapsed] {\n	padding-right: 4px;\n}\n.ribbon-group[data-collapsed] > :not(.ribbon-overflow-button) {\n	display: none !important;\n}\n.ribbon-group[data-collapsed] > button.ribbon-overflow-button {\n	display: flex;\n}\n.ribbon-group[data-collapsed]::after {\n	display: none;\n}\n.ribbon-overflow-panel .ribbon-group {\n	height: 84px;\n	padding-right: 2px;\n	border: 0;\n}\n\n/* KeyTips */\n.xve-keytip {\n	position: absolute;\n	bottom: -2px;\n	left: 50%;\n	z-index: 70;\n	min-width: 16px;\n	padding: 1px 4px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: #1f1f1f;\n	color: #fff;\n	font:\n		600 11px/14px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-align: center;\n	pointer-events: none;\n	transform: translateX(-50%);\n}\n.xve-keytip-command {\n	position: fixed;\n	bottom: auto;\n}\n\n/* Accent hues on command icons, as in Office. */\n:host {\n	--ribbon-accent-blue: #2b7cd3;\n	--ribbon-accent-green: #2f9e5f;\n	--ribbon-accent-red: #d13438;\n	--ribbon-accent-orange: #d9822b;\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([theme='light'])) {\n		--ribbon-accent-blue: #5ea5f0;\n		--ribbon-accent-green: #5cc98a;\n		--ribbon-accent-red: #f07a7d;\n		--ribbon-accent-orange: #f0a35e;\n	}\n}\n:host([theme='dark']) {\n	--ribbon-accent-blue: #5ea5f0;\n	--ribbon-accent-green: #5cc98a;\n	--ribbon-accent-red: #f07a7d;\n	--ribbon-accent-orange: #f0a35e;\n}\n.ribbon-icon[data-accent='blue'] {\n	color: var(--ribbon-accent-blue);\n}\n.ribbon-icon[data-accent='green'] {\n	color: var(--ribbon-accent-green);\n}\n.ribbon-icon[data-accent='red'] {\n	color: var(--ribbon-accent-red);\n}\n.ribbon-icon[data-accent='orange'] {\n	color: var(--ribbon-accent-orange);\n}\n";
@@ -14605,42 +14605,36 @@ function createRibbon(ctx, handlers) {
 // src/xlsx/ribbon-actions.ts
 function createRibbonActions(ctx, handlers) {
   const doc = ctx.host.ownerDocument;
-  const element = el2(doc, "div", "xve-ribbon-actions");
+  defineRibbonActions(doc.defaultView?.customElements);
+  const element = doc.createElement("office-ui-ribbon-actions");
+  element.className = "xve-ribbon-actions";
   element.slot = "actions";
-  const modeBox = el2(doc, "label", "xve-mode");
-  const mode = el2(doc, "select", "xve-mode-select");
-  mode.append(new Option("", "editing"), new Option("", "viewing"));
-  mode.addEventListener("change", () => handlers.setReadOnly(mode.value === "viewing"));
-  modeBox.append(ribbonIcon(doc, "pencil", 16), mode);
-  const labelled2 = (className, icon7) => {
-    const button2 = el2(doc, "button", className);
-    button2.type = "button";
-    const text3 = el2(doc, "span", "xve-action-label");
-    button2.append(ribbonIcon(doc, icon7, 16), text3);
-    return { button: button2, text: text3 };
-  };
-  const comments = labelled2("xve-icon-button xve-comments-button", "comments");
-  comments.button.addEventListener("click", () => void ctx.commands.run("review.show-comments"));
-  const share = labelled2("xve-share-button", "share");
-  share.button.addEventListener("click", () => void ctx.commands.run("file.share"));
-  element.append(modeBox, comments.button, share.button);
+  element.addEventListener(
+    "office-ribbon-mode",
+    (event) => handlers.setReadOnly(event.detail.mode === "viewing")
+  );
+  element.addEventListener("office-ribbon-comments", () => {
+    void ctx.commands.run("review.show-comments");
+  });
+  element.addEventListener("office-ribbon-share", () => void ctx.commands.run("file.share"));
   const relocalize = () => {
-    mode.setAttribute("aria-label", ctx.t("Editing mode"));
-    mode.title = ctx.t("Editing mode");
-    mode.options[0].textContent = ctx.t("Editing");
-    mode.options[1].textContent = ctx.t("Viewing");
-    comments.text.textContent = ctx.t("Comments");
-    comments.button.title = ctx.t("Show comments");
-    share.text.textContent = ctx.t("Share");
-    share.button.title = ctx.t("Share");
+    element.modeLabel = ctx.t("Editing mode");
+    element.modes = [
+      { value: "editing", label: ctx.t("Editing") },
+      { value: "viewing", label: ctx.t("Viewing") }
+    ];
+    element.commentsLabel = ctx.t("Comments");
+    element.commentsTitle = ctx.t("Show comments");
+    element.shareLabel = ctx.t("Share");
+    element.shareTitle = ctx.t("Share");
     refresh();
   };
   const refresh = () => {
-    mode.value = ctx.readOnly() ? "viewing" : "editing";
-    share.button.hidden = !ctx.commands.get("file.share") || handlers.isHidden("file.share");
-    share.button.setAttribute("aria-pressed", String(Boolean(handlers.collaboration?.().active)));
+    element.mode = ctx.readOnly() ? "viewing" : "editing";
+    element.noShare = !ctx.commands.get("file.share") || handlers.isHidden("file.share");
+    element.sharePressed = Boolean(handlers.collaboration?.().active);
     const showComments = ctx.commands.get("review.show-comments");
-    comments.button.hidden = !showComments;
+    element.noComments = !showComments;
     if (!showComments) return;
     let pressed = false;
     try {
@@ -14648,7 +14642,7 @@ function createRibbonActions(ctx, handlers) {
     } catch {
       pressed = false;
     }
-    comments.button.setAttribute("aria-pressed", String(pressed));
+    element.commentsPressed = pressed;
   };
   relocalize();
   return { element, refresh, relocalize };
@@ -14821,7 +14815,8 @@ function statisticsText(ctx, shown2) {
     if (!shown2.has(key)) continue;
     const value = key === "count" ? stats.count : key === "numericCount" ? stats.numericCount : key === "sum" ? stats.numericCount ? stats.sum : void 0 : stats[key];
     if (value === void 0) continue;
-    parts.push(`${ctx.t(STAT_LABELS[key])}: ${formatNumber(locale, value)}`);
+    const text3 = key === "count" || key === "numericCount" ? formatNumber(locale, value) : formatSelectionStat(workbook, stats, value);
+    parts.push(`${ctx.t(STAT_LABELS[key])}: ${text3}`);
   }
   return parts.join("    ");
 }
@@ -15284,6 +15279,94 @@ function buildShell(core) {
   };
 }
 
+// src/xlsx/calc-preparation.ts
+var SLICE_MS = 8;
+var QUIET_MS = 250;
+var ACTIVITY = ["keydown", "wheel", "pointerdown", "touchmove"];
+function windowScheduler(view) {
+  const clock = () => (view?.performance ?? performance).now();
+  const later = (run, ms) => {
+    const id = setTimeout(run, ms);
+    return () => clearTimeout(id);
+  };
+  return {
+    now: clock,
+    later,
+    afterPaint(run) {
+      if (!view || typeof view.requestAnimationFrame !== "function") return later(run, 0);
+      let cancelTimer;
+      const id = view.requestAnimationFrame(() => {
+        cancelTimer = later(run, 0);
+      });
+      return () => {
+        view.cancelAnimationFrame(id);
+        cancelTimer?.();
+      };
+    },
+    idle(run) {
+      if (view && typeof view.requestIdleCallback === "function") {
+        const id = view.requestIdleCallback(run);
+        return () => view.cancelIdleCallback(id);
+      }
+      const start = clock();
+      return later(() => run({ timeRemaining: () => SLICE_MS - (clock() - start) }), 1);
+    }
+  };
+}
+var CalcPreparation = class {
+  constructor(host, busy, scheduler = windowScheduler(host.ownerDocument.defaultView)) {
+    this.busy = busy;
+    this.scheduler = scheduler;
+    const active2 = () => {
+      this.lastActivity = this.scheduler.now();
+    };
+    for (const type of ACTIVITY) host.addEventListener(type, active2, { passive: true });
+  }
+  busy;
+  scheduler;
+  session;
+  cancel;
+  lastActivity = Number.NEGATIVE_INFINITY;
+  /** Prepares `session` (the workbook just opened) after the next paint; stops earlier work. */
+  start(session) {
+    this.stop();
+    if (!session) return;
+    this.session = session;
+    this.cancel = this.scheduler.afterPaint(() => this.next());
+  }
+  stop() {
+    this.cancel?.();
+    this.cancel = void 0;
+    this.session = void 0;
+  }
+  /** Whether work is still waiting (tests and diagnostics). */
+  get pending() {
+    return this.session !== void 0;
+  }
+  next() {
+    this.cancel = this.scheduler.idle((deadline) => this.slice(deadline));
+  }
+  slice(deadline) {
+    this.cancel = void 0;
+    const session = this.session;
+    if (!session) return;
+    const quietFor = this.scheduler.now() - this.lastActivity;
+    if (this.busy() || quietFor < QUIET_MS) {
+      const wait = Math.max(QUIET_MS - quietFor, 50);
+      this.cancel = this.scheduler.later(() => this.next(), wait);
+      return;
+    }
+    const end = this.scheduler.now() + Math.min(SLICE_MS, Math.max(deadline.timeRemaining(), 1));
+    let done = true;
+    try {
+      done = session.prepareCalculation({ timeRemaining: () => end - this.scheduler.now() });
+    } catch {
+    }
+    if (done) this.session = void 0;
+    else this.next();
+  }
+};
+
 // src/xlsx/collaboration-session.ts
 function createRoomSession(collab, xlsx, options, defaultName) {
   const roomId = options.roomId ?? "";
@@ -15583,6 +15666,7 @@ var EditorCore = class {
     });
     this.ctx = this.createContext();
     this.collab = collaborationFor(this);
+    this.calcPreparation = new CalcPreparation(host, () => !!this.gridController?.isEditing());
   }
   host;
   workbook;
@@ -15608,6 +15692,8 @@ var EditorCore = class {
   ctx;
   /** Co-editing over `ooxml-core/collab`; undo and redo go through it while shared. */
   collab;
+  /** Builds the formula graph in idle time after a workbook opens. */
+  calcPreparation;
   gridController;
   modelListeners = /* @__PURE__ */ new Set();
   stopSession;
@@ -15704,6 +15790,7 @@ var EditorCore = class {
       }
     }
     this.stopSession = this.session?.onChange((change) => this.onSessionChange(change));
+    this.calcPreparation.start(this.session);
     const sheets = workbook?.sheets.length ?? 0;
     const preferred = workbook?.activeSheet ?? 0;
     this.activeSheet = Math.min(Math.max(0, preferred), Math.max(0, sheets - 1));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -146,7 +146,7 @@
 		"dompurify": "^3.4.16",
 		"emf-converter": "4.8.21",
 		"lit": "^3.3.3",
-		"ooxml-core": "^1.2.0",
+		"ooxml-core": "^1.3.0",
 		"opentype.js": "^2.0.0",
 		"prosemirror-collab": "^1.3.1",
 		"prosemirror-commands": "^1.7.2",