flea-qml 0.0.0-stage → 0.1.0

package/ui/MarkdownText.qml

@@ -0,0 +1,87 @@
+import QtQuick
+
+// The padding sets the baseline as CSS does: on every wrapped line of rich text, on the first line of plain text.
+Text {
+    id: root
+
+    // md_rendered: line-height 1.7 over the text's own pixel size.
+    readonly property real boxRatio: 1.7
+    readonly property bool rich: root.textFormat !== Text.PlainText
+    readonly property real box: Math.round(root.font.pixelSize * root.boxRatio)
+    // QTextLine rounds the font's height up, so the first line is ceil(height) tall.
+    readonly property real lead: Math.max(0, root.box - Math.ceil(metrics.height))
+    // Qt's FixedHeight line puts its baseline this share down the box whatever the font, so the padding moves it to the centred one.
+    readonly property real fixedBaselineShare: 0.8
+    readonly property int centredBaseline: Math.round((root.box - metrics.height) / 2 + metrics.ascent)
+    // The hosts set the Markdown here; a text with a picture draws it with the pictures wider than the text scaled to its width.
+    property string markdown: ""
+    // A text whose picture is taller than the box draws on proportional lines, which grow with it; the ratio keeps every other line at the box.
+    // Sample input: "Built with ![logo](file:///d/p.png) here" holds one picture; the parser writes every local inline picture this way.
+    property bool growsForPictures: true
+    readonly property bool holdsPicture: root.growsForPictures && root.rich && /!\[[^\]]*\]\(file:/i.test(root.markdown)
+    // Built the first time a text holds a picture: a text without one owns no object for it, which the block cost gates count.
+    property Item pictures: null
+    function syncPictures() {
+        if (root.pictures === null && root.holdsPicture)
+            root.pictures = Qt.createComponent("MarkdownPictures.qml").createObject(root, { host: root })
+    }
+    onHoldsPictureChanged: root.syncPictures()
+    Component.onCompleted: root.syncPictures()
+    readonly property bool grown: root.pictures !== null && root.holdsPicture && root.pictures.tallest > root.box
+    readonly property real naturalLine: Math.ceil(metrics.height)
+    // Proportional lines keep the font's own ascent above the baseline and put the stretch below it.
+    readonly property int naturalBaseline: Math.round(metrics.ascent)
+    readonly property int restBaseline: root.grown ? root.naturalBaseline : Math.round(root.box * root.fixedBaselineShare)
+    // The tallest picture's line rests on its bottom edge at the baseline, so it is the picture plus the font's own descent.
+    readonly property real pictureLine: root.grown ? root.pictures.tallest + root.naturalLine - root.naturalBaseline : 0
+    // A one-line text takes back the stretch the ratio put under its picture; a second line would be half a box taller at least.
+    readonly property real stretch: root.grown && root.contentHeight < root.pictureLine * root.box / root.naturalLine + root.box / 2 ? root.contentHeight - root.pictureLine : 0
+    // Rich text shifts by the gap between the two baselines (negative when Qt sits it low); plain text sits at the top of its natural line.
+    readonly property int lift: root.rich ? root.centredBaseline - root.restBaseline : Math.floor(root.lead / 2)
+    // The first line's drawn baseline: Qt reports a FixedHeight line's baselineOffset at the ascent, short of where it draws.
+    readonly property real drawnBaseline: root.rich && !root.grown ? root.topPadding + root.restBaseline : root.baselineOffset
+    // The document's body size; the preview column scales it down from Quick Look's.
+    property int bodyPx: Theme.font.body
+    // Rows of a table add their own cell padding on top of the box.
+    property int cellPad: 0
+
+    // The parser pads a code chip with a no-break space in a span carrying this mark (MdEscape.CHIP_PAD_MARK), as Qt reads no em there.
+    readonly property string chipPadMark: '<span style="font-size:chippad">'
+    // The board pads a chip 4 px a side at body 14; the span's px is that over the face's space advance, so the pad's advance is those 4 px.
+    readonly property real chipPadBoardPx: 4
+    readonly property real boardBodyPx: 14
+    // advanceWidth is a call no binding tracks, so reading the metrics' font size and family measures the space again once the font settles.
+    readonly property int chipPadPx: {
+        metrics.font.pixelSize
+        metrics.font.family
+        return Math.max(1, Math.round(root.chipPadBoardPx * root.bodyPx / root.boardBodyPx * root.bodyPx / Math.max(1, metrics.advanceWidth(" "))))
+    }
+    function padSized(source) {
+        return source.indexOf(root.chipPadMark) < 0 ? source : source.split(root.chipPadMark).join('<span style="font-size:' + root.chipPadPx + 'px">')
+    }
+
+    // The host supplies the scheme gate (Markdown.isExternalLink), as no import of the parser fits the standalone probe copy.
+    property var linkGate: null
+    // One handler for every Markdown text: a link the gate passes opens in the default application, all else opens nothing.
+    onLinkActivated: function (link) {
+        if (root.linkGate !== null && root.linkGate(link))
+            Qt.openUrlExternally(link)
+    }
+
+    text: root.padSized(root.pictures !== null ? root.pictures.shown : root.markdown)
+    textFormat: Text.MarkdownText
+    wrapMode: Text.Wrap
+    color: Theme.color.foreground
+    linkColor: Theme.color.foreground
+    font.family: Theme.font.family
+    font.pixelSize: root.bodyPx
+    lineHeight: root.grown ? root.box / root.naturalLine : root.rich ? root.box : 1
+    lineHeightMode: root.rich && !root.grown ? Text.FixedHeight : Text.ProportionalHeight
+    topPadding: root.cellPad + root.lift
+    bottomPadding: root.cellPad + root.lead - root.lift - root.stretch
+
+    FontMetrics {
+        id: metrics
+        font: root.font
+    }
+}

package/ui/MarkdownWorker.js

@@ -0,0 +1,132 @@
+// MarkdownWorker.js: PreviewMarkdown's parser thread; WorkerScript binds no `.import` aliases, so Qt.include shares one scope with unique names.
+Qt.include("js/Format.js");
+Qt.include("js/MdUrl.js");
+Qt.include("js/MdHtml.js");
+Qt.include("js/MdHtmlImage.js");
+Qt.include("js/MdHtmlBlock.js");
+Qt.include("js/MdHtmlHeading.js");
+Qt.include("js/MdEscape.js");
+Qt.include("js/MdInline.js");
+Qt.include("js/MdLink.js");
+Qt.include("js/MdContainer.js");
+Qt.include("js/MdRefs.js");
+Qt.include("js/MdEntityTable.js");
+Qt.include("js/MdEntity.js");
+Qt.include("js/MdResolve.js");
+Qt.include("js/MdEmph.js");
+Qt.include("js/MdBreak.js");
+Qt.include("js/MdHold.js");
+Qt.include("js/MdRun.js");
+Qt.include("js/MdParagraphs.js");
+Qt.include("js/MdLeaf.js");
+Qt.include("js/MdItems.js");
+Qt.include("js/MarkdownLists.js");
+Qt.include("js/MdChunks.js");
+Qt.include("js/MdDocument.js");
+Qt.include("js/MdMath.js");
+Qt.include("js/MdFront.js");
+Qt.include("js/MdBlocks.js");
+
+var Format = { fileUri: fileUri };
+var MdUrl = { canonicalUrl: canonicalUrl, classifyImage: classifyImage, placeholder: placeholder, srcsetPick: srcsetPick, strippedTarget: strippedTarget, targetAllowed: targetAllowed };
+var MdHtml = { closeToken: closeToken, openToken: openToken, documentText: documentText, normalizedTarget: normalizedTarget, readTag: readTag, sanitizeTag: sanitizeTag, tagHead: tagHead, MAX_TAG_LENGTH: MAX_TAG_LENGTH };
+var MdHtmlImage = { imageUnit: imageUnit, rawImage: rawImage, isCentred: isCentred, linkOf: linkOf, wrapperTail: wrapperTail, LEADING_BREAK: LEADING_BREAK, WRAPPER_OPEN: WRAPPER_OPEN };
+var MdHtmlBlock = { splitHtmlImages: splitHtmlImages, separateBlocks: separateBlocks, htmlHeading: htmlHeading, NESTING_TAG: NESTING_TAG };
+var MdHtmlHeading = { DRAWN_PICTURE: DRAWN_PICTURE, headingUnit: headingUnit, headingPicture: headingPicture, nestDepth: nestDepth };
+var MdEscape = { chipPad: chipPad, escapeText: escapeText, isAsciiPunct: isAsciiPunct };
+var MdInline = { INTERVAL_STRIDE: INTERVAL_STRIDE, MATH_SPAN: MATH_SPAN, isSpace: isSpace, codeHtml: codeHtml, escapeDecodedText: escapeDecodedText, escapeHtmlText: escapeHtmlText, isPunct: isPunct, linkHtml: linkHtml, linkInk: linkInk, spanIntervals: spanIntervals };
+var MdLink = { angleClose: angleClose, normalizeLabel: normalizeLabel, readAutolink: readAutolink, readBarelink: readBarelink, readInlineTarget: readInlineTarget, readLabelRef: readLabelRef };
+var MdRefs = { readDefinition: readDefinition, hideTitle: hideTitle, storeDefinition: storeDefinition, readDefinitionParts: readDefinitionParts, readFootnoteDefinition: readFootnoteDefinition, killDefinition: killDefinition, readFootnoteRef: readFootnoteRef, skipDropContent: skipDropContent, definitionAt: definitionAt, hideDefinition: hideDefinition };
+var MdEntityTable = { namedValue: namedValue };
+var MdEntity = { lineBlank: lineBlank, lineRestart: lineRestart, lineState: lineState, spaceRunAt: spaceRunAt, decodeReferences: decodeReferences, referenceAt: referenceAt };
+var MdEmph = { literal: literal, process: process, runAt: runAt };
+var MdBreak = { isRuleLine: isRuleLine, lineBreak: lineBreak, quoteMarkAt: quoteMarkAt };
+var MdResolve = { bareAt: bareAt, parseAngle: parseAngle, plainText: plainText, readDestination: readDestination, resolvePair: resolvePair, styledSpan: styledSpan };
+var MdHold = { hold: hold };
+var MdRun = { parseInline: parseInline };
+var MdParagraphs = { cutAfter: cutAfter };
+var MdLeaf = { alertTitle: alertTitle, atxHeading: atxHeading, chunkTable: chunkTable, LIST_CHUNK_ITEMS: LIST_CHUNK_ITEMS, headingSafe: headingSafe, delimAligns: delimAligns, fenceOpen: fenceOpen, isThematic: isThematic, isSetext: isSetext, setextLevel: setextLevel, splitRow: splitRow, standaloneImage: standaloneImage, tableBlock: tableBlock, taskText: taskText, pinTaskBox: pinTaskBox };
+var MdContainer = { readListMarker: readListMarker, indentationAt: indentationAt, takeIndent: takeIndent, quoteAt: quoteAt, takeQuote: takeQuote, listAt: listAt, takeList: takeList, startsBlock: startsBlock, textAt: textAt, unindent: unindent, expandLead: expandLead };
+var MdItems = { builder: builder, isRaw: isRaw, listBlock: listBlock, quoteBlocks: quoteBlocks, visibleLines: visibleLines };
+var MarkdownLists = { ORDERED_START: ORDERED_START, runStep: runStep };
+var MdChunks = { chunkList: chunkList };
+var MdMath = { displayAt: displayAt, inlineSources: inlineSources, splitDisplay: splitDisplay };
+var MdFront = { closeAt: closeAt, sendFront: sendFront };
+var MdDocument = { writer: writer, preparedText: preparedText };
+var MdBlocks = { blocks: blocks, blockJob: blockJob, sliceDue: sliceDue, SLICE_MS: SLICE_MS };
+// Short aliases the libraries use for each other, matching their `.import` names.
+var Names = MdEntityTable;
+var Md = MdInline;
+var Link = MdLink;
+var Esc = MdEscape;
+var Run = MdRun;
+var Hold = MdHold;
+var Emph = MdEmph;
+var Ent = MdEntity;
+var Brk = MdBreak;
+var Refs = MdRefs;
+var Leaf = MdLeaf;
+var Res = MdResolve;
+var Container = MdContainer;
+var Document = MdDocument;
+var Front = MdFront;
+var Items = MdItems;
+var Chunks = MdChunks;
+var Lists = MarkdownLists;
+var Maths = MdMath;
+var Html = MdHtml;
+var HtmlImage = MdHtmlImage;
+var HtmlBlock = MdHtmlBlock;
+var HtmlHeading = MdHtmlHeading;
+
+// The live request's parse, run one slice a message so a newer request or a cancel is read between two slices.
+var held = null;
+WorkerScript.onMessage = function (msg) {
+    if (msg.cancel === true) {
+        held = null;
+        return;
+    }
+    // Liveness is the pane's protocol: only a request carrying a head field is acked, sliced and beaten, other askers see full replies alone.
+    if (msg.cont === true) {
+        if (held === null || held.seq !== msg.seq)
+            return;
+    } else if (msg.head !== undefined) {
+        WorkerScript.sendMessage({ seq: msg.seq, ack: true });
+        try {
+            held = { seq: msg.seq, parse: MdBlocks.blockJob(msg.source, msg.dir, msg.chrome, msg.ink, msg.head, function (head) {
+                // A first parse of a file sends its head ahead, so the first screen draws while the rest is still parsing.
+                WorkerScript.sendMessage({ seq: msg.seq, blocks: head, error: '', partial: true });
+            }, function () {
+                WorkerScript.sendMessage({ seq: msg.seq, progress: true });
+            }) };
+        } catch (e) {
+            held = null;
+            WorkerScript.sendMessage({ seq: msg.seq, blocks: [], error: String(e) });
+            return;
+        }
+    } else {
+        var plain = [];
+        var failure = '';
+        try {
+            plain = MdBlocks.blocks(msg.source, msg.dir, msg.chrome, msg.ink, msg.head, undefined, undefined);
+        } catch (e) {
+            failure = String(e);
+        }
+        WorkerScript.sendMessage({ seq: msg.seq, blocks: plain, error: failure });
+        return;
+    }
+    var blocks = [];
+    var error = '';
+    try {
+        blocks = held.parse.run(MdBlocks.sliceDue(MdBlocks.SLICE_MS));
+    } catch (e) {
+        error = String(e);
+        blocks = [];
+    }
+    if (blocks === null) {
+        WorkerScript.sendMessage({ seq: msg.seq, yielded: true });
+        return;
+    }
+    held = null;
+    WorkerScript.sendMessage({ seq: msg.seq, blocks: blocks, error: error });
+};

package/ui/MatchText.qml

@@ -0,0 +1,99 @@
+import QtQuick
+
+// A name with the search or filter match run marked by an accent wash. Three PlainText runs laid
+// out left to right, never StyledText: a filename is arbitrary text and StyledText would render any
+// markup found inside it. SearchFilter rule 3: the run keeps the foreground ink and the accent goes
+// behind it, because accent against foreground is under 1.5:1 on nine of the 22 installed palettes
+// and exactly 1.00 on kanagawa, where inked matches were the dimmest part of the name.
+Item {
+    id: root
+
+    property string text: ""
+    // Where the run starts inside text, -1 for no run; ui/js/Match.js computes both.
+    property int matchStart: -1
+    property int matchLength: 0
+    property color color: Theme.color.foreground
+    property color accent: Theme.color.accent
+    property int pixelSize: Theme.font.body
+    // True while the strip that explains the run is up, so the content builds with it and no keystroke pays for it.
+    property bool armed: false
+    // Opt-in middle elision, so the match run keeps its place.
+    property bool elideMiddle: false
+
+    readonly property bool marked: root.matchStart >= 0 && root.matchLength > 0
+    readonly property string before: root.marked ? root.text.substring(0, root.matchStart) : root.text
+    readonly property string run: root.marked ? root.text.substring(root.matchStart, root.matchStart + root.matchLength) : ""
+    readonly property string after: root.marked ? root.text.substring(root.matchStart + root.matchLength) : ""
+
+    implicitHeight: beforeText.implicitHeight
+    // The marked run and its tail exist only while a match is marked, so their widths are the loaded item's.
+    implicitWidth: beforeText.implicitWidth + (markLoader.item ? markLoader.item.runsImplicitWidth : 0)
+
+    Text {
+        id: beforeText
+        anchors.verticalCenter: parent.verticalCenter
+        // Each run takes what is left of the slot, so the tail elides and nothing ever overflows.
+        width: Math.min(implicitWidth, root.width)
+        // A run clamped to zero paints nothing: an elided Text at width 0 still draws its full
+        // text on its first layout, so a late match (a head that fills the slot) overpaints
+        // whatever follows until any relayout. The accent wash below already gates the same way.
+        visible: width > 0
+        text: root.before
+        color: root.color
+        font.family: Theme.font.family
+        font.pixelSize: root.pixelSize
+        elide: root.elideMiddle && !root.marked ? Text.ElideMiddle : Text.ElideRight
+        textFormat: Text.PlainText
+        maximumLineCount: 1
+    }
+
+    // Built only while a match is marked: an unmarked name is the one run above, and most rows are unmarked.
+    Loader {
+        id: markLoader
+        active: root.marked || root.armed
+        anchors.left: beforeText.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width: Math.max(0, root.width - beforeText.width)
+        sourceComponent: Item {
+            readonly property real runsImplicitWidth: runText.implicitWidth + afterText.implicitWidth
+
+            Rectangle {
+                anchors.fill: runText
+                visible: runText.width > 0
+                // The accent carries the row dim, so the wash multiplies it instead of replacing it.
+                color: Qt.rgba(root.accent.r, root.accent.g, root.accent.b, root.accent.a * Theme.washActive)
+            }
+
+            Text {
+                id: runText
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                width: Math.min(implicitWidth, parent.width)
+                visible: width > 0
+                text: root.run
+                color: root.color
+                font.family: Theme.font.family
+                font.pixelSize: root.pixelSize
+                elide: Text.ElideRight
+                textFormat: Text.PlainText
+                maximumLineCount: 1
+            }
+
+            Text {
+                id: afterText
+                anchors.left: runText.right
+                anchors.verticalCenter: parent.verticalCenter
+                width: Math.max(0, parent.width - runText.width)
+                visible: width > 0
+                text: root.after
+                color: root.color
+                font.family: Theme.font.family
+                font.pixelSize: root.pixelSize
+                elide: Text.ElideRight
+                textFormat: Text.PlainText
+                maximumLineCount: 1
+            }
+        }
+    }
+}

package/ui/MediaSession.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+
+// One preview's MPRIS player (tools/flea-mpris): the helper starts when `active` first turns true, off the first frame.
+QtObject {
+    id: root
+
+    // The PreviewMedia this speaks for, which carries out the helper's commands.
+    required property var media
+    property bool active: false
+    property bool ready: false
+    // The newest state line, written when the helper starts if it was not up yet.
+    property string last: ""
+
+    onActiveChanged: if (root.active) helper.running = true
+
+    function send(state) {
+        root.last = JSON.stringify(state)
+        if (root.ready) helper.write(root.last + "\n")
+    }
+
+    // Destroying the preview destroys this Process, which kills the helper; a UI that died instead closes its stdin.
+    property Process helper: Process {
+        id: helper
+        command: [Quickshell.env("FLEA_MPRIS") || "/usr/lib/flea/flea-mpris"]
+        stdinEnabled: true
+        stdout: SplitParser {
+            splitMarker: "\n"
+            onRead: function (line) { root.media.remote(line) }
+        }
+        onStarted: {
+            root.ready = true
+            if (root.last.length > 0) helper.write(root.last + "\n")
+        }
+        onExited: root.ready = false
+    }
+}

package/ui/MediaSound.qml

@@ -0,0 +1,26 @@
+pragma Singleton
+import QtQuick
+
+// MediaMute rule 3: mute is one session flag both media surfaces read, never written to ui.json; the level beside it is stored as preview.volume.
+QtObject {
+    id: root
+
+    property bool muted: false
+
+    // The level under a press, 0 to 100, or -1 with none down, when the stored level shows.
+    property int held: -1
+    // Every Flea player plays at this, mute or not: 100 is the full-scale output a player had before the level existed.
+    readonly property int volume: root.held >= 0 ? root.held : ViewState.mediaVolume
+    // What the player takes: QtAudio.convertVolume(volume / 100, Logarithmic, Linear), which QML does not expose, as qtaudio.cpp computes it.
+    readonly property real gain: root.volume > 99 ? 1 : -Math.log(1 - root.volume / 100) / Math.log(100)
+
+    function toggle() { root.muted = !root.muted }
+
+    // A press or drag sets the level live and writes nothing; the release stores it once.
+    function setVolume(level) { root.held = level }
+
+    function keepVolume() {
+        ViewState.setMediaVolume(root.volume)
+        root.held = -1
+    }
+}

package/ui/MediaStrip.qml

@@ -0,0 +1,191 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Format.js" as Format
+
+// The transport the canvas draws under a media frame: a play/pause mark, a hairline seek with a square handle, a tabular clock and, under Quick Look, Media040's volume track. No filled chrome anywhere.
+Item {
+    id: root
+
+    property bool playing: false
+    property real position: 0
+    property real duration: 0
+    // MediaMute rules 2 and 3: the state reads by glyph, off the one session flag both strips share.
+    readonly property bool muted: Flea.MediaSound.muted
+
+    // A tile borders four sides, which is the PreviewColumn artboard. Flush against the bottom of
+    // the Quick Look overlay that same border reads as a box, so there it is one top hairline.
+    property bool framed: true
+
+    signal toggled()
+    signal seeked(real ms)
+    // Any contact at all, so a host that hides this over a video can re-arm its own timer.
+    signal touched()
+
+    readonly property real fraction: root.duration > 0
+        ? Math.max(0, Math.min(1, root.position / root.duration)) : 0
+    // One second a click, the step ui/Preview.qml set on the qs.Ui slider this replaced.
+    readonly property int wheelStepMs: 1000
+
+    // A drag in flight draws from the pointer, not from the player, whose own advance would fight it.
+    property bool scrubbing: false
+    property real scrubFraction: 0
+    readonly property real shown: root.scrubbing ? root.scrubFraction : root.fraction
+
+    implicitHeight: Theme.chromeHeight
+
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.color.surface
+        border.width: root.framed ? Theme.spacing.hairline : 0
+        border.color: Theme.color.mutedFrame
+    }
+
+    // The unframed form's own divider, the same hairline ChromeBar draws under itself.
+    Rectangle {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        visible: !root.framed
+        height: Theme.spacing.hairline
+        color: Theme.color.foreground
+        opacity: 0.12
+    }
+
+    // A test clicks each part itself rather than guess an offset; ui/shell.qml's previewSliderCentre reads seekItem, and volumeItem is null in the framed strip.
+    readonly property var playItem: playSlot
+    readonly property var seekItem: track
+    readonly property var muteItem: muteSlot
+    readonly property var volumeItem: volumeSlot.item
+
+    Item {
+        id: playSlot
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        width: Math.max(Theme.hitMin, Theme.font.bodySmall)
+        height: Math.max(Theme.hitMin, Theme.font.bodySmall)
+
+        Accessible.role: Accessible.Button
+        Accessible.name: root.playing ? "Pause" : "Play"
+        Accessible.onPressAction: { root.touched(); root.toggled() }
+
+        Flea.Glyph {
+            anchors.centerIn: parent
+            width: Theme.font.bodySmall
+            height: Theme.font.bodySmall
+            name: root.playing ? "pause" : "play"
+            color: Theme.color.foreground
+        }
+
+        TapHandler {
+            acceptedButtons: Qt.LeftButton
+            gesturePolicy: TapHandler.ReleaseWithinBounds
+            onTapped: {
+                root.touched()
+                root.toggled()
+            }
+        }
+    }
+
+    Flea.MediaTrack {
+        id: track
+        anchors.left: playSlot.right
+        anchors.leftMargin: Theme.spacing.gap
+        anchors.right: clock.left
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        fraction: root.shown
+
+        // Seeks once, on release: seeking on every dragged frame would fight the player's own
+        // advance. A press and release without moving is a click, so this covers both.
+        MouseArea {
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+            onPressed: function (mouse) {
+                root.scrubbing = true
+                root.scrubFraction = track.fractionAt(mouse.x)
+                root.touched()
+            }
+            onPositionChanged: function (mouse) {
+                if (root.scrubbing)
+                    root.scrubFraction = track.fractionAt(mouse.x)
+                root.touched()
+            }
+            onReleased: {
+                root.scrubbing = false
+                root.touched()
+                if (root.duration > 0)
+                    root.seeked(root.duration * root.scrubFraction)
+            }
+            // A wheel is not a position change, so this is the one interaction that has to re-arm a
+            // host's hide timer itself; the host clamps the absolute position this produces.
+            onWheel: function (wheel) {
+                root.touched()
+                if (root.duration > 0)
+                    root.seeked(root.position + (wheel.angleDelta.y > 0 ? root.wheelStepMs : -root.wheelStepMs))
+            }
+        }
+    }
+
+    // MediaMute rule 1: one mark after the clock in the chrome ink, drawn by the play mark's Glyph; the track gives up its width, and under Quick Look the mark sits one gap left of the volume track.
+    Item {
+        id: muteSlot
+        anchors.right: root.framed ? parent.right : volumeSlot.left
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        width: Math.max(Theme.hitMin, Theme.font.bodySmall)
+        height: Math.max(Theme.hitMin, Theme.font.bodySmall)
+
+        Accessible.role: Accessible.Button
+        Accessible.name: root.muted ? "Unmute" : "Mute"
+        Accessible.onPressAction: { root.touched(); Flea.MediaSound.toggle() }
+
+        Flea.Glyph {
+            anchors.centerIn: parent
+            width: Theme.font.bodySmall
+            height: Theme.font.bodySmall
+            // Rule 2: both states are foreground, because a muted player is a mode and not a
+            // control that cannot be pressed.
+            name: root.muted ? "volume-x" : "volume"
+            color: Theme.color.foreground
+        }
+
+        TapHandler {
+            acceptedButtons: Qt.LeftButton
+            gesturePolicy: TapHandler.ReleaseWithinBounds
+            onTapped: {
+                root.touched()
+                Flea.MediaSound.toggle()
+            }
+        }
+    }
+
+    // Media040's level, built with the strip so its first frame already draws the stored one.
+    Loader {
+        id: volumeSlot
+        active: !root.framed
+        anchors.right: parent.right
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        // Media040 draws a 60 px track at bodySmall 13, in resolved pixels, so space() would scale it twice.
+        width: Math.round(60 * Theme.font.bodySmall / 13)
+        sourceComponent: Flea.MediaVolume {}
+        onLoaded: item.touched.connect(root.touched)
+    }
+
+    Text {
+        id: clock
+        anchors.right: muteSlot.left
+        anchors.rightMargin: Theme.spacing.gap
+        anchors.verticalCenter: parent.verticalCenter
+        text: Format.duration(root.position) + " / " + Format.duration(root.duration)
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        textFormat: Text.PlainText
+    }
+}

package/ui/MediaTrack.qml

@@ -0,0 +1,36 @@
+import QtQuick
+
+// The hairline track of the media strip, drawn for the seek and, under Quick Look, the volume: the played part and a square handle in the accent frame ink, the host adds its MouseArea.
+Item {
+    id: root
+
+    property real fraction: 0
+    // A square handle, sized off the caption token so it scales with the text like everything else.
+    readonly property int handle: Math.round(Theme.font.caption * 0.5)
+
+    function fractionAt(x) {
+        return Math.max(0, Math.min(1, x / Math.max(1, root.width)))
+    }
+
+    Rectangle {
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width
+        height: Theme.spacing.hairline * 2
+        color: Theme.color.mutedFrame
+    }
+
+    Rectangle {
+        anchors.verticalCenter: parent.verticalCenter
+        width: parent.width * root.fraction
+        height: Theme.spacing.hairline * 2
+        color: Theme.color.accentFrame
+    }
+
+    Rectangle {
+        x: Math.round(parent.width * root.fraction) - root.handle / 2
+        anchors.verticalCenter: parent.verticalCenter
+        width: root.handle
+        height: root.handle
+        color: Theme.color.accentFrame
+    }
+}

package/ui/MediaVolume.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import "." as Flea
+
+// Media040's level on the Quick Look strip: a track that sets Flea.MediaSound's volume live and stores it on release; mute leaves it alone.
+Flea.MediaTrack {
+    id: root
+
+    // Any contact at all, so a host that hides the strip over a video can re-arm its own timer.
+    signal touched()
+
+    // True while this track's own press holds the level, so closing Quick Look under a button still down lets it go.
+    property bool pressing: false
+
+    fraction: Flea.MediaSound.volume / 100
+
+    Component.onDestruction: if (root.pressing) Flea.MediaSound.held = -1
+
+    Accessible.role: Accessible.Slider
+    Accessible.name: "Volume"
+    // A screen reader steps the level by 5 and stores it as a release would.
+    Accessible.onIncreaseAction: root.nudge(5)
+    Accessible.onDecreaseAction: root.nudge(-5)
+
+    function nudge(delta) {
+        Flea.MediaSound.setVolume(Math.max(0, Math.min(100, Flea.MediaSound.volume + delta)))
+        Flea.MediaSound.keepVolume()
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onPressed: function (mouse) {
+            root.pressing = true
+            root.touched()
+            Flea.MediaSound.setVolume(Math.round(100 * root.fractionAt(mouse.x)))
+        }
+        onPositionChanged: function (mouse) {
+            root.touched()
+            if (pressed)
+                Flea.MediaSound.setVolume(Math.round(100 * root.fractionAt(mouse.x)))
+        }
+        onReleased: {
+            root.pressing = false
+            root.touched()
+            Flea.MediaSound.keepVolume()
+        }
+        // A stolen grab ends the drag like a release, so the level heard is the level kept.
+        onCanceled: {
+            root.pressing = false
+            Flea.MediaSound.keepVolume()
+        }
+    }
+}