Composites

One grid of five children — brand, utility, nav, app bar and content — sharing a single placement map. It is the only arrangement whose reading order matches DOM order, so focus never jumps back up the page. Row one is the legacy masthead (logo on white, the navy .topMenu hugging the right corner). The nav-toggle button collapses the nav, whose rows have no icons, so the rail leaves the grid and the app bar and content take its column; on mobile it becomes a drawer. AppBar tabs are added dynamically by pages.

The full-screen page is shell.html, styled by css/classic/composites/shell.css. The specimen below is copied from shell.html by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift. The same run copies its shell around every other composite's full-screen page.

Shell (toggle the nav with the menu button)

Skip to content

Mobile coming soon

Please use a desktop width.

Signed in 09/11/2026 02:08

Profile

---

Dark theme

---

Open inbox tasks as

Task Object, on its Active Task tab

---

Wider navigation Narrower navigation

---

Sign out

Rename… Change icon… Hide

---

Organize sidebar

Active Completed Delegated

Display Name

Dialogs behave like windows in an operating system. A [data-window-area] is the view area they live in; each dialog.qf-overlay[data-window] inside it drags by its header, snaps to the edges and corners of that area, resizes from eight grips, raises to the front when it is clicked or focused, and minimizes to a dock. js/windows.js writes the geometry; the nine data-snap rects, the grips, the dock and the drop-zone ghost are CSS.

In an app the area is the whole .qf-shell, not its content: windows stack at --qf-z-window, above the nav and the app bar, and snap over them; minimized windows become tabs in a dock along the foot of the screen, at --qf-z-dock, and snapped windows stop above it. Menus, popovers, toasts and the narrow nav drawer stay above both.

The full-screen page is overlay-system.html, inside the app shell. The specimen below is copied from overlay-system.html by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

The render-props search host, and the parent of every result view. It owns the toolbar (query, filters, view switch, saved views), the optional filter rail, the results region and the footer with pagination; data-view picks which of its five child views renders inside __results — list, table, gallery, kanban or two-pane. The chrome never changes with the view. DataGrid (X-03), Kanban (X-04) and Inbox (X-12) are the same idioms used standalone, and are documented separately.

Every result resolves to an object. In list, table, gallery and kanban a result carries data-ds-open-window and opens that object as a window (the non-modal dialog.qf-overlay[data-window] of X-01, bounded by the shell's .qf-content[data-window-area]); the row's primary cell, and each card's title, is a focusable __open control so the keyboard reaches it. In two-pane a result does not open a window: it takes aria-current="true" and the object swaps into the right pane.

The full-screen page is search.html, inside the app shell. The toolbar follows the app's: the query (Clear, then Search on Enter), an icon-only Add filter that takes the input fields' fill while filters apply ([data-filtered]), a sort menu, then the layout switch; there is no filter rail, no result count and no saved views (they live in the navigation). Each filter is a .qf-filter-row in .qf-search__filter-rows under the toolbar, in the same bordered band: field · value · Clear · Remove, and the last row ends with Add filter. The table view has it so far; the other views still show the rail. The specimens below are copied from search.html by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Table plus column persistence, a column picker and infinite load. Adds a toolbar, a sticky-header scroll body, the picker popover and the load-more sentinel.

The specimen below is copied from datagrid.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Columns derived from a list-of-values property; cards are compact Cards wrapped in a DragSource. Cross-column drag moves the item and updates the property.

The specimen below is copied from kanban.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Dispatches a FieldType to the right control. Visually it adds only the property-type icon in the label; filter mode lays Fields out in a compact wrapping row, and click-to-edit mode uses Field's rest state.

The specimens below are copied from mapper.html, which shows them inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Lexical rich-text chrome: a Field-like frame with a formatting Toolbar, a content surface with typographic defaults and a status footer.

The specimen below is copied from editor.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Documents that are not plain rich text open in qf-office, the QEditor host wrapper, as a standalone dialog.qf-overlay[data-window] window rather than in this surface. The editor runs in an iframe (qf-office__embed) and draws its own ribbon, canvas and status bar (office mockups); the window header is its title bar, with the app glyph, the file name and the save state. See DocumentViewer for the full qf-office axis table and OverlaySystem for the window contract (data-window, data-snap, data-ds-open-window).

Dispatches office files, PDF, image and email to one frame: viewer toolbar, thumbnail rail, canvas and a properties rail. Email swaps the canvas for a header/body/attachments layout.

The specimens below are copied from viewer.html, which shows them inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

qf-office is the host wrapper QAction opens office files in. The QEditor editor runs in an iframe (__embed) and draws its own ribbon, canvas and status bar — the office mockups (X-13 OfficeApp). The window header is the editor's title bar (owner decision Q1): the app glyph and name, the file name, the save state and the window controls. A file therefore opens as a standalone window rather than in place.

The window is an OverlaySystem window: a non-modal dialog.qf-overlay[data-window] driven by js/windows.js — dragged, resized, raised and snapped (data-snap) inside the nearest [data-window-area], which on these pages is the shell's .qf-content. Each file row carries data-ds-open-window="viewer-office-window", so clicking it opens or raises the window. The title bar carries the file name, the kind chip, a save indicator and the standard .qf-window-controls.

Three levels wrap an EmptyState[variant=error]. Dialogs get one automatically. Component-level keeps the rest of the page alive.

The specimen below is copied from error-boundary.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

TypeError: Cannot read properties of undefined (reading 'label')
    at ObjectProperties (object-properties.tsx:112)
    at renderWithHooks (react-dom.development.js:16305)

Bell with unread badge; a Popover holding a grouped, sectioned List. The bell in the app shell above opens the same popover.

The specimen below is copied from notifications.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Form shell: sections with titles, a 12-column row grid, an error summary and a sticky action bar. Field binding and validation come from react-hook-form in the binding.

The specimen below is copied from form.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

Display-definition parsing, tabbed property groups and click-to-edit values. The header shows icon, label, type and actions; each tab is a grid of properties whose values become Fields on click. LabeledObject and LabeledUser chips resolve labels automatically.

Every result resolves to an object. Clicking a result in any view of Search opens this block; only the presentation changes, and data-presentation is the axis that says which. A two-pane view (the Inbox, and Search’s own two-pane view) shows it in place in the right pane, data-presentation="pane", beside the list it was selected from. Every other view — table, cards, list, tree — opens it as an OS-style window: dialog.qf-overlay[data-window] inside the view’s [data-window-area], launched by [data-ds-open-window] and dragged, snapped and docked by the OverlaySystem window layer. In that presentation the window frame carries the object’s icon and title, so the block drops its own and keeps a compact meta strip; the secondary header actions collapse into an overflow menu and the body scrolls on its own inside the frame.

The specimen below is copied from object.html, which shows it inside the app shell, by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

A Search (X-02) with its own treatment: every result set is a canned search, and there is no filter rail. The app bar tabs (Active · Completed · Delegated) are the canned searches. Saved searches reuse the same two panes: a task list on the left and the selected task on the right. Pagination or Load more sits under the list. Saved searches are a menu button in the toolbar; the .qf-saved-views chip row stays in the markup but is hidden.

The right pane has two presentations. Which one shows is a user setting, not a control on the page: Open inbox tasks as in the identity menu, beside the theme, sets .qf-inbox[data-view]. Task view is task-centric. Its header is the task (process, step, status and the object it is on) on a tinted band, with the task’s facts under it: Due, Received, Assigned to, Working user and Last action. The v2 API edits none of those facts, so they are read-only; the header’s buttons are the state changes it does allow, Put on hold and Put back. The body groups the rest into cards: Instructions, the object (its fields and initiating document) and the object’s notes. The footer completes the task with an outcome, the default one filled and one with a note in More, or offers Work task while the task waits in a queue. Object view is how the product works today: the object is the header, then its fields and its activity tabs (Active Task · Documents · Notes · Timeline · Workflow · Related) opened on Active Task, where the task is worked through Instructions, Completion Options, Note and Submit.

Everything a task shows comes from the v2 task (status, dueDate and daysOverUnder, startDate, assigneeId, workingUserId, processName, lastAction, instructions, initiatingDocumentVSId, availableCompleteTaskActions) or from a lookup it names: user and group labels, the object’s label and fields, and the object’s notes, which have a subject and a date but no author. The API has no priority, sender, unread state, step position or delegation, so the Inbox shows none. List rows carry only list data: the task name, process and object type, due state and status.

The Inbox is the two-pane case of the rule that every result resolves to an object: selecting a task in the left list shows that task’s .qf-object[data-presentation="pane"] on the right, and the row it came from carries aria-selected="true" (aria-current="true" is styled the same way, for two-pane views whose list is not a listbox). The right pane is not a bespoke reader: it is the ObjectDisplay block with the Inbox’s own sections composed into its __body. A view that is not two-pane opens the same object as a window instead — see ObjectDisplay.

The full-screen page is inbox.html, inside the app shell and styled by css/classic/composites/inbox.css. The specimens below are copied from inbox.html by bun scripts/design-pages/build-composite-pages.mjs — edit that file, not this one; --check fails when they drift.

The QEditor editors as full-screen pages in a maximized qaction window: OfficeApp (X-13), Backstage (X-14), DocumentCanvas (X-15), Workbook (X-16), Deck (X-17), PdfDocument (X-19). Each opens on its own page with a review strip for theme, ribbon mode and width.