Skip to content

Office mockups

X-13 – X-20 · QEditor

Office editor mockups

Full-screen mockups of the QEditor editors in a maximized qaction window, built from the office tokens, components and composites. A review strip on each page switches theme, ribbon mode, width and a forced-colors emulation; serve the site with node serve.mjs for Trace clicks.

Pilot

5 pages

The five pages the owner approves before the other 207 are drawn (spec §5.2). They fix the visual language: the merged title bar, the ribbon card, density, accent use, icon weight and the canvas.

Document

U1 · 55 pages
PageStateStatus
word.homeCompact ribbon, Home; text selection with mini toolbar; styles gallery inline (pilot)Pilot
word.home-fullFull ribbon, HomeDone
word.full-overflowFull at 60rem, … overflow menu open with grouped overflowed controlsDone
word.home-font-listFont combobox open (theme fonts, recent, all; previews)Done
word.home-color-pickerFont color picker openDone
word.styles-gallery-expandedStyles gallery expanded with footer commandsDone
word.collapsed-groupsCompact at 56rem: groups collapsed to dropdowns, one openDone
word.insertInsert tab, table grid picker openDone
word.drawDraw tab, pen flyout open, ink on pageDone
word.designDesign tab, themes gallery openDone
word.layoutLayout tab, margins gallery open; ruler visibleDone
word.referencesReferences tab, TOC gallery open; TOC in pageDone
word.review-with-commentsReview tab; All markup tracked changes; comments pane with threads (active, resolved, draft reply)Done
word.review-simple-markupSimple markup; contextual comment cards in the margin; change barsDone
word.reviewing-paneReviewing pane open with accept/reject per changeDone
word.viewView tab; navigation pane (headings), rulers, page widthDone
word.helpHelp tab; help paneDone
word.table-designTable selected; Table Design tab; table styles galleryDone
word.table-layoutTable Layout tab; insert line ⊕ hoverDone
word.picture-formatPicture selected, Layout options popout, crop split openDone
word.shape-formatShape selected; Format Shape pane (Fill & Line)Done
word.chart-designChart selected; Add chart element menu openDone
word.chart-formatChart element selected; Format pane (axis)Done
word.header-footerHeader editing state; Header & Footer tabDone
word.equationEquation selected; Equation tab; Structures ▸ Fraction gallery openDone
word.smartartSmartArt Design tab; text pane (P2)Done
word.context-menu-textContext menu + mini toolbar on a selectionDone
word.context-menu-spellingMisspelled word context menu; squiggles on pageDone
word.context-menu-tableTable context menu with Insert ▸ submenu openDone
word.content-controlsTemplate with content controls; date picker and drop-down openDone
word.fields-linksField shading, link card on hover, footnote reference tooltipDone
word.dialog-fontFont dialog (Font tab)Done
word.dialog-paragraphParagraph dialog (Indents and spacing)Done
word.dialog-tabsTabs dialogDone
word.dialog-borders-shadingBorders and shading (Borders tab, preview edges)Done
word.dialog-page-setupPage setup (Margins)Done
word.dialog-columnsColumnsDone
word.dialog-insert-tableInsert tableDone
word.dialog-table-propertiesTable properties (Row tab)Done
word.dialog-tocTable of contentsDone
word.dialog-footnotesFootnote and endnoteDone
word.dialog-define-listDefine new multilevel listDone
word.dialog-modify-styleModify styleDone
word.dialog-watermarkWatermark (P2e)Done
word.dialog-fieldField (P2)Done
word.dialog-caption-crossrefCross-reference (P2)Done
word.dialog-word-countWord countDone
word.pane-stylesStyles paneDone
word.restrictedProtected document: message bar + Restrict editing pane (honour)Done
word.readingView mode (Reading view), read-only and "locked by" message barsDone
word.dark-canvasDark theme with dark pageDone
word.presenceP2 co-editing: avatars, remote carets with flags, author-colored changesDone
word.views-p2Web layout / Outline / Draft (three specimens on one page)Done
word.narrow44rem: tab dropdown, Compact forced, pane as drawerDone
word.window-narrowNarrow window (below 48rem, not maximized): the title bar and tab row as one row (glyph, File, Home ▾, file name ▾, ⋯, Search, window controls) over the Compact command bar; the frame of shared.hosted-window-editor-narrowDone
word.phone22.5rem: bottom command bar, tab sheet openDone
word.dialog-layoutLayout: Position, Text wrapping and Size tabs (More layout / rotation options)Done
word.dialog-header-fieldsDate and time (formats, update automatically) and Page number formatDone
word.dialog-hyphenationHyphenation options and Line numbers optionsDone
word.dialog-insert-miscDrop cap options and Content control propertiesDone
word.dialog-new-styleCreate new style from formatting: properties, formatting, preview, Format menuDone
word.dialog-numberingSet numbering value, Define new bullet, Define new number formatDone
word.dialog-referencesCaption, Bookmark, Table of figures, Update table of contentsDone
word.dialog-styles-manageApply styles, Set defaults (Manage styles) and Save style setDone
word.dialog-table-cellsTable: Insert cells, Delete cells, Split cells, Convert table to text, Table optionsDone
word.dialog-table-formulaTable: Formula (formula, number format, paste function, paste bookmark)Done
word.outliningOutlining tab (View ▸ Outline): levels, promote and demote, move, expand and collapse, show level, closeDone
word.wrap-pointsEdit wrap points: dashed wrap outline with draggable pointsDone

Spreadsheet

U2 · 55 pages
PageStateStatus
excel.homeCompact Home; range selected; status bar statisticsDone
excel.home-fullFull HomeDone
excel.home-editing-cellIn-cell edit with reference highlights in the formula and grid (pilot)Pilot
excel.formulas-autocompleteTyping =VLO in the formula bar: autocomplete list + argument hintDone
excel.formulasFormulas tab; trace precedents arrows (P2); Show formulas offDone
excel.pane-insert-functionInsert function pane with argumentsDone
excel.insertInsert tab; Column chart menu openDone
excel.drawDraw tab (P2)Done
excel.page-layoutPage Layout tab; Margins gallery; page-break lines on gridDone
excel.data-filterData tab; AutoFilter dropdown open (value list, Number filters ▸)Done
excel.data-validationIn-cell dropdown open, input-message tooltip, invalid circlesDone
excel.reviewReview tab; threaded comment card on hover; note indicator; comments paneDone
excel.noteNote on a cell (yellow box: author, editable text)Done
excel.viewView tab; freeze panes menu open; frozen lines; split barsDone
excel.helpHelp tabDone
excel.findFind pane with results by sheetDone
excel.table-designTable selected; Table Design tabDone
excel.pivotPivotTable Analyze tab; PivotTable fields pane with wells (P2)Done
excel.pivot-designPivotTable Design tab; styles galleryDone
excel.chart-designChart object selected; Chart Design tabDone
excel.chart-formatFormat pane for chart areaDone
excel.slicer-sparklineSlicer selected (Slicer tab) + sparklines in cells (P1v/P2e)Done
excel.cf-menuConditional formatting menu with Data bars gallery openDone
excel.pane-cf-rulesConditional formatting rules paneDone
excel.context-menu-cellCell context menu with Paste options rowDone
excel.context-menu-sheet-tabSheet tab context menu; Tab color submenuDone
excel.dialog-format-cellsFormat cells (Number tab, custom format)Done
excel.dialog-format-cells-borderFormat cells (Border tab)Done
excel.dialog-cf-ruleNew formatting rule (color scale)Done
excel.dialog-data-validationData validation (Settings tab)Done
excel.dialog-validation-alertStop alert after invalid entryDone
excel.dialog-sortSort with three levelsDone
excel.dialog-custom-filterCustom AutoFilterDone
excel.dialog-name-managerName managerDone
excel.dialog-insert-chartInsert chart (All charts, cx types) — reused by Word and PresentationDone
excel.dialog-select-dataSelect data sourceDone
excel.dialog-series-editEdit series and Axis labelsDone
excel.dialog-page-setupPage setup (Sheet tab)Done
excel.dialog-header-footerCustom headerDone
excel.dialog-protect-sheetProtect sheetDone
excel.dialog-confirm-passwordConfirm password after Protect sheet or workbookDone
excel.dialog-paste-specialPaste specialDone
excel.dialog-text-importCSV text import (P0)Done
excel.dialog-fill-seriesSeriesDone
excel.dialog-create-tableCreate table with range pickerDone
excel.dialog-convert-rangeConvert to range confirmationDone
excel.dialog-what-ifGoal seek + status (P2)Done
excel.dialog-pivotCreate PivotTable + Value field settings (P2)Done
excel.dialog-pivotchartCreate PivotChart: table or range, new or existing worksheetDone
excel.pane-workbook-linksWorkbook links (cached values)Done
excel.pane-watchWatch window (P2)Done
excel.pane-format-slicerFormat slicer pane: position and layout, size, properties, alt textDone
excel.pane-clipboardClipboard pane: copied items, Paste all, Clear allDone
excel.page-break-previewPage break previewDone
excel.page-layout-viewPage layout view with "Add header"Done
excel.spill-errorsSpill range, #SPILL! tag, error indicator menu, unknown-function cell + message barDone
excel.outlineGrouped rows/columns with outline guttersDone
excel.protectedProtected sheet: message bar, locked-cell alertDone
excel.presenceP2 co-editing: colored cell outlines and flagsDone
excel.darkDark theme (dark cells)Done
excel.narrow44remDone
excel.phone22.5rem: formula bar collapsed, sheet dropdownDone
excel.dialog-allow-edit-rangesAllow edit ranges, with New rangeDone
excel.dialog-cf-quickConditional formatting quick dialogs: Greater than, Between, Text that contains (Highlight cells rules)Done
excel.dialog-cf-top10Conditional formatting: Top 10 items, Above average, A date occurring, Duplicate valuesDone
excel.dialog-go-to-specialGo to special: select cells by kindDone
excel.dialog-go-toGo to: names and recent references, Reference, Special…Done
excel.dialog-insert-deleteInsert and Delete (cells): shift cells or entire row / columnDone
excel.dialog-move-copyMove or copy (sheet) and Unhide (sheets)Done
excel.dialog-protect-workbookProtect workbook (structure, password) and Unprotect sheet (password)Done
excel.dialog-row-columnRow height, Column width and Standard width (Home ▸ Format)Done
excel.dialog-zoomZoom: 200% to 25%, Fit selection, CustomDone
excel.dialog-table-stylesNew table style (elements, format, preview) and Resize tableDone
excel.dialog-calculationCalculation options: mode and iterative calculationDone
excel.dialog-data-toolsRemove duplicates, Data table and Group (rows or columns)Done
excel.dialog-data-sourcesOutline settings, Recent sources, Import dataDone
excel.dialog-formula-auditingEvaluate formula and Error checkingDone
excel.dialog-move-chartMove chart: new chart sheet or object in a sheetDone
excel.dialog-namesNew name, Create names from selection, Paste nameDone
excel.dialog-new-pivot-styleNew PivotTable style: elements, format, previewDone
excel.dialog-pivot-calcPivotTable: Insert calculated field, Insert calculated item, Solve orderDone
excel.dialog-pivot-toolsPivotTable: Grouping, Move PivotTable, Change PivotTable data sourceDone
excel.dialog-pivot-optionsPivotTable options, Show report filter pages, Field settingsDone
excel.dialog-slicerSlicer settings, Report connections and New slicer styleDone
excel.dialog-slicer-elementFormat slicer element: Font, Border, FillDone
excel.dialog-sparklines-slicersCreate sparklines and Insert slicersDone
excel.dialog-sparkline-toolsEdit sparklines, Edit sparkline data, Hidden and empty cell settings, Sparkline date range, vertical axis settings, Custom weightDone
excel.dialog-text-to-columnsText to columns: delimited or fixed width, delimiters, formats, destination, previewDone
excel.dialog-workbook-statisticsWorkbook statistics: current sheet and workbook countsDone
excel.pane-insert-function-searchInsert function pane: search, category, results, description (opens Function arguments)Done
excel.sparklineSparkline contextual tab: edit data, type, show points, style, colors, axis and groupDone
excel.shape-formatShape Format contextual tab (Drawing Tools)Done
excel.picture-formatPicture Format contextual tab (Picture Tools)Done
excel.equationEquation contextual tab (Equation Tools) with its structure galleriesDone
excel.menus-functionsMore functions submenus (Statistical open … Web) and Hide and unhideDone
excel.dialog-insert-header-footerHeader & Footer (Insert ▸ Header & Footer): header and footer tabs, presets, insert codes, sections, optionsDone

Presentation

U3 · 36 pages
PageStateStatus
ppt.normalCompact Home; editing a title placeholder; rail + notes (pilot)Pilot
ppt.home-fullFull HomeDone
ppt.new-slide-layoutsNew slide gallery (rendered layouts) openDone
ppt.insertInsert tab; Shapes gallery openDone
ppt.drawDraw tab (P2)Done
ppt.designDesign tab; themes and variants; Slide size menuDone
ppt.transitionsTransitions tab; gallery expanded; Effect optionsDone
ppt.animationsAnimations tab; Animation pane (P2)Done
ppt.slideshow-tabSlide Show tabDone
ppt.reviewReview tab; comment markers and comments paneDone
ppt.viewView tab; rulers, gridlines, guides; smart guides while draggingDone
ppt.helpHelp tabDone
ppt.slide-masterSlide Master tab and master/layout rail (P2)Done
ppt.slide-sorterSlide sorter with sections (P2)Done
ppt.reading-viewReading view (view mode)Done
ppt.tableTable Design (Presentation variant)Done
ppt.shape-formatShape Format; Format Shape paneDone
ppt.picture-cropPicture Format; crop modeDone
ppt.chart-dataChart Design; embedded data sheet windowDone
ppt.smartartSmartArt Design + text pane (P2)Done
ppt.video-playbackVideo selected; Playback tab; play barDone
ppt.context-menu-thumbnailRail context menuDone
ppt.sectionsRail with sections, hidden slides, multi-select, drop lineDone
ppt.dialog-slide-sizeSlide sizeDone
ppt.dialog-header-footerHeader and footerDone
ppt.dialog-set-up-showSet up slide showDone
ppt.dialog-grid-guidesGrid and guidesDone
ppt.dialog-actionAction settingsDone
ppt.dialog-more-effectsMore entrance effects (P2)Done
ppt.pane-format-backgroundFormat background paneDone
ppt.slideshowFull-screen show, control bar visibleDone
ppt.slideshow-all-slidesSee all slides overlay; end-of-show slide (two specimens)Done
ppt.presenterPresenter view (P2)Done
ppt.darkDark themeDone
ppt.narrow44remDone
ppt.phone22.5rem: horizontal thumbnail stripDone
ppt.dialog-master-layoutRename layout and Master layout (placeholders)Done
ppt.dialog-online-videoInsert online video: video addressDone
ppt.dialog-rename-sectionRename sectionDone
ppt.dialog-trimTrim video / audio: preview, start and end handles, start and end timeDone
ppt.dialog-fontFont: font, style, size, colour, underline and effects; Character spacing tabDone
ppt.dialog-paragraphParagraph: alignment, indentation, spacing and line spacing; Asian typography tabDone
ppt.dialog-columnsColumns: number of columns and spacing in a text boxDone
ppt.dialog-bullets-and-numberingBullets and numbering: Bulleted and Numbered tabs, size, colour, start atDone
ppt.equationEquation contextual tab (Equation Tools) with its structure galleriesDone

PDF

U4 · 25 pages
PageStateStatus
pdf.viewHome; thumbnails pane; fit width; page indicatorDone
pdf.home-fullFull HomeDone
pdf.select-textText selected; markup mini toolbarDone
pdf.annotateComment tab; highlights, sticky note popup thread, comments pane (pilot)Pilot
pdf.annotate-shapes-inkShape annotation selected with floating annotation toolbar; ink strokesDone
pdf.stampsStamp gallery openDone
pdf.formsFill & Sign tab; highlighted AcroForm fields; focused text field; combo open; validation popoverDone
pdf.forms-designForms tab; field placement; Field properties pane (P2)Done
pdf.signaturesSignature message bar + Signatures pane (P1)Done
pdf.dialog-signSign document (P2)Done
pdf.editEdit tab; editing existing text with Text Format contextual tab (P2)Done
pdf.insertInsert tab (P2)Done
pdf.pagesPages tab; Organize pages grid view (P1)Done
pdf.dialog-extractExtract pages / Insert from fileDone
pdf.redactRedact tab; marks; Search & redact pane (P2)Done
pdf.dialog-apply-redactionsIrreversible confirmationDone
pdf.view-tabView tab; bookmarks tree; two-page displayDone
pdf.searchSearch pane with hits highlightedDone
pdf.context-menuContext menu on page and on annotationDone
pdf.dialog-passwordOpen passwordDone
pdf.dialog-propertiesDocument propertiesDone
pdf.loading-large400-page file: progressive skeletons, page indicatorDone
pdf.darkDark theme + dark canvas toggleDone
pdf.narrow44remDone
pdf.phone22.5rem: thumbnails drawerDone
pdf.dialog-insert-linkInsert link (PDF): web address / page / email, and the link rectangle's appearanceDone
pdf.dialog-printPrint (PDF): preview, copies, pages, sizing, orientation, comments and formsDone
pdf.dialog-redaction-propertiesRedaction properties: fill, overlay text (font, size, repeat, auto-size), marking outlineDone
pdf.signatures-emptySignatures pane with no signatures: empty state with Sign documentDone
pdf.comments-filterComments pane filter: status, By type (open) and By author check listsDone
pdf.forms-tab-orderForm design with Tab order on: numbered badges on every fieldDone
pdf.shapes-galleryMore shapes gallery (Insert ▸ Shape, Edit ▸ Add shape)Done
pdf.equationEquation contextual tab (Equation Tools) with its structure and symbol galleriesDone

Shared surfaces

U5 · 41 pages
PageStateStatus
shared.backstage-infoInfo (Document): properties, protection, compatibility, fonts substituted (pilot)Pilot
shared.backstage-downloadDownload formats incl. PDF/A, image exportDone
shared.backstage-optionsOptions: General, Proofing, Language & region, Formulas, Accessibility, Keyboard shortcutsDone
shared.backstage-aboutAbout + licence noticesDone
shared.print-wordPrint dialog with preview (Document)Done
shared.print-excelPrint dialog with scaling and print area (Sheet)Done
shared.dialog-find-replaceFind and replace (non-modal window, More expanded)Done
shared.dialog-go-toGo toDone
shared.dialog-hyperlinkInsert link (place in this document)Done
shared.dialog-symbolSymbol (non-modal)Done
shared.dialog-paste-specialPaste special (Document, Presentation)Done
shared.dialog-picture-urlInsert picture from URLDone
shared.dialog-open-passwordOpen password (OOXML)Done
shared.dialog-encryptEncrypt with password (P2)Done
shared.dialog-shortcutsKeyboard shortcuts (+ Customize, P2)Done
shared.dialog-autocorrectAutoCorrectDone
shared.dialog-languageSet proofing languageDone
shared.dialog-zoomZoomDone
shared.dialog-propertiesDocument properties (OOXML)Done
shared.dialog-save-conflictSave conflict (P0)Done
shared.save-state-errorTitle bar save state: Not saved, retrying, with Retry now (QF-10840)Done
shared.dialog-unsaved-closeUnsaved changes on closeDone
shared.dialog-publish-versionPublish version: Draft 2.3 → 3.0, legal-hold warning, required comment (QF-10840)Done
shared.dialog-encodingTXT encodingDone
shared.pane-commentsComments pane: filter menu, mention picker (P2), resolved thread, draftDone
shared.pane-version-historyVersion history grouped by published version with draft checkpoints, Published only filter, draft preview message bar (QF-10840)Done
shared.pane-accessibilityAccessibility checkerDone
shared.pane-selectionSelection paneDone
shared.pane-alt-textAlt textDone
shared.pane-spellingSpelling (Editor)Done
shared.search-commandsTitle bar search open with Actions / Find / HelpDone
shared.file-flyoutFile name flyoutDone
shared.mode-switcherEditing / Reviewing / Viewing menu with a disabled reasonDone
shared.ribbon-displayRibbon display menu; Show tabs only with popup ribbonDone
shared.message-barsEvery message bar of §1.11 stackedDone
shared.keytipsKeyTips layer 1 and layer 2 (two specimens)Done
shared.tooltipsRich tooltips: shortcut, description, disabled reasonDone
shared.hosted-windowQEditor inside a qaction OverlaySystem window (the updated X-07 host wrapper)Done
shared.hosted-window-editorEditor-drawn window chrome: the title bar flows into the ribbon, the qaction window keeps a hairline edge (X-07 data-chrome="editor"); active over inactiveDone
shared.hosted-window-editor-narrowNarrow editor-drawn window (40rem, not maximized): one row for the title bar and the tab row (.qf-ribbon__bar[data-titlebar]); maximized and full screen keep two rowsDone
shared.embedEmbedded viewer chrome (P2)Done
shared.rtlMirrored UI (P2)Done
shared.forced-colorsForced-colors rendering of a Home ribbon + canvas (review aid)Done
shared.loading-errorBoot skeleton; error boundary; unsupported file (three specimens)Done
shared.touchTouch root size, selection handles, long-press menuDone
shared.chart-data-editorChart data editor (Document, PDF): non-modal data sheet window over the pageDone
shared.dialog-change-chart-typeChange chart type (every editor): families, sub-types, current type selectedDone
shared.dialog-colorsColors (More colors…): Standard grid or Custom spectrum, hue, RGB/HSL, hex, new vs current, recent colorsDone
shared.dialog-equation-optionsEquation options: math font, conversion, copying, display-equation breaking and alignmentDone
shared.dialog-insert-chartInsert chart for Document, Presentation and PDF: families, sub-types, preview; sample data in an embedded sheetDone
shared.dialog-insert-tableInsert table for Presentation and PDF: columns and rowsDone
shared.dialog-select-dataSelect data source for an embedded chart (Document, Presentation): data-sheet range, series, categoriesDone
shared.dialog-smartartChoose a SmartArt graphic: categories, layout thumbnails, preview and descriptionDone
shared.dialog-theme-colorsCreate new theme colors: twelve slots, light and dark sample, name, Reset and SaveDone
shared.dialog-theme-fontsCreate new theme fonts: heading and body font with samples, name, SaveDone
shared.pane-format-pictureFormat picture pane: Picture tab with corrections, color, transparency and crop sectionsDone
shared.dialog-ink-equationInk equation: recognised preview, writing area, Write / Erase / Select and correct / ClearDone
shared.dialog-language-preferencesLanguage preferences: display language, authoring and proofing languages in priority orderDone
shared.dialog-save-equationSave as new equation: name, gallery, category, description, optionsDone
shared.pane-format-data-labelsFormat data labels pane: label contains, separator, position, number formatDone
shared.pane-format-data-seriesFormat data series pane: element picker, series options (axis, overlap, gap width), fillDone
shared.pane-format-legendFormat legend pane: position, overlap, fillDone
shared.pane-format-axisFormat axis pane: bounds, units, crosses, display units, tick marks, labels, numberDone
shared.pane-format-chart-titleFormat chart title pane: alignmentDone
shared.pane-format-axis-titleFormat axis title pane: alignmentDone
shared.pane-format-plot-areaFormat plot area paneDone
shared.pane-format-major-gridlinesFormat major gridlines pane: lineDone
shared.pane-format-trendlineFormat trendline pane: type, name, forecast, equation, R-squaredDone
shared.pane-format-error-barsFormat error bars pane: direction, end style, error amountDone
shared.pane-format-data-tableFormat data table pane: borders, legend keysDone
shared.pane-format-drop-linesFormat drop lines pane: lineDone
shared.pane-format-high-low-linesFormat high-low lines pane: lineDone
shared.pane-format-up-down-barsFormat up/down bars pane: gap widthDone
shared.pane-whats-newWhat's new pane: recent features, newest first, with Learn moreDone
shared.chart-add-elementAdd chart element submenus (Legend open): Axes … Up/down bars with their More optionsDone
shared.effects-galleriesEffects galleries (Shadow open): Preset, Shadow, Reflection, Glow, Soft edges, Bevel, 3-D rotation, TransformDone
shared.eyedropperEyedropper: loupe with swatch, hex and RGB beside the pointer; Escape cancelsDone
shared.fill-outline-menusFill and outline submenus (Gradient open): Gradient, Texture, Weight, Dashes, ArrowsDone
shared.text-picture-menusCrop to shape (open), Aspect ratio, and the text effect submenus: Outline, Number styles, Ligatures, Stylistic sets, Underline colorDone