flea-qml 0.0.0-stage → 0.2.0

package/ui/PreviewEdge.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import qs.Commons
+
+// The Columns view's preview column edge: ui/ResizeHandle.qml over the edge, and on hover the Media040 board's move-horizontal mark beside the accent line.
+Item {
+    id: root
+
+    // The preview column's left edge in the parent's pixels; the zone is centred on the hairline just left of it.
+    property int edge: 0
+    // True from the press to the release, so the line and mark stay up while the pointer is dragged off the zone.
+    property bool dragging: false
+    // The pointer's pixels left or right of where it pressed, on every move of a drag.
+    signal dragged(int shift)
+    signal grabbed()
+    signal released()
+    signal restored()
+
+    objectName: "previewEdge"
+    width: handle.width
+    x: root.edge - 1 - Math.floor(root.width / 2)
+
+    property real pressX: 0
+    // False from the press until the pointer is past the platform drag distance, so a click or a jitter keeps the stored width.
+    property bool pulled: false
+
+    ResizeHandle {
+        id: handle
+        anchors.fill: parent
+        hot: root.dragging
+        onPressed: function (mouse) {
+            root.pressX = handle.mapToItem(null, mouse.x, mouse.y).x
+            root.dragging = true
+            root.pulled = false
+            root.grabbed()
+        }
+        // The zone reports hover moves too, so only a held drag moves the edge.
+        onMoved: function (mouse) {
+            if (!root.dragging) return
+            var shift = Math.round(handle.mapToItem(null, mouse.x, mouse.y).x - root.pressX)
+            if (!root.pulled && Math.abs(shift) > Qt.styleHints.startDragDistance) root.pulled = true
+            if (root.pulled) root.dragged(shift)
+        }
+        onReleased: { root.dragging = false; root.released() }
+        onDoubleClicked: root.restored()
+    }
+
+    HoverHandler { id: hover }
+
+    // The mark is built with the line: left 12 px of the edge, top at the column's middle.
+    Loader {
+        x: root.edge - 12 - root.x
+        y: root.height / 2
+        width: 16
+        height: 16
+        active: hover.hovered || root.dragging
+        sourceComponent: Glyph {
+            anchors.fill: parent
+            name: "move-horizontal"
+            color: Theme.color.foreground
+            maxSize: 16
+        }
+    }
+}

package/ui/PreviewFacts.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import "." as Flea
+
+// What the preview column states under the name: a tall kind's one compact line, or the table of every fact.
+Item {
+    id: root
+
+    property bool compact: false
+    // ui/js/Facts.js compactLine: the Kind and the tail of the one line.
+    property var line: ({ kind: "", tail: "" })
+    property var rows: []
+
+    height: root.compact ? factsLine.height : factsTable.height
+
+    Flea.PreviewFactsLine {
+        id: factsLine
+        width: root.width
+        visible: root.compact
+        kind: root.line.kind
+        tail: root.line.tail
+    }
+
+    // An empty model while the line shows, so the hidden table builds no row.
+    Flea.FactsTable {
+        id: factsTable
+        width: root.width
+        visible: !root.compact
+        rows: root.compact ? [] : root.rows
+    }
+}

package/ui/PreviewFactsLine.qml

@@ -0,0 +1,34 @@
+import QtQuick
+
+// The tall kinds' one facts line: the Kind elides at its end so the size and the count stay whole.
+Item {
+    id: root
+
+    // The Kind, and the " · size · count" tail, as ui/js/Facts.js compactLine returns them.
+    property string kind: ""
+    property string tail: ""
+
+    // One row of the full table, so the line sits where its first row would.
+    height: Math.round(Theme.font.caption * 1.5)
+
+    Text {
+        id: kindText
+        width: Math.min(implicitWidth, Math.max(0, root.width - tailText.implicitWidth))
+        text: root.kind
+        color: Theme.color.foreground
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        textFormat: Text.PlainText
+        elide: Text.ElideRight
+    }
+
+    Text {
+        id: tailText
+        anchors.left: kindText.right
+        text: root.tail
+        color: Theme.color.foreground
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        textFormat: Text.PlainText
+    }
+}

package/ui/PreviewHtml.qml

@@ -0,0 +1,233 @@
+import QtQuick
+import qs.Commons
+import Quickshell.Io
+import "." as Flea
+import "js/Markdown.js" as Markdown
+import "js/Format.js" as Format
+import "js/PreviewKeys.js" as PreviewKeys
+import "js/Scroll.js" as Scroll
+
+// Rebuilt passive HTML and source code share the frame and its scroll lane.
+// The backend supplies only fixed whitelist tags and escaped text; never raw HTML.
+Item {
+    id: root
+    property bool active: false
+    property string path: ""
+    property real size: 0
+    readonly property int byteCeiling: 1048576
+    readonly property int settleMs: 160
+    property int maxBytes: byteCeiling
+    property bool truncate: false
+    property real cornerRadius: Math.max(0, Style.cornerRadius - Theme.spacing.hairline)
+    property bool compact: false
+    property bool externalScrollBars: false
+    property var backend: null
+    property string slot: "column"
+    property string view: "rendered"
+    property bool wrap: false
+    readonly property string shownView: root.view === "source" ? "source" : "rendered"
+    readonly property bool sourceView: root.shownView === "source"
+    readonly property bool overSize: root.size > root.maxBytes
+    readonly property bool tooLarge: root.overSize || (root.sourceView && !!root.sourceCode && root.sourceCode.answer === "large")
+    readonly property bool binary: root.sourceView && !!root.sourceCode && root.sourceCode.answer === "binary"
+    readonly property int deviceWidth: Math.max(1, Math.round(root.width * Screen.devicePixelRatio))
+    readonly property int deviceHeight: root.slot === "look" ? Math.max(1, Math.ceil(root.height * root.deviceWidth / Math.max(1, root.width))) : 0
+    property int token: -1
+    property bool pending: false
+    property bool readFailed: false
+    property bool hasDrawn: false
+    property int imageToken: -1
+    property int total: 0
+    property string imageFile: ""
+    property string safeHtml: ""
+    property string pageTitle: ""
+    property int renderedWidth: 0
+    property real zoom: 1
+    property bool sourceBuilt: false
+    readonly property var sourceCode: sourceLoader.item
+    readonly property var viewport: root.sourceView ? (root.sourceCode ? root.sourceCode.viewport : null) : page
+    readonly property Item bodyItem: root.sourceView ? root.sourceCode : page
+    readonly property bool failed: root.sourceView ? root.readFailed || (!!root.sourceCode && root.sourceCode.answer === "failed")
+        : root.readFailed
+    readonly property bool contentReady: root.sourceView ? !!root.sourceCode && root.sourceCode.settled
+        : !root.pending && root.hasDrawn
+    readonly property bool firstScreen: root.failed || root.tooLarge || root.binary
+        || (root.sourceView ? !!root.sourceCode && root.sourceCode.firstScreen : root.contentReady)
+    readonly property bool loading: root.active && !root.firstScreen && (root.sourceView || !root.hasDrawn)
+    readonly property bool blank: root.tooLarge || root.binary
+    readonly property string status: root.tooLarge ? "This file is too large to preview."
+        : root.failed ? "This file could not be read." : root.firstScreen ? "ready" : "loading"
+    readonly property string lineLabel: Markdown.countLine(root.sourceView && root.sourceCode ? root.sourceCode.total : root.total)
+    readonly property real scrollY: root.viewport ? root.viewport.contentY : 0
+
+    function captureState(window, owner, pane, column) {
+        var bar = column ? null : pane.barGeometry()
+        var frame = column ? owner.frameItem : owner.panesItem.parent
+        var lane = scrollBars.item ? scrollBars.item.children[0] : null
+        return JSON.stringify({ path: root.path, view: root.shownView, ready: root.firstScreen,
+            visible: column ? owner.visible : owner.revealedOpen, state: root.status,
+            lines: root.sourceView && root.sourceCode ? root.sourceCode.total : root.total,
+            count: bar ? bar.lines.text : root.lineLabel, mark: bar ? bar.markName : "html", file: root.imageFile,
+            width: root.renderedWidth, deviceWidth: root.deviceWidth, y: root.scrollY, zoom: root.zoom,
+            facts: column ? owner.factsLine.kind + owner.factsLine.tail : "", frame: window.rectOf(frame),
+            column: column, window: { width: window.width, height: window.height }, radius: frame.radius,
+            hairline: frame.border.width, ringColor: String(frame.border.color), canvasColor: String(frame.color),
+            viewportHeight: root.viewport ? root.viewport.height : 0, contentHeight: root.viewport ? root.viewport.contentHeight : 0,
+            lane: lane ? { shown: lane.shown, visible: lane.visible, rect: window.rectOf(lane) } : null,
+            close: bar ? { hovered: bar.close.hovered, pressed: bar.close.pressed, focused: bar.close.keyboardFocused,
+                ring: bar.close.ringItem.visible, centre: window.centreOf(bar.close) } : null })
+    }
+    function cancel() {
+        settle.stop()
+        if (root.pending && root.backend && typeof root.backend.askHtml === "function")
+            root.backend.askHtml(root.slot, "", root.deviceWidth, true)
+        root.token = -1
+        root.pending = false
+    }
+    function schedule() {
+        if (!root.active || root.sourceView || root.tooLarge) { root.cancel(); return }
+        settle.restart()
+    }
+    function ask() {
+        if (!root.active || root.sourceView || root.tooLarge || root.width <= 0) return
+        if (!root.backend || typeof root.backend.askHtml !== "function") { root.readFailed = true; return }
+        root.readFailed = false
+        root.pending = true
+        root.token = root.backend.askHtml(root.slot, root.path, root.deviceWidth, false, root.deviceHeight)
+    }
+    function scrollBy(rows) {
+        var v = root.viewport
+        if (!v) return
+        var bounds = Scroll.limitsY(v)
+        v.contentY = Math.max(bounds.min, Math.min(bounds.max, v.contentY + rows * Theme.rowHeight))
+    }
+    function zoomBy(steps) { if (!root.sourceView) root.zoom = PreviewKeys.zoomStep(root.zoom, steps) }
+    function zoomFit() { root.zoom = 1 }
+    function endGap() { return root.viewport ? Math.max(0, root.viewport.contentHeight - root.viewport.height - root.viewport.contentY) : -1 }
+    function keepTop(top) {
+        var v = root.sourceView ? root.viewport : null
+        if (!v) return
+        v.forceLayout()
+        v.positionViewAtIndex(top, ListView.Beginning)
+    }
+    onWrapChanged: if (root.sourceView && root.viewport) Qt.callLater(root.keepTop, Math.max(0, root.viewport.indexAt(0, root.viewport.contentY + 1)))
+
+    onPathChanged: {
+        root.cancel()
+        root.hasDrawn = false
+        root.imageFile = ""
+        root.safeHtml = ""
+        root.total = 0
+        root.readFailed = false
+        root.zoom = 1
+        page.contentY = 0
+        root.schedule()
+    }
+    onActiveChanged: root.schedule()
+    onSourceViewChanged: {
+        if (root.sourceView) root.sourceBuilt = true
+        root.readFailed = false
+        root.schedule()
+    }
+    onBackendChanged: root.schedule()
+    // Inline text reflows locally; resizing does not reread or rebuild the file.
+    onTooLargeChanged: root.schedule()
+    Component.onCompleted: { root.sourceBuilt = root.sourceView; root.schedule() }
+    Component.onDestruction: {
+        root.cancel()
+        if (root.sourceCode) root.sourceCode.active = false
+    }
+    // Settle path/view changes before requesting a bounded read.
+    Timer { id: settle; interval: root.settleMs; onTriggered: root.ask() }
+    Connections {
+        target: root.backend
+        function onHtmlResult(message) {
+            if (!root.active || root.sourceView || message.slot !== root.slot || message.token !== root.token) return
+            root.pending = false
+            root.readFailed = message.state !== "ready"
+            if (!root.readFailed) {
+                root.total = message.total
+                root.renderedWidth = root.deviceWidth
+                root.pageTitle = message.title || ""
+                root.safeHtml = message.html || ""
+                root.hasDrawn = true
+                root.imageToken = message.token
+            }
+        }
+    }
+
+    Flickable {
+        id: page
+        anchors.fill: parent
+        clip: true
+        visible: !root.sourceView && !root.tooLarge && !root.failed
+        contentWidth: Math.max(width, picture.width)
+        contentHeight: picture.y + picture.height + Theme.spacing.gap
+        boundsBehavior: Flickable.StopAtBounds
+        property int currentIndex: -1
+        function forceLayout() {}
+        Text {
+            id: picture
+            x: Theme.spacing.gap
+            y: Theme.spacing.gap
+            width: Math.max(0, page.width - 2 * Theme.spacing.gap)
+            height: implicitHeight
+            // Only add our fixed presentation rules to the already sanitized tags.
+            // No source attributes, style sheets or resources are accepted.
+            text: root.safeHtml.replace(/<(h[1-6]|p|pre|blockquote|ul|ol)>/g,
+                '<$1 style="margin-top:0.6em;margin-bottom:0.6em">')
+            textFormat: Text.RichText
+            wrapMode: Text.Wrap
+            color: Theme.color.foreground
+            font.family: Theme.font.family
+            font.pixelSize: (root.compact ? Theme.font.bodySmall : Theme.font.body) * root.zoom
+        }
+    }
+
+    Loader {
+        anchors.fill: page
+        active: root.active && page.visible && root.cornerRadius > 0 && GraphicsInfo.api !== GraphicsInfo.Software
+        source: "HtmlClip.qml"
+        onLoaded: {
+            item.target = page
+            item.radius = Qt.binding(function () { return root.cornerRadius })
+            item.roundTop = root.slot !== "look"
+        }
+    }
+    FileView {
+        id: sourceFile
+        path: root.active && root.sourceView && root.truncate && !root.tooLarge ? root.path : ""
+        printErrors: false
+        onLoadFailed: root.readFailed = true
+    }
+    Loader {
+        id: sourceLoader
+        anchors.fill: parent
+        anchors.margins: root.compact ? Theme.spacing.gap : Theme.spacing.rowPaddingX
+        active: root.sourceBuilt
+        visible: root.sourceView
+        source: "CodeLines.qml"
+        onLoaded: {
+            item.backend = Qt.binding(function () { return root.backend })
+            item.path = Qt.binding(function () { return root.path })
+            item.fromText = Qt.binding(function () { return root.truncate })
+            item.text = Qt.binding(function () { return root.truncate && sourceFile.loaded ? sourceFile.text() : null })
+            item.slot = Qt.binding(function () { return root.slot })
+            item.active = Qt.binding(function () { return root.active && root.sourceView && !root.overSize })
+            item.numbered = true
+            item.scrolls = true
+            item.wrap = Qt.binding(function () { return root.wrap })
+            item.pixelSize = Qt.binding(function () { return root.compact ? Theme.font.caption : Theme.font.body })
+        }
+    }
+    Flea.FastScrollHandler { flickable: root.viewport; visible: !root.externalScrollBars }
+    Loader {
+        id: scrollBars
+        anchors.fill: parent
+        property var targetView: root.viewport
+        active: !root.externalScrollBars && root.viewport !== null
+        sourceComponent: Flea.ViewportScrollBars { flickable: parent.targetView }
+    }
+    Flea.LoadingState { anchors.fill: parent; visible: root.loading }
+    Flea.CodeRefusal { anchors.fill: parent; visible: false; binary: root.binary; failed: root.failed; tooLarge: root.tooLarge; markName: "html" }
+}

package/ui/PreviewImage.qml

@@ -0,0 +1,253 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Format.js" as Format
+import "js/Kinds.js" as Kinds
+import "js/PreviewKeys.js" as PreviewKeys
+import "js/Scroll.js" as Scroll
+import "js/Thumbs.js" as Thumbs
+
+// The Quick Look's image pane, reached only through Preview.qml's Loader. It draws the file itself:
+// the 256 px cache file the column draws would be an eightfold upscale on a surface this size.
+Item {
+    id: root
+
+    // A zoomed picture runs past the surface's edges.
+    clip: true
+
+    property string path: ""
+
+    // A camera RAW is drawn through the copy of its embedded JPEG that Preview.qml's meta reply names, never itself; its picture area stops above the caption band.
+    readonly property bool raw: Kinds.isRaw(root.path)
+    property string embedded: ""
+    property bool embeddedAnswered: false
+    readonly property string drawPath: root.raw ? root.embedded : root.path
+    readonly property real areaHeight: root.raw ? root.height - Theme.chromeHeight : root.height
+
+    // Times the fit size, on the PDF's ladder; 1 is fit.
+    property real zoom: PreviewKeys.PDF_ZOOM_MIN
+    readonly property bool zoomed: root.zoom > PreviewKeys.PDF_ZOOM_MIN
+    // The zoom read against fit; fit itself carries no label.
+    readonly property string zoomLabel: root.zoomed ? "%1%".arg(Math.round(root.zoom * 100)) : ""
+    // The pannable viewport, the strip under it and the sharper layer, for Preview.qml's readers and the zoom suite.
+    readonly property alias viewport: flick
+    readonly property alias band: band
+    readonly property alias fullPicture: sharp
+    // Another file is a new subject: the next one opens at fit.
+    onPathChanged: root.zoom = PreviewKeys.PDF_ZOOM_MIN
+
+    // The viewport's centre point stays put across a step; a picture still decoding or refused does not zoom in.
+    function zoomTo(next) {
+        if (next === root.zoom || (next > PreviewKeys.PDF_ZOOM_MIN && picture.status !== Image.Ready)) return
+        var fx = (flick.contentX + flick.width / 2) / flick.contentWidth
+        var fy = (flick.contentY + flick.height / 2) / flick.contentHeight
+        root.zoom = next
+        flick.contentX = Scroll.bounded(fx * flick.contentWidth - flick.width / 2, flick.originX, flick.contentWidth, flick.width, flick.leftMargin, flick.rightMargin)
+        flick.contentY = Scroll.bounded(fy * flick.contentHeight - flick.height / 2, flick.originY, flick.contentHeight, flick.height, flick.topMargin, flick.bottomMargin)
+    }
+    function zoomBy(steps) { root.zoomTo(PreviewKeys.zoomStep(root.zoom, steps)) }
+    function zoomFit() { root.zoomTo(PreviewKeys.PDF_ZOOM_MIN) }
+
+    // The row's cache file, held by Quick Look while this decodes: drawn between the
+    // ground and the picture, so it is never hidden by one nor covers the other.
+    property string interimThumb: ""
+    property real interimX: 0
+    property real interimY: 0
+    property real interimWidth: 0
+    property real interimHeight: 0
+    property bool interimVisible: false
+    // Set from open while this row's thumbnail may still be asked for; it only gates failed.
+    property bool thumbPending: false
+    readonly property bool interimReady: interimPicture.status === Image.Ready
+
+    // The same name the media and PDF panes give their unreadable state, so Preview.qml tests one property; failed only with no thumbnail to stand in or coming, and a decoding one keeps loading.
+    readonly property bool failed: root.pictureFailed && !root.thumbPending && interimPicture.status !== Image.Ready && interimPicture.status !== Image.Loading
+    // Every state is terminal once an owed thumbnail has landed or been refused: a failed final waits on it first.
+    readonly property string status: {
+        if (root.failed) return "This image could not be read."
+        return (picture.status === Image.Ready || root.fallbackShown) ? "image" : "loading"
+    }
+    // Frames in a GIF, from the same reply; the picture moves only past one.
+    property int frames: 0
+    // The original's pixels for the thumbnail fit, from Preview.qml's meta reply; 0 while unknown.
+    property real origW: 0
+    property real origH: 0
+    // The turn of those pixels, so the caption names the picture as drawn.
+    property int origOrient: 1
+    // A 3D model is refused with no decode attempt: Qt has no plugin for it, and each attempt logs a warning.
+    readonly property bool decodable: !Kinds.isModel(root.path)
+    // The final refused, by a decode Error, at once for a file Qt cannot decode, or once a RAW answered with no copy; the thumbnail below stands in when it decoded.
+    readonly property bool pictureFailed: picture.status === Image.Error || (root.interimSettled && !root.decodable) || (root.raw && root.embeddedAnswered && root.embedded.length === 0)
+    readonly property bool fallbackShown: root.pictureFailed && root.interimReady
+    readonly property string name: root.path.substring(root.path.lastIndexOf("/") + 1)
+
+    // The pixmap reader decodes only the final, one request at a time; it waits a turn after the build because Preview.qml binds the path before the thumbnail.
+    property bool armed: false
+    readonly property bool interimSettled: root.armed && interimPicture.status !== Image.Loading
+    Timer {
+        running: true
+        interval: 0
+        onTriggered: root.armed = true
+    }
+
+    // The letterbox ground the video pane uses: a photo almost never matches the surface's proportions.
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.color.background
+    }
+
+    // The cached thumbnail at once, sized to the final's rect by the caller; it stays as the picture at the column fit when the final cannot decode.
+    Image {
+        id: interimPicture
+        readonly property real ownFit: Thumbs.fitScale(root.width, root.areaHeight, implicitWidth, implicitHeight,
+            Thumbs.posterLimit(false, implicitWidth, implicitHeight, root.origW, root.origH))
+        x: root.fallbackShown ? Math.round((root.width - width) / 2) : root.interimX
+        y: root.fallbackShown ? Math.round((root.areaHeight - height) / 2) : root.interimY
+        width: root.fallbackShown ? implicitWidth * ownFit : root.interimWidth
+        height: root.fallbackShown ? implicitHeight * ownFit : root.interimHeight
+        // Only while the decode runs: a final with transparent pixels would show it through.
+        visible: root.interimVisible && root.status === "loading" || root.fallbackShown
+        source: root.interimThumb.length > 0 ? Format.fileUri(root.interimThumb) : ""
+        fillMode: Image.Stretch
+        // A cache thumbnail decodes on the GUI thread in about a millisecond: the reader cannot drop a running decode.
+        asynchronous: false
+        cache: false
+    }
+
+    // Stretch, in an item sized to the fit of what was decoded: Qt then decodes the exact fit and never enlarges
+    // in the decode, where Fit decoded a covering size (2099x3149 for a portrait photo, 34680x1156 for a 3000x100
+    // banner, measured). A small picture draws at its own size, centred; only an SVG keeps Fit, which Stretch would distort.
+    readonly property bool vector: /\.svgz?$/i.test(root.path)
+    // The drawn picture itself, for ui/Ipc.qml's previewPictureRect: the item is sized to the
+    // fit of what was decoded, so its rect is the picture and not the surface it is centred on.
+    readonly property Item pictureItem: root.fallbackShown ? interimPicture : picture
+
+    Image {
+        id: picture
+        readonly property real fit: Thumbs.fitScale(root.width, root.areaHeight, implicitWidth, implicitHeight, 1)
+        x: Math.round((flick.contentWidth - width) / 2 - flick.contentX)
+        y: Math.round((flick.contentHeight - height) / 2 - flick.contentY)
+        width: root.vector ? root.width * root.zoom : implicitWidth * fit * root.zoom
+        height: root.vector ? root.height * root.zoom : implicitHeight * fit * root.zoom
+        // The sharper layer takes over once it has a frame, so a transparent picture never shows two.
+        visible: picture.status === Image.Ready && !sharp.drawn && !(gif.item && gif.item.ready)
+        // Format.fileUri, not a concatenation: a # or a ? in the name would truncate a hand-built URI.
+        source: root.drawPath.length > 0 && root.decodable && root.interimSettled ? Format.fileUri(root.drawPath) : ""
+        fillMode: root.vector ? Image.PreserveAspectFit : Image.Stretch
+        // A phone keeps a portrait photo's turn in EXIF, and Qt leaves it unapplied unless asked.
+        autoTransform: true
+        asynchronous: true
+        cache: false
+        // Decoded no larger than the surface: the same 6016x3900 PNG is 94 MB of texture at full size
+        // and 8 MB bound to this box's 2099x1156 surface, measured, for 17 ms more decode.
+        // corner: a zero here means unbounded to Qt, so the floor is 1 and never 0.
+        sourceSize.width: Math.max(1, Math.round(root.width))
+        sourceSize.height: Math.max(1, Math.round(root.areaHeight))
+    }
+
+    // Past fit the fit picture is drawn scaled until this layer has a frame.
+    Flea.PreviewImageSharp {
+        id: sharp
+        base: picture
+        active: root.zoomed
+        want: root.vector ? Qt.size(Math.max(1, Math.round(root.width * root.zoom)), Math.max(1, Math.round(root.height * root.zoom))) : Qt.size(0, 0)
+    }
+
+    // An animated GIF moves once the still is drawn, in the still's rect at any zoom; it is built for that file alone.
+    Loader {
+        id: gif
+        x: picture.x
+        y: picture.y
+        width: picture.width
+        height: picture.height
+        active: root.frames > 1 && /\.gif$/i.test(root.path) && picture.status === Image.Ready
+        source: "PreviewAnimation.qml"
+        onLoaded: {
+            item.path = Qt.binding(function () { return root.path })
+            item.shown = Qt.binding(function () { return root.visible })
+        }
+    }
+
+    // The pan: a drag, the wheel and the knobs move contentX and contentY, and the pictures above follow them. At fit it is the whole surface and holds still; zoomed, it is the surface less the band.
+    Flickable {
+        id: flick
+        width: root.width
+        height: root.zoomed ? root.height - band.height : root.areaHeight
+        contentWidth: Math.max(flick.width, picture.width)
+        contentHeight: Math.max(flick.height, picture.height)
+        interactive: root.zoomed
+        boundsBehavior: Flickable.StopAtBounds
+
+        // The wheel and the knobs are built at the first step past fit and go at fit: the first frame at fit holds neither.
+        Loader {
+            parent: flick
+            anchors.fill: parent
+            active: root.zoomed
+            sourceComponent: Flea.PreviewImagePan {}
+        }
+    }
+
+    // The zoom as a number under the picture, a media strip tall with no divider; absent at fit, except that a RAW's fit says what is drawn.
+    readonly property bool captioned: root.raw && !root.zoomed && picture.status === Image.Ready
+    readonly property string caption: "Embedded preview \u00b7 %1 \u00d7 %2".arg(root.origOrient >= 5 ? root.origH : root.origW).arg(root.origOrient >= 5 ? root.origW : root.origH)
+    Rectangle {
+        id: band
+        visible: root.zoomed || root.captioned
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: Theme.chromeHeight
+        color: root.zoomed ? Theme.color.surface : Theme.color.background
+
+        Text {
+            anchors.centerIn: parent
+            text: root.zoomed ? root.zoomLabel : root.caption
+            color: root.zoomed ? Theme.color.foreground : Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.caption
+            font.features: { "tnum": 1 }
+            textFormat: Text.PlainText
+        }
+    }
+
+    // A failed decode is a mark and a sentence, never a bare ground: the blank-frame class again otherwise.
+    Column {
+        anchors.centerIn: parent
+        width: parent.width - 2 * Theme.spacing.rowPaddingX
+        spacing: Theme.spacing.gap
+        visible: false // Failed previews remain blank.
+
+        Flea.Glyph {
+            anchors.horizontalCenter: parent.horizontalCenter
+            // A failure mark stands alone, so it takes the pane-state ceiling States.dc.html draws at 40.
+            maxSize: Theme.stateMarkSize
+            width: Theme.stateMarkSize
+            height: Theme.stateMarkSize
+            name: "alert"
+            color: Theme.color.error
+        }
+
+        Text {
+            width: parent.width
+            horizontalAlignment: Text.AlignHCenter
+            text: root.status
+            color: Theme.color.foreground
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.body
+            textFormat: Text.PlainText
+            wrapMode: Text.Wrap
+        }
+
+        // corner: a filename is arbitrary text, so PlainText, the same rule every name on this surface follows.
+        Text {
+            width: parent.width
+            horizontalAlignment: Text.AlignHCenter
+            text: root.name
+            color: Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.caption
+            textFormat: Text.PlainText
+            elide: Text.ElideMiddle
+        }
+    }
+}

package/ui/PreviewImagePan.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import "." as Flea
+
+// The wheel and the two knobs of a zoomed picture; the Loader that builds this sits on the Flickable they drive.
+Item {
+    id: root
+
+    readonly property Item viewport: root.parent ? root.parent.parent : null
+    anchors.fill: parent
+
+    Flea.FastScrollHandler { flickable: root.viewport }
+    Flea.ViewportScrollBars { flickable: root.viewport }
+}

package/ui/PreviewImageSharp.qml

@@ -0,0 +1,32 @@
+import QtQuick
+
+// The sharper layer of a zoomed Quick Look picture: a raster's whole decode asked once, an SVG drawn again at each zoomed size.
+Image {
+    id: root
+
+    // The fit picture this layer lies over: it takes that picture's file, rect and fill.
+    property Image base: null
+    // False at fit, where the layer holds no file and so no decode.
+    property bool active: false
+    // The decode size; 0x0 is the whole picture to Qt, which is what a raster asks for here.
+    property size want: Qt.size(0, 0)
+    // Set on the first frame and kept while a redraw loads, so the last frame holds; cleared when the layer is let go.
+    property bool drawn: false
+
+    x: root.base ? root.base.x : 0
+    y: root.base ? root.base.y : 0
+    width: root.base ? root.base.width : 0
+    height: root.base ? root.base.height : 0
+    visible: root.drawn
+    source: root.active && root.base ? root.base.source : ""
+    fillMode: root.base ? root.base.fillMode : Image.Stretch
+    autoTransform: true
+    asynchronous: true
+    cache: false
+    retainWhileLoading: true
+    sourceSize: root.want
+    onStatusChanged: {
+        if (root.status === Image.Ready) root.drawn = true
+        else if (root.status !== Image.Loading) root.drawn = false
+    }
+}