flea-qml 0.0.0-stage → 0.2.0

package/ui/FlashStepRow.qml

@@ -0,0 +1,172 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+import "js/Flash.js" as Flash
+import "js/Transfer.js" as Transfer
+
+// The FLASH step: one 37 px row with the alert mark, erase line and action, then the running bar and the ending row.
+Column {
+    id: root
+    property var transfer: null
+    property real rate: 0
+    property var words: ({ erase: "", action: "" })
+    property bool live: false
+    property bool running: false
+    property var ending: null
+    property bool ejected: false
+    property bool cursor: false
+    property bool focused: true
+    signal pressFlash()
+    signal pressCancel()
+    signal pressEnd()
+    readonly property var flashItem: flashButton
+    readonly property var cancelItem: cancelButton
+    readonly property var endItem: endButton
+    width: 0
+    // The running bar takes the transfer card's recipe: half a caption thick, a quarter-ink track.
+    readonly property int barHeight: Math.round(Theme.font.caption / 2)
+    readonly property real trackOpacity: 0.25
+    Text {
+        x: Theme.spacing.rowPaddingX
+        // A later section opens a panel gap under the one above, as the rail's FAVORITES does.
+        topPadding: Math.round(Style.spacing.panelGap * Theme.sizeRatio) + Math.ceil(font.pixelSize * 0.15)
+        bottomPadding: Theme.spacing.gap
+        text: "FLASH"
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.letterSpacing: 1
+        textFormat: Text.PlainText
+    }
+    Rectangle {
+        width: root.width
+        height: Theme.rowHeight
+        // The cursor uses accent ink, as every listing row does; the greyed Flash row only dims.
+        color: root.cursor ? (root.focused ? Style.selectedAccentFill : "transparent") : "transparent"
+        opacity: !root.running && root.ending === null && !root.live ? Theme.disabledOpacity : 1
+        Rectangle {
+            visible: root.cursor
+            width: Theme.spacing.hairline * 2
+            height: parent.height
+            color: root.focused ? Theme.color.accent : Theme.color.mutedFrame
+        }
+        Row {
+            anchors.fill: parent
+            anchors.leftMargin: Theme.spacing.rowPaddingX
+            anchors.rightMargin: Theme.spacing.rowPaddingX
+            spacing: Theme.spacing.gap
+            Flea.Glyph {
+                width: Theme.markSize
+                height: parent.height
+                visible: !root.running && root.ending === null
+                name: "alert"
+                color: Theme.color.error
+            }
+            Flea.Spinner {
+                width: Theme.markSize
+                height: parent.height
+                visible: root.running
+                color: Theme.color.mutedFrame
+            }
+            Flea.Glyph {
+                width: Theme.markSize
+                height: parent.height
+                visible: root.ending !== null
+                name: root.ending ? root.ending.mark : "check"
+                color: root.ending && root.ending.role === "error" ? Theme.color.error
+                    : root.ending && root.ending.role === "foreground" ? Theme.color.foreground : Theme.color.mutedFrame
+            }
+            Text {
+                width: Math.max(0, parent.width - Theme.markSize - flashControl.width - 2 * parent.spacing)
+                anchors.verticalCenter: parent.verticalCenter
+                text: root.running ? Transfer.head(root.transfer)
+                    : root.ending ? root.ending.headline : root.words.erase
+                textFormat: Text.PlainText
+                elide: Text.ElideRight
+                color: Flash.stepRole(root.running, root.ending) === "error" ? Theme.color.error : Theme.color.foreground
+                font { family: Theme.font.family; pixelSize: Theme.font.body }
+            }
+            Item {
+                id: flashControl
+                width: Math.max(flashButton.implicitWidth, cancelButton.implicitWidth, endButton.implicitWidth)
+                height: parent.height
+                Flea.DialogButton {
+                    id: flashButton
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !root.running && root.ending === null
+                    label: root.words.action
+                    primary: true
+                    available: root.live
+                    onActivated: root.pressFlash()
+                }
+                Flea.DialogButton {
+                    id: cancelButton
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: root.running
+                    label: "Cancel"
+                    available: Transfer.cancelEnabled(root.transfer)
+                    onActivated: root.pressCancel()
+                }
+                Flea.DialogButton {
+                    id: endButton
+                    anchors.verticalCenter: parent.verticalCenter
+                    visible: !root.running && root.ending !== null && (root.ending.eject || root.ending.flashBack) && !root.ejected
+                    label: root.ending && root.ending.flashBack ? root.words.action : "Eject"
+                    primary: root.ending ? root.ending.flashBack : false
+                    available: root.ending && root.ending.flashBack ? root.live : true
+                    onActivated: root.pressEnd()
+                }
+            }
+        }
+    }
+    // The running step's own lines under the label column, the bar and then the byte line.
+    Column {
+        visible: root.running
+        x: Theme.spacing.rowPaddingX + Theme.markSize + Theme.spacing.gap
+        width: root.width - x - Theme.spacing.rowPaddingX - Theme.column.size
+        topPadding: Theme.spacing.rowPaddingY
+        spacing: root.barHeight
+        // The fill is a sibling of the track and not its child, because opacity multiplies down into children.
+        Item {
+            width: parent.width
+            height: root.barHeight
+            Rectangle {
+                anchors.fill: parent
+                color: Theme.color.mutedFrame
+                opacity: root.trackOpacity
+            }
+            Rectangle {
+                width: parent.width * Transfer.fraction(root.transfer)
+                height: parent.height
+                color: Theme.color.accentFrame
+            }
+        }
+        Row {
+            id: byteLine
+            readonly property var parts: Transfer.byteParts(root.transfer, root.rate)
+            Repeater {
+                model: byteLine.parts
+                delegate: Text {
+                    required property var modelData
+                    text: modelData.text
+                    color: modelData.figure ? Theme.color.foreground : Theme.color.muted
+                    font.family: Theme.font.family
+                    font.pixelSize: Theme.font.caption
+                    textFormat: Text.PlainText
+                }
+            }
+        }
+    }
+    Text {
+        visible: root.ending !== null && root.ending.hint.length > 0
+        x: Theme.spacing.rowPaddingX + Theme.markSize + Theme.spacing.gap
+        topPadding: Theme.spacing.rowPaddingY
+        bottomPadding: Theme.spacing.rowPaddingY
+        width: root.width - x - Theme.spacing.rowPaddingX
+        wrapMode: Text.Wrap
+        text: root.ending ? root.ending.hint : ""
+        color: Theme.color.muted
+        font { family: Theme.font.family; pixelSize: Theme.font.caption }
+        textFormat: Text.PlainText
+    }
+}

package/ui/FlashStrip.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import "." as Flea
+
+// The flasher's strip: Back, an unavailable Up and the title; every exit leaves through the view's close.
+Rectangle {
+    id: root
+    signal back()
+    width: 0
+    height: Theme.chromeHeight
+    color: Theme.color.surface
+    Row {
+        anchors.fill: parent
+        anchors.leftMargin: Theme.spacing.rowPaddingX
+        anchors.rightMargin: Theme.spacing.rowPaddingX
+        spacing: Theme.spacing.gap
+        Flea.ChromeButton {
+            ruleRows: Theme.spacing.hairline
+            glyph: "arrow-left"
+            onActivated: root.back()
+        }
+        Flea.ChromeButton {
+            ruleRows: Theme.spacing.hairline
+            glyph: "arrow-up"
+            accessName: "Up unavailable in Flash"
+            enabled: false
+            Accessible.ignored: false
+        }
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Flash image"
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+            color: Theme.color.foreground
+            font { family: Theme.font.family; pixelSize: Theme.font.caption }
+        }
+    }
+    Rectangle { anchors.bottom: parent.bottom; width: parent.width; height: Theme.spacing.hairline; color: Theme.color.foreground; opacity: 0.12 }
+}

package/ui/FlashView.qml

@@ -0,0 +1,397 @@
+import QtQuick
+import Quickshell
+import Quickshell.Io
+import "." as Flea
+import "js/Flash.js" as Flash
+import "js/FlashPane.js" as FlashPane
+import "js/Keymap.js" as Keymap
+import "js/Ops.js" as Ops
+
+// Flash image swaps the listing like Trash does; Esc, Back and Backspace leave the pane and never cancel a flash.
+FocusScope {
+    id: root
+    required property var pane
+    property var statusBar: null
+    property bool opened: false
+    // The image under test, or null before the picker names one.
+    property var image: null
+    // A rail volume's device path waiting for the drive list to name its disk.
+    property string pendingDrive: ""
+    property var drives: []
+    property bool drivesReady: false
+    // The chosen drive's row, held by identity so a poll that reorders the list never retargets Flash or Eject.
+    property var chosen: null
+    // Set once this opening holds a drive, so a choice that left stays empty instead of falling to the one fitting drive left.
+    property bool held: false
+    readonly property int selected: FlashPane.indexOf(root.drives, root.chosen)
+    property int cursor: 0
+    property int requestId: 0
+    property bool ejected: false
+    // The flash's own run, answered by the backend; the view owns the cursor and the rows.
+    readonly property var transfer: runner.transfer
+    readonly property bool running: runner.running
+    readonly property var ending: runner.ending
+    readonly property real rate: runner.rate
+    readonly property int driveCount: root.drives.length
+    readonly property var chosenDrive: root.selected >= 0 && root.selected < root.drives.length ? root.drives[root.selected] : null
+    readonly property int flashRow: Flash.flashPos(root.drives.length)
+    readonly property bool imageOk: root.image !== null && root.image.refused !== true
+    readonly property bool live: Flash.flashLive(root.imageOk, root.chosenDrive)
+    readonly property var words: Flash.flashWords(root.imageOk, root.chosenDrive, root.drives)
+    signal backRequested()
+    signal focusRailRequested()
+    anchors.fill: parent
+    visible: opened
+    // The seam's own handles onto the step's controls, so a driven case clicks what it named.
+    readonly property var flashItem: stepRow.flashItem
+    readonly property var cancelItem: stepRow.cancelItem
+    readonly property var endItem: stepRow.endItem
+
+    function open() {
+        // Reopening onto a running flash shows it, never restarts it, and takes its card back from the pane.
+        if (runner.running) {
+            FlashPane.reclaim(root.pane)
+            root.opened = true
+            root.forceActiveFocus()
+            return
+        }
+        runner.reset()
+        root.ejected = false
+        root.opened = true
+        root.drives = []
+        root.drivesReady = false
+        root.forceActiveFocus()
+    }
+
+    function openWithImage(path) {
+        if (runner.running)
+            return root.open()
+        root.image = { path: path, kind: "", bytes: 0, unpacked: 0, known: false, member: "", refused: false }
+        root.pendingDrive = ""
+        root.chosen = null
+        root.cursor = 0
+        root.open()
+        root.pane.backend.flashImage(path)
+        root.pane.backend.flashTargets(path)
+    }
+
+    function openWithDrive(device) {
+        if (runner.running)
+            return root.open()
+        root.pendingDrive = device
+        root.chosen = null
+        root.cursor = 0
+        root.open()
+        if (root.image)
+            root.pane.backend.flashImage(root.image.path)
+        root.pane.backend.flashTargets(root.image ? root.image.path : "")
+    }
+
+    function close() {
+        if (!root.opened)
+            return
+        root.opened = false
+        // After Back the running flash joins the pane's transfer the way a copy's does.
+        if (root.running) {
+            root.pane.transfer = root.transfer
+            root.pane.sticky(Ops.progressLine(root.transfer))
+        }
+        root.backRequested()
+    }
+
+    function chooseImage() {
+        if (chooser.running || root.running)
+            return
+        var home = Quickshell.env("HOME") || ""
+        chooser.command = [Quickshell.env("FLEA_BIN") || "flea", "flash", "choose", home + "/Downloads"]
+        chooser.running = true
+    }
+
+    function pressFlash() {
+        if (runner.pressSent || !root.live || root.running)
+            return
+        var drive = root.chosenDrive
+        root.requestId += 1
+        runner.pressSent = true
+        runner.pendingId = root.requestId
+        root.pane.backend.flash(root.requestId, root.image.path, drive.dev, drive.seq, drive.serial, drive.bytes)
+    }
+
+    function pressCancel() {
+        if (!root.running)
+            return
+        root.pane.backend.flashCancel(root.transfer.id)
+    }
+
+    function ejectChosen() {
+        var drive = root.chosenDrive
+        if (!drive || root.running || root.ejected)
+            return
+        root.pane.backend.flashEject(drive.dev, drive.seq)
+    }
+
+    function cursorDrive() {
+        return root.cursor > 0 && root.cursor <= root.drives.length ? root.cursor - 1 : -1
+    }
+
+    function moveCursor(delta) {
+        // While a flash runs the cursor stays between the drive being flashed and Cancel.
+        if (root.running) {
+            root.cursor = root.cursor === root.flashRow ? root.selected + 1 : root.flashRow
+            root.parkFocus()
+            return
+        }
+        root.cursor = Flash.step(root.cursor, delta, root.drives, root.image !== null, true)
+        root.chosen = FlashPane.chooseKept(root.cursor, root.drives, root.chosen)
+        root.parkFocus()
+    }
+
+    function parkFocus() {
+        if (!root.opened)
+            return
+        // After Eject no button is drawn, so the keyboard rests on the pane itself.
+        if (root.ejected) {
+            root.forceActiveFocus()
+            return
+        }
+        if (root.cursor === root.flashRow && !root.running) {
+            if (root.ending && (root.ending.flashBack || root.ending.eject) && stepRow.endItem)
+                stepRow.endItem.forceActiveFocus()
+            else if (!root.ending && stepRow.flashItem)
+                stepRow.flashItem.forceActiveFocus()
+            else
+                root.forceActiveFocus()
+        } else if (root.cursor === root.flashRow && stepRow.cancelItem) {
+            stepRow.cancelItem.forceActiveFocus()
+        } else {
+            root.forceActiveFocus()
+        }
+    }
+
+    // A focused button owns Enter and Space itself, so the scope stands aside for those keys.
+    function buttonFocused() {
+        return (stepRow.flashItem && stepRow.flashItem.activeFocus)
+            || (stepRow.cancelItem && stepRow.cancelItem.activeFocus)
+            || (stepRow.endItem && stepRow.endItem.activeFocus)
+    }
+
+    // The ending row's own action: Eject where one is offered, Flash again under a failure.
+    function pressEnd() {
+        if (root.ending && root.ending.flashBack)
+            root.pressFlash()
+        else
+            root.ejectChosen()
+    }
+
+    function contextPress() {
+        var atDrive = root.cursorDrive()
+        if (root.running) {
+            if (root.cursor === root.flashRow)
+                root.pressCancel()
+            return
+        }
+        if (root.ending !== null) {
+            if (root.cursor === root.flashRow) {
+                if (root.ending.eject)
+                    root.ejectChosen()
+                else if (root.ending.flashBack)
+                    root.pressFlash()
+            } else if (root.cursor === 0) {
+                root.chooseImage()
+            } else if (atDrive >= 0) {
+                root.chosen = root.drives[atDrive]
+                root.cursor = root.flashRow
+                root.parkFocus()
+            }
+            return
+        }
+        if (root.cursor === 0) {
+            root.chooseImage()
+            return
+        }
+        if (atDrive >= 0) {
+            root.chosen = root.drives[atDrive]
+            root.cursor = root.flashRow
+            root.parkFocus()
+            return
+        }
+        if (root.cursor === root.flashRow)
+            root.pressFlash()
+    }
+
+    function receiveImage(message) {
+        if (!root.opened && !root.running)
+            return
+        var image = Flash.imageFrom(root.image, message)
+        if (image)
+            root.image = image
+    }
+
+    function receiveTargets(message) {
+        if (!root.opened && !root.running)
+            return
+        var rows = message.drives || []
+        var was = root.drives
+        var first = !root.drivesReady
+        root.drives = rows
+        root.drivesReady = true
+        if (root.running)
+            return
+        // A fitting drive plugged in after Eject brings the Flash row back.
+        if (root.ejected) {
+            if (rows.filter(function (drive) { return Flash.fits(drive) }).length === 0)
+                return
+            root.ejected = false
+            runner.ending = null
+        }
+        var next = FlashPane.reconcile({ chosen: root.chosen, cursor: root.cursor, drives: was, first: first,
+            held: root.held, pendingDisk: root.pendingDrive }, rows)
+        FlashPane.land(root, next)
+        if (next.moved)
+            root.parkFocus()
+    }
+
+    function startTransfer(id, total, known) {
+        var drive = root.chosenDrive
+        var label = drive ? Flash.driveName(drive, root.drives) : ""
+        runner.startTransfer(id, total, known, root.image ? Flash.leaf(root.image.path) : "", label, root.opened)
+        root.cursor = root.flashRow
+        root.parkFocus()
+    }
+
+    function progressTransfer(id, phase, bytes, total, permille) {
+        runner.progressTransfer(id, phase, bytes, total, permille, root.opened)
+    }
+
+    function finishTransfer(message) {
+        var imageName = root.image ? Flash.leaf(root.image.path) : ""
+        var landed = runner.finishTransfer(message, imageName, root.transfer.drive,
+            root.chosen ? root.chosen.bytes : 0, root.opened)
+        if (landed === "refused")
+            root.pane.backend.flashImage(root.image ? root.image.path : "")
+        else if (landed) {
+            root.cursor = root.flashRow
+            root.parkFocus()
+        }
+    }
+
+    function finishEject(message) {
+        var drive = root.chosenDrive
+        runner.finishEject(message, drive ? Flash.driveName(drive, root.drives) : "")
+        if (message.ok === true) {
+            root.ejected = true
+            root.parkFocus()
+        }
+    }
+
+    Keys.onPressed: function (event) {
+        var action = Keymap.lookup(event.key, event.text, event.modifiers, "listing", "gui")
+        var unmodified = (event.modifiers & (Qt.ControlModifier | Qt.ShiftModifier | Qt.AltModifier | Qt.MetaModifier)) === 0
+        if (action === "escape" && root.statusBar && root.statusBar.escapePressed()) { event.accepted = true; return }
+        if (action === "escape" || (event.key === Qt.Key_Backspace && unmodified)) root.close()
+        else if (action === "cursorDown") root.moveCursor(1)
+        else if (action === "cursorUp") root.moveCursor(-1)
+        else if (action === "eject") root.ejectChosen()
+        else if (action === "focusNext") root.focusRailRequested()
+        else if (action === "open" || (event.key === Qt.Key_Space && unmodified)) {
+            if (root.buttonFocused()) { event.accepted = true; return }
+            // A held Enter stops on Flash instead of pressing it: only a fresh press confirms.
+            if (event.isAutoRepeat && root.cursor === root.flashRow && root.ending === null) { event.accepted = true; return }
+            root.contextPress()
+        }
+        event.accepted = true
+    }
+
+    Process {
+        id: chooser
+        stdout: StdioCollector { id: chosenText }
+        // A chooser that never answers is the backend's refusal, so the pane keeps its drives.
+        onExited: function (exitCode, exitStatus) {
+            if (exitCode !== 0)
+                return
+            var path = chosenText.text.trim()
+            if (path.length > 0)
+                root.openWithImage(path)
+        }
+    }
+
+    Connections {
+        target: root.pane.backend
+        function onFlashImageResult(message) { root.receiveImage(message) }
+        function onFlashTargetsResult(message) { root.receiveTargets(message) }
+        function onFlashStartedLine(id, total, known) { root.startTransfer(id, total, known) }
+        function onFlashProgressLine(id, phase, bytes, total, permille) { root.progressTransfer(id, phase, bytes, total, permille) }
+        function onFlashDoneLine(message) { root.finishTransfer(message) }
+        function onFlashEjectLine(message) { root.finishEject(message) }
+    }
+
+    // A fitting drive plugged in after Eject brings the Flash row back; the rail's own poll period is the tick.
+    readonly property int pollMs: 5000
+    Timer {
+        interval: root.pollMs
+        repeat: true
+        running: root.opened && !root.running
+        onTriggered: root.pane.backend.flashTargets(root.image ? root.image.path : "")
+    }
+
+    // The flash's own run, answered by the backend; the view owns the cursor and the rows.
+    Flea.FlashRunner {
+        id: runner
+        pane: root.pane
+    }
+
+    Rectangle { anchors.fill: parent; color: Theme.color.background }
+
+    Column {
+        anchors.fill: parent
+        spacing: 0
+        // The strip without an action: Back, an unavailable Up, the title, nothing else.
+        Flea.FlashStrip {
+            width: parent.width
+            onBack: root.close()
+        }
+        Flea.FlashImageRow {
+            width: parent.width
+            image: root.image
+            cursor: root.cursor === 0
+            focused: root.activeFocus
+            running: root.running
+            onChoose: {
+                root.cursor = 0
+                root.parkFocus()
+                root.contextPress()
+            }
+        }
+        Flea.FlashDriveRows {
+            width: parent.width
+            drives: root.drives
+            drivesReady: root.drivesReady
+            selected: root.selected
+            cursor: root.cursor
+            focused: root.activeFocus
+            running: root.running
+            onChooseDrive: function (index) {
+                root.chosen = root.drives[index]
+                root.cursor = root.flashRow
+                root.parkFocus()
+            }
+        }
+        // The Flash step: one 37 px row carrying the alert mark, the erase line and the action.
+        Flea.FlashStepRow {
+            id: stepRow
+            width: parent.width
+            transfer: root.transfer
+            rate: root.rate
+            words: root.words
+            live: root.live
+            running: root.running
+            ending: root.ending
+            ejected: root.ejected
+            cursor: root.cursor === root.flashRow
+            focused: root.activeFocus
+            onPressFlash: root.pressFlash()
+            onPressCancel: root.pressCancel()
+            onPressEnd: root.pressEnd()
+        }
+    }
+}

package/ui/FleaMark.qml

@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Shapes
+import "js/Motion.js" as Motion
+
+// Flea's own mark: the Omarchy spiral redrawn as a 24-grid stroke glyph, per BrandMoments.dc.html's
+// "The mark" cell. It paints itself in from blank and then holds. The caller drives the repeat, so
+// the empty state's mark and its caption share one beat; the loading crawl (ui/Spinner.qml) stays a
+// separate gesture on purpose, continuous where this one arrives and rests.
+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
+    // The path below sums to this along its centreline: 18+18+18+14+14+10+10+6+6.
+    readonly property real markUnits: 114
+    // A brand mark, not a cut glyph: the spiral keeps the brand's 2 and is exempt from Theme.strokeWidth on purpose.
+    readonly property real brandStroke: 2
+    // QML dash units are strokeWidth multiples, so the whole mark is this many dashes long.
+    readonly property real markDashes: root.markUnits / root.brandStroke
+    readonly property bool settled: !draw.running && stroke.dashOffset === 0 && root.opacity === 1
+
+    // Repaints the mark from blank. EmptyState calls this off the caption's own timer so the two run
+    // on one beat; a second timer in here would drift against that one and read as sloppy.
+    function replay() {
+        if (Theme.reducedMotion) {
+            draw.stop()
+            stroke.dashOffset = 0
+            root.opacity = 1
+        } else draw.restart()
+    }
+
+    // A data-held folder lands whole, the settled frame the picture hold revealed.
+    function settle() { draw.stop(); stroke.dashOffset = 0; root.opacity = 1 }
+
+    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: stroke
+            strokeColor: root.color
+            fillColor: "transparent"
+            strokeWidth: root.brandStroke
+            capStyle: ShapePath.SquareCap
+            joinStyle: ShapePath.MiterJoin
+            strokeStyle: ShapePath.DashLine
+            // One dash and one gap, each the whole mark, so only ever one dash can sit on the path.
+            dashPattern: [root.markDashes, root.markDashes]
+            // A whole mark of offset draws nothing; the animation walks that back to zero.
+            dashOffset: root.markDashes
+            PathSvg { path: "M21 21H3V3h18v14H7V7h10v6h-6" }
+        }
+    }
+
+    // BrandMoments.dc.html's draw timing, 0.2s delay then 1.8s; OutCubic replaces its cubic-bezier(0.4, 0, 0.2, 1), the motion choice of 2026-09-25.
+    SequentialAnimation {
+        id: draw
+        // The caption's own fade-out, so a repeat dissolves the finished mark rather than cutting it.
+        NumberAnimation { target: root; property: "opacity"; to: 0.0; duration: Motion.durMs.close; easing.type: Easing.OutCubic }
+        // Blank before opacity comes back, never after: an offset of a whole mark is what hides the seam.
+        PropertyAction { target: stroke; property: "dashOffset"; value: root.markDashes }
+        PropertyAction { target: root; property: "opacity"; value: 1.0 }
+        PauseAnimation { duration: 200 }
+        NumberAnimation {
+            target: stroke
+            property: "dashOffset"
+            from: root.markDashes
+            to: 0
+            duration: 1800
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    // The draw is the entrance as well as the loop, so it runs on every appearance; Item.visible reads effective visibility, so a hidden ancestor holds it back too.
+    onVisibleChanged: if (root.visible) root.replay(); else draw.stop()
+    // visible can already be true at creation, and onVisibleChanged never fires for that.
+    Component.onCompleted: if (root.visible) root.replay()
+    Connections {
+        target: Theme
+        function onReducedMotionChanged() { if (Theme.reducedMotion) root.replay() }
+    }
+}