flea-qml 0.0.0-stage → 0.2.0

package/ui/SidebarRow.qml

@@ -0,0 +1,358 @@
+import QtQuick
+import qs.Commons
+import "js/Eject.js" as Eject
+import "js/Format.js" as Format
+import "js/TabMove.js" as TabMove
+
+// One rail row, shared by the Favorites, Network and Devices groups so the three read alike; see
+// ui/Sidebar.qml "The rail" for the entry shape each group feeds this delegate.
+Item {
+    id: root
+
+    required property int index
+    required property var modelData
+    // Current-place identity stays separate from the keyboard's visual highlight, including over IPC.
+    property bool lit: false
+    property bool highlighted: root.lit
+    property bool cursor: false
+    property bool focused: false
+    // A drop cue replaces the trailing detail and reserves its caption's width.
+    property Item trailingLabel: null
+    // The keyboard is on this row's eject mark, which then draws its own frame in the foreground at its hit box.
+    property bool markFocused: false
+    // Network only, driven from ui/Sidebar.qml's renamingIndex; swaps the label for the editor.
+    property bool renaming: false
+
+    signal activated(int index)
+    // A click on the eject mark releases the row at once, the same Eject or Unmount the
+    // menu row and Ctrl+E take; carrying the index, because the rail rebuilds on its poll
+    // and a position taken later can name a different row.
+    signal ejectRequested(int index)
+    // Right click asks the rail to raise the menu over this row, carrying the point it opens at.
+    // The rail decides what the menu offers and opens none on a row with nothing to release. It is
+    // ui/Pane.qml's own single ui/ContextMenu.qml: a second instance in this tree took the keyboard
+    // away from the list, see AGENTS.md "A second ContextMenu instance breaks the whole window's
+    // keyboard focus", which is why the rail had no menu at all until now.
+    signal menuRequested(int index, var scenePosition)
+    // Middle click: the row's folder in a new tab; ui/js/PlaceMenu.js openTabAt decides which rows have one.
+    signal tabRequested(int index)
+    signal renameCommitted(int index, string text)
+    signal renameCancelled(int index)
+    // Favourites reorder by drag; a favourite carries its store index, others leave -1.
+    property int dragFrom: -1
+    property int lineCount: 0
+    signal moved(int to)
+    signal reorderAt(int line)
+
+    // A share or a removable volume carries a mount-state dot; the internal disk is always there
+    // and always mounted, so a dot on it would say nothing, and a favourite is not a mount at all.
+    readonly property var placesState: ViewState.state.places || ({})
+    // The eject mark's accessible name, one whole sentence per kind of row, each filled by Format.fill.
+    readonly property var ejectWords: ({ eject: "Eject %1", unmount: "Unmount %1" })
+    readonly property string detail: root.modelData.kind === "trash"
+        ? (root.placesState.trashCount === true && root.modelData.count > 0 ? String(root.modelData.count) : "")
+        : (root.modelData.group === "device" || root.modelData.volume === true) && root.placesState.driveSize === true && root.modelData.size !== null
+            ? Format.size(root.modelData.size) : ""
+    // PhoneMark: a phone is a volume, so its row carries the same mount-state square a removable
+    // disk and a share carry, in the same fixed slot.
+    readonly property bool showsDot: (root.modelData.group === "network" && root.modelData.kind !== "dropbox")
+        || (root.modelData.group === "device"
+            && (root.modelData.kind === "volume" || root.modelData.kind === "phone"))
+    // The Trash row draws its count where every other row draws its indicator, and never both.
+    readonly property bool countIsIndicator: root.modelData.kind === "trash" && root.detail.length > 0
+    // Small and fixed: a status dot is not part of the type or icon scale.
+    readonly property int dotSize: 6
+    // The canvas's own value for a bookmark nothing has mounted yet.
+    readonly property real unmountedOpacity: 0.5
+
+    // The favourite under the pointer while its reorder drag runs; it ghosts the way a dragged tab does, the bar says where it lands.
+    property bool held: false
+    opacity: root.held ? Theme.disabledOpacity : 1
+
+    width: parent ? parent.width : 0
+    // The rail reads denser than the list it sits beside; see Theme.qml's railRowHeight comment.
+    height: Theme.railRowHeight
+
+    Accessible.role: Accessible.ListItem
+    Accessible.name: root.modelData.label
+
+    // The rail rounds nothing: a lit place is the list row's square full-bleed fill, see ui/Row.qml.
+    Rectangle {
+        anchors.fill: parent
+        color: root.highlighted
+            ? (root.modelData.kind === "trash" ? Style.selectedAccentFill : root.focused ? Style.selectedFill : Style.normalFill)
+            : "transparent"
+    }
+
+    // The eject mark's hover lift, the board's 8% rung; the mark itself lifts to foreground below.
+    Rectangle {
+        anchors.fill: parent
+        visible: ejectLoader.item !== null && ejectLoader.item.hovered
+        color: Theme.color.foreground
+        opacity: Theme.washHover
+    }
+
+    Rectangle {
+        visible: root.highlighted
+        width: Theme.spacing.hairline * 2
+        height: parent.height
+        color: Theme.color.accent
+    }
+
+    // The TAGS section hands its rows their own swatch mark; every other row keeps the glyph.
+    property Component tagMark: null
+
+    Loader {
+        id: mark
+        anchors.left: parent.left
+        anchors.leftMargin: Style.spacing.rowPaddingX
+        anchors.verticalCenter: parent.verticalCenter
+        width: Theme.railIconSize
+        height: Theme.railIconSize
+        sourceComponent: root.modelData.kind === "dropbox" ? dropboxMark : root.tagMark !== null ? root.tagMark : glyphMark
+        onLoaded: if (root.tagMark !== null) item.entry = root.modelData
+    }
+
+    // ThemeRoles.html gives every rail label and glyph the foreground role, selected rows included:
+    // the cursor reads through the fill and the accent edge above, never by dimming the rows it is not on.
+    Component {
+        id: glyphMark
+        Glyph {
+            name: root.modelData.glyph
+            color: root.highlighted && root.modelData.kind === "trash" ? Theme.color.accent : Theme.color.foreground
+        }
+    }
+
+    // The brand marks are reproductions, so they take their own component rather than Glyph sizing.
+    Component {
+        id: dropboxMark
+        DropboxMark {
+            iconSize: Theme.railIconSize
+            color: Theme.color.foreground
+        }
+    }
+
+    Text {
+        id: label
+        visible: !root.renaming
+        anchors.left: mark.right
+        anchors.leftMargin: Style.spacing.rowGap
+        // The label ends one gap before any trailing number, square or mark.
+        anchors.right: root.trailingLabel ? parent.right : root.detail.length > 0 ? detailText.left : dot.left
+        anchors.rightMargin: root.trailingLabel ? Math.min(root.width - label.x,
+            Theme.spacing.rowPaddingX + root.trailingLabel.implicitWidth + Theme.spacing.gap)
+            : root.keepsTrailingGap ? Style.spacing.rowGap : 0
+        anchors.verticalCenter: parent.verticalCenter
+        text: root.modelData.label
+        color: root.modelData.error ? Theme.color.error : Theme.color.foreground
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.body
+        // A label too long for the rail keeps its start and ends in an ellipsis.
+        elide: Text.ElideRight
+        clip: root.trailingLabel !== null
+        textFormat: Text.PlainText
+    }
+
+    // The label's slot, holding the product's one editor, ui/RenameField.qml, in rail type.
+    Loader {
+        id: renameLoader
+        active: root.renaming
+        anchors.left: mark.right
+        anchors.leftMargin: Style.spacing.rowGap
+        anchors.right: root.detail.length > 0 ? detailText.left : dot.left
+        anchors.rightMargin: root.keepsTrailingGap ? Style.spacing.rowGap : 0
+        // The editor owns its height, one line box; the rail row centres it on whole pixels.
+        y: Math.round((root.height - renameLoader.height) / 2)
+        sourceComponent: RenameField {
+            height: implicitHeight
+            name: root.modelData.label
+            onCommitted: function (newName) { root.renameCommitted(root.index, newName) }
+            onAbandoned: root.renameCancelled(root.index)
+        }
+    }
+
+    // What the editor holds right now, for tests through ui/Ipc.qml's railRenameEditorText.
+    readonly property string editorText: renameLoader.item ? renameLoader.item.current : ""
+    readonly property bool editorShown: renameLoader.item !== null && renameLoader.item.visible
+    // The rail's editor as ui/Row.qml hands its own, so a test measures every host's frame the same way.
+    readonly property Item editorField: renameLoader.item as Item
+    // RailEject: a mounted row draws the eject mark in place of the square.
+    readonly property bool showsEject: Eject.releasable(root.modelData)
+    readonly property real ejectMarkSize: Theme.font.caption
+    // The keyboard frame on the eject mark, read by tests/keyreach.qml.
+    readonly property Item markFrameItem: ejectLoader.item ? ejectLoader.item.frame : null
+    // The rail's real trailing indicator slot, so ui/Ipc.qml measures this dot instead of recomputing it.
+    readonly property Item indicatorSlot: dot
+    readonly property Item detailItem: root.trailingLabel || detailText
+    readonly property Item labelItem: label
+    readonly property bool indicatorVisible: root.showsDot && root.trailingLabel === null
+    // One gap before any trailing number, square or mark; detail covers the Trash count's zero-width dot.
+    readonly property bool keepsTrailingGap: root.detail.length > 0 || dot.width > 0
+
+    Text {
+        id: detailText
+        visible: root.trailingLabel === null
+        anchors.right: dot.left
+        anchors.rightMargin: dot.width > 0 ? Style.spacing.rowGap : 0
+        anchors.verticalCenter: parent.verticalCenter
+        text: root.detail
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.features: { "tnum": 1 }
+        horizontalAlignment: Text.AlignRight
+        textFormat: Text.PlainText
+    }
+
+    // Every right-aligned mark in the rail is centred in a caption-wide slot, so this dot and the
+    // NETWORK header's "+" share one centre line whatever their ink does: align by slot, never by ink.
+    Item {
+        id: dot
+        visible: root.trailingLabel === null
+        anchors.right: parent.right
+        anchors.rightMargin: Style.spacing.rowPaddingX
+        anchors.verticalCenter: parent.verticalCenter
+        // RailDetails rules 1 and 3 with their 2026-09-14 amendment: a drive size is a number, so
+        // every device row ends its size on one x with this slot reserved after it, dot or no dot;
+        // the Trash count is an indicator rather than a size, so it sits in the slot itself, on the
+        // same edge as the mount dots and the NETWORK plus.
+        width: root.countIsIndicator ? 0 : (root.showsDot || root.detail.length > 0 ? Theme.font.caption : 0)
+        height: Theme.font.caption
+
+        // Green once gio mount -l lists it, muted at half strength while it is only a bookmark waiting
+        // to be mounted. A square, not a disc: the cut is hard corners, and the canvas draws it square.
+        Rectangle {
+            visible: root.showsDot && !root.showsEject
+            anchors.centerIn: parent
+            width: root.dotSize
+            height: root.dotSize
+            color: root.modelData.mounted ? Theme.color.executable : Theme.color.mutedFrame
+            opacity: root.modelData.mounted ? 1 : root.unmountedOpacity
+        }
+
+        // The one-click release: the eject mark in the square's own slot, muted at rest and
+        // foreground under the cursor or the pointer, the way a lifted row's metadata is. Built
+        // only on a row that releases, the way the menu builds a brand mark only on its row.
+        Loader {
+            id: ejectLoader
+            anchors.centerIn: parent
+            width: root.ejectMarkSize
+            height: root.ejectMarkSize
+            active: root.showsEject
+            sourceComponent: ejectMark
+        }
+    }
+
+    // The mark and its hit box, standing only while the row releases. The hit box grows to the
+    // WCAG floor and centres on the ink, the way the NETWORK header's own addMark does: a centre
+    // anchor quantises an odd size difference and leaves the two centres half a pixel apart.
+    Component {
+        id: ejectMark
+        Item {
+            property alias hit: hitBox
+            property alias frame: markFrame
+            property alias hovered: hitHover.hovered
+            width: root.ejectMarkSize
+            height: root.ejectMarkSize
+
+            Glyph {
+                id: ink
+                anchors.centerIn: parent
+                name: "eject"
+                color: root.cursor || hitHover.hovered || root.markFocused ? Theme.color.foreground : Theme.color.mutedFrame
+                width: root.ejectMarkSize
+                height: root.ejectMarkSize
+            }
+
+            Rectangle {
+                id: markFrame
+                anchors.fill: hitBox
+                color: "transparent"
+                border.width: Theme.spacing.hairline
+                border.color: Theme.color.foreground
+                visible: root.markFocused
+            }
+
+            Item {
+                id: hitBox
+                width: Math.max(Theme.hitMin, root.ejectMarkSize)
+                height: width
+                x: ink.x + (ink.width - width) / 2
+                y: ink.y + (ink.height - height) / 2
+                Accessible.role: Accessible.Button
+                Accessible.name: Format.fill(root.modelData.group === "device" ? root.ejectWords.eject : root.ejectWords.unmount, root.modelData.label)
+                Accessible.onPressAction: { if (!root.renaming) root.ejectRequested(root.index) }
+                HoverHandler { id: hitHover }
+                TapHandler {
+                    acceptedButtons: Qt.LeftButton
+                    gesturePolicy: TapHandler.ReleaseWithinBounds
+                    enabled: root.showsEject && !root.renaming
+                    onTapped: root.ejectRequested(root.index)
+                }
+            }
+        }
+    }
+
+    // Whether a scene point lands in the mark's hit box, so the row's own tap never
+    // answers a press the mark's tap already took. The hit box overflows the slot it is
+    // centred on, so the slot alone would hand its rim to the row underneath.
+    function ejectAt(scene) {
+        var target = ejectLoader.item && ejectLoader.item.hit ? ejectLoader.item.hit : dot
+        var p = target.mapFromItem(null, scene.x, scene.y)
+        return p.x >= 0 && p.y >= 0 && p.x < target.width && p.y < target.height
+    }
+
+    TapHandler {
+        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+        // Overlay taps take the grab so the covered listing cannot select the same click.
+        gesturePolicy: ViewState.railAutoHide ? TapHandler.ReleaseWithinBounds : TapHandler.DragThreshold
+        onTapped: function (eventPoint, button) {
+            // The field owns clicks inside itself while editing; this only covers the rest of the row.
+            if (root.renaming)
+                return
+            if (button === Qt.MiddleButton) {
+                root.tabRequested(root.index)
+                return
+            }
+            // The mark releases on its own left tap; the row must not activate underneath
+            // it, while a right tap still raises the menu it always did.
+            if (button === Qt.LeftButton && root.showsEject && root.ejectAt(eventPoint.scenePosition))
+                return
+            // A right click never activates, whatever the row is: it either raised a menu or the
+            // row had nothing to offer, and it must not mount and open a stick nobody asked to open.
+            if (button === Qt.RightButton) {
+                root.menuRequested(root.index, eventPoint.scenePosition)
+                return
+            }
+            root.activated(root.index)
+        }
+    }
+
+    // Only favourites build a reorder handler; the row stays fixed and Sidebar draws the boundary.
+    Loader {
+        active: root.dragFrom >= 0
+        anchors.fill: parent
+        sourceComponent: Item {
+            DragHandler {
+                target: null
+                xAxis.enabled: false
+                property real startY: 0
+                onActiveChanged: {
+                    root.held = active
+                    if (active) {
+                        startY = persistentTranslation.y
+                        return
+                    }
+                    var to = TabMove.railReorder(persistentTranslation.y - startY, root.dragFrom, Theme.railRowHeight, root.lineCount).to
+                    root.reorderAt(-1)
+                    if (to !== root.dragFrom)
+                        root.moved(to)
+                }
+                onCentroidChanged: {
+                    if (active)
+                        root.reorderAt(TabMove.railReorder(persistentTranslation.y - startY, root.dragFrom, Theme.railRowHeight, root.lineCount).line)
+                }
+            }
+        }
+    }
+}

package/ui/Spinner.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import QtQuick.Shapes
+
+// The Omarchy spiral as the activity mark: a stroke-dash crawl along the brand path, never a
+// rotation. This and EmptyState's FleaMark are the only two places the spiral appears; rows
+// and menus never draw it, per the icon-language spec.
+Item {
+    id: root
+
+    property color color: Theme.color.mutedFrame
+    // The mark draws on the same 24 unit grid as every Glyph, scaled to the slot.
+    readonly property real grid: 24
+    readonly property real markScale: Math.min(root.width, root.height) / root.grid
+
+    Shape {
+        width: root.grid
+        height: root.grid
+        x: (root.width - root.grid * root.markScale) / 2
+        y: (root.height - root.grid * root.markScale) / 2
+        preferredRendererType: Shape.CurveRenderer
+        transform: Scale { xScale: root.markScale; yScale: root.markScale }
+
+        ShapePath {
+            id: crawl
+            strokeColor: root.color
+            fillColor: "transparent"
+            // A brand mark, not a cut glyph: the spiral keeps the brand's 2 and is exempt from Theme.strokeWidth on purpose.
+            strokeWidth: 2
+            capStyle: ShapePath.SquareCap
+            joinStyle: ShapePath.MiterJoin
+            strokeStyle: ShapePath.DashLine
+            // The spiral's centreline is 114 grid units and dash units are strokeWidth multiples,
+            // so 30+27=57 is exactly one period; the animation walks one period per cycle and the
+            // loop point is therefore invisible.
+            dashPattern: [30, 27]
+            PathSvg { path: "M21 21H3V3h18v14H7V7h10v6h-6" }
+        }
+    }
+
+    // Still for its first second on screen, so a load faster than that draws no motion; a hide puts it back to rest.
+    readonly property int stillMs: 1000
+    property bool crawling: false
+    onVisibleChanged: if (!root.visible) { root.crawling = false; crawl.dashOffset = 0 }
+    Timer {
+        interval: root.stillMs
+        running: root.visible && !root.crawling
+        onTriggered: root.crawling = true
+    }
+
+    NumberAnimation {
+        target: crawl
+        property: "dashOffset"
+        from: 0
+        to: -57
+        duration: 1600
+        loops: Animation.Infinite
+        // Item.visible reads effective visibility, so a hidden ancestor stops the crawl too.
+        running: root.visible && root.crawling
+    }
+}

package/ui/StableModel.qml

@@ -0,0 +1,89 @@
+import QtQuick
+import QtQml.Models
+
+// A view's row count as a model that never changes identity, so a new count keeps the delegates that stay drawn.
+DelegateModel {
+    id: root
+
+    required property Item view
+    property int total: 0
+    // The compositor is filled in componentComplete, so a group change before onCompleted is silently dropped.
+    property bool ready: false
+
+    // A move asked for inside the change's own layout is dropped, so a view that places itself does it here.
+    signal resized()
+
+    // Qt refuses an integer model larger than 100,000,000 rows.
+    readonly property int cap: 100000000
+    model: root.cap
+    groups: DelegateModelGroup { id: shown; name: "shown"; includeByDefault: false }
+    filterOnGroup: "shown"
+
+    // While true a view short of a viewport keeps a full layout's delegates in its reuse pool, so a count that grows takes them instead of building.
+    property bool warm: false
+    // The rows a full layout from the top builds, its cache buffer's included: the fill lays out no more, so none is left incubating.
+    property int warmRows: 0
+
+    // While true a count change leaves the current delegate current: Qt focuses each new current delegate, which takes the keys from an editor inside the old one.
+    property bool holdCurrent: false
+
+    onTotalChanged: root.resize()
+    onWarmChanged: if (root.warm) root.fill()
+    Component.onCompleted: { root.ready = true; root.resize() }
+
+    // Grows the count and shrinks it back in one turn, so no frame sees the rows and what they laid out waits pooled; a geometry change drains it.
+    function fill() {
+        var from = shown.count
+        var to = Math.min(root.warmRows, root.cap)
+        if (!root.ready || !root.view.reuseItems || to <= from)
+            return
+        // The buffer's rows lay out with the viewport's for this pass, built at once where a buffer pass would incubate them later.
+        var margin = root.view.displayMarginEnd
+        root.view.displayMarginEnd = margin + root.view.cacheBuffer + root.view.height
+        root.items.addGroups(from, to - from, "shown")
+        root.view.forceLayout()
+        shown.removeGroups(from, to - from, "shown")
+        root.view.forceLayout()
+        root.view.displayMarginEnd = margin
+    }
+
+    // Moves to the top and, unless holdCurrent, row 0 as a reset does, before the change, so only top rows lay out and a view placing itself after keeps its place.
+    function resize() {
+        var to = Math.min(Math.max(root.total, 0), root.cap)
+        var from = shown.count
+        if (!root.ready || to === from)
+            return
+        root.view.contentY = root.view.originY - root.view.topMargin
+        if (from > 0 && to > 0 && !root.holdCurrent)
+            root.view.currentIndex = 0
+        if (to > from)
+            root.items.addGroups(from, to - from, "shown")
+        else
+            shown.removeGroups(to, from - to, "shown")
+        // Lays out now: Qt pools a layout's removed rows only after building its inserted ones, so the next count reuses them.
+        root.view.forceLayout()
+        if (to > 0 && root.view.currentIndex < 0)
+            root.view.currentIndex = 0
+        root.resized()
+        if (to === 0)
+            root.drainHidden()
+    }
+
+    // True where a hidden count is rows kept for the return rather than an edit in flight, so the hide drains the pool beside them.
+    property bool keptRows: false
+    // A hidden view holds no delegates, pooled ones included; a shown one keeps its pool, parked, for the next listing.
+    function drainHidden() {
+        if (root.view.visible || shown.count > 0 && !root.keptRows || !root.view.reuseItems)
+            return
+        // Unpersist first so the pool toggle below frees the parked tiles too.
+        if (persistedItems.count > 0)
+            persistedItems.removeGroups(0, persistedItems.count, "persistedItems")
+        root.view.reuseItems = false
+        root.view.reuseItems = true
+    }
+    // A view hidden after it emptied drains here, since its count does not change again.
+    property Connections hiding: Connections {
+        target: root.view
+        function onVisibleChanged() { root.drainHidden() }
+    }
+}

package/ui/StateMessage.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import qs.Commons
+import "js/Errors.js" as Errors
+import "js/Filter.js" as Filter
+import "js/Format.js" as Format
+
+// The one thing a pane shows instead of rows, and it carries all three parts the States board gives
+// a pane state: the mark, then one sentence, then the detail the system can prove. The sentence used
+// to live in the status bar about 1300px away while the mode string sat here alone. The empty state
+// has its own overlay in ui/shell.qml, so this yields to it there.
+Item {
+    id: root
+
+    property string message: ""
+    property bool active: true
+    property string listingState: "loading"
+    property int total: 0
+    // The filter narrows rows already listed, so a query that matches none leaves a ready listing
+    // with nothing drawn in it; shown is -1 while no filter is up.
+    property string filterQuery: ""
+    property int shown: -1
+    // The st_mode of the directory the listing was denied. Zero whenever the backend could not stat
+    // it either, which draws no line rather than a mode string that would be false.
+    property int lockedMode: 0
+
+    readonly property bool locked: root.listingState === "locked"
+    // A listing past its wait is the Error state too, so the sentence draws with the alert mark.
+    readonly property bool failed: root.locked || root.listingState === "error" || root.listingState === "waiting"
+    readonly property bool nothingMatched: root.filterQuery.length > 0 && root.shown === 0 && root.total > 0
+    // The detail is the directory's own mode, which only a locked state has and only when the
+    // backend could stat it; everything else proves nothing extra and draws nothing.
+    readonly property string detail: root.locked ? Errors.lockedLine(root.lockedMode)
+        : root.nothingMatched ? Filter.noMatch(root.total) : ""
+
+    // The mark and lines at their unwrapped width, so ui/PaneStates.qml can tell whether they clear the listed columns.
+    readonly property real naturalWidth: Math.max(Theme.stateMarkSize, sentence.implicitWidth,
+        root.detail.length > 0 ? detailLine.implicitWidth : 0)
+
+    visible: root.active && (root.nothingMatched
+        || (root.total === 0 && root.message.length > 0 && root.listingState !== "empty"))
+
+    Column {
+        anchors.centerIn: parent
+        spacing: Theme.spacing.gap
+
+        // corner: "lock" must reach ui/js/Icons.js before any pane can reach the locked state, because Icons.pathFor falls back to the file mark in silence.
+        Glyph {
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: root.failed || root.nothingMatched
+            // A failure mark stands alone rather than beside a row's text, so it opts in to the
+            // pane-state ceiling; States.dc.html draws Locked and Error at 40 and the row mark is 19.
+            maxSize: Theme.stateMarkSize
+            width: Theme.stateMarkSize
+            height: Theme.stateMarkSize
+            name: root.locked ? "lock" : root.nothingMatched ? "search" : "alert"
+            // Only a failure takes the urgent role, and only on the mark; the sentence stays readable.
+            color: root.nothingMatched ? Theme.color.mutedFrame : Theme.color.error
+        }
+
+        Text {
+            id: sentence
+            width: root.width
+            text: root.nothingMatched ? Format.fill(Filter.WORDS.nothingMatched, root.filterQuery) : root.message
+            color: Theme.color.foreground
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.body
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.Wrap
+            textFormat: Text.PlainText
+        }
+
+        Text {
+            id: detailLine
+            width: root.width
+            visible: root.detail.length > 0
+            text: root.detail
+            color: Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.caption
+            horizontalAlignment: Text.AlignHCenter
+            textFormat: Text.PlainText
+        }
+    }
+}