buninu-browser 0.3.0 → 0.5.0

package/test/fixtures/qml/flea-theme/imports/qs/Commons/Util.qml

@@ -0,0 +1,188 @@
+pragma Singleton
+import Quickshell
+import QtQuick
+
+// Shared utility helpers used across plugins. Pure functions only — no
+// state. Anything stateful belongs on Color, Style, or a service.
+QtObject {
+  id: root
+
+  // Manual click forwarding must honor the same clipping as Qt's hit test.
+  // Collapsed drawers keep their children laid out beyond the visible edge.
+  function itemContainsPoint(target, source, x, y) {
+    if (!target || !target.contains(target.mapFromItem(source, x, y))) return false
+    for (var item = target; item; item = item.parent) {
+      if (!item.visible || item.opacity === 0 || !item.enabled) return false
+      if (item.clip && !item.contains(item.mapFromItem(source, x, y))) return false
+    }
+    return true
+  }
+
+  function clamp(value, min, max) {
+    var n = Number(value)
+    if (!isFinite(n)) return min
+    return Math.max(min, Math.min(max, n))
+  }
+
+  function clampAlpha(value) {
+    return clamp(value, 0, 1)
+  }
+
+  function wheelSteps(accumulator, delta) {
+    // Some mouse/compositor combinations scale a single notch well beyond
+    // Qt's conventional 120 units. Keep one event to one step while still
+    // accumulating the smaller deltas emitted by touchpads.
+    delta = Math.max(-120, Math.min(120, delta))
+    if (accumulator * delta < 0) accumulator = 0
+    var total = accumulator + delta
+    var steps = total < 0 ? Math.ceil(total / 120) : Math.floor(total / 120)
+    return { steps: steps, remainder: total - steps * 120 }
+  }
+
+  // Compose a base color with an opacity. Accepts a color object or a hex
+  // string; null/undefined yields transparent black at the requested alpha.
+  function alpha(c, opacity) {
+    var a = clampAlpha(opacity)
+    if (!c) return Qt.rgba(0, 0, 0, a)
+    if (typeof c === "string") c = Qt.color(c)
+    return Qt.rgba(c.r, c.g, c.b, a)
+  }
+
+  // file:// URL with each path segment percent-encoded so spaces and
+  // special chars in user paths don't break Image.source.
+  function fileUrl(path) {
+    if (!path) return ""
+    return "file://" + String(path).split("/").map(encodeURIComponent).join("/")
+  }
+
+  function isVideoPath(path) {
+    return /\.(mp4|m4v|mov|webm|mkv|avi)$/i.test(String(path || ""))
+  }
+
+  // Single-quote a string for bash. The replace handles embedded single
+  // quotes by closing, escaping, and re-opening the literal.
+  function shellQuote(value) {
+    return "'" + String(value || "").replace(/'/g, "'\\''") + "'"
+  }
+
+  function execDetached(command) {
+    Quickshell.execDetached(["bash", "-lc", command])
+  }
+
+  // Run an argv vector without a shell interpreting it: the constant `exec "$@"`
+  // means the args only ever land in positional parameters, which bash expands
+  // without re-tokenizing — so untrusted data ($(id), a filename) stays literal.
+  // The login shell (-l) keeps the PATH/session env GUI targets (omasnap, mpv,
+  // xdg-open) need. Prefer this over execDetached for anything built from input.
+  function execArgv(argv) {
+    Quickshell.execDetached(["bash", "-lc", 'exec "$@"', "bash"].concat(argv))
+  }
+
+  function isPlainObject(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value)
+  }
+
+  function canonicalWidgetId(id) {
+    return String(id || "")
+  }
+
+  // Best-effort base64 decode. Returns "" on parse failure rather than
+  // surfacing garbage downstream.
+  function decodeBase64(value) {
+    var s = String(value || "")
+    if (!s) return ""
+    try { return Qt.atob(s) } catch (e) { return "" }
+  }
+
+  function cloneJson(value) {
+    return JSON.parse(JSON.stringify(value === undefined ? null : value))
+  }
+
+  // Parse the last line of a custom-module / indicator process output as
+  // waybar-style JSON ({text, class, tooltip, ...}). Falls back to {text: raw}
+  // when the output isn't JSON, and {} for empty output.
+  function parseModuleJson(raw) {
+    var text = String(raw || "").trim()
+    if (!text) return {}
+    var lines = text.split("\n")
+    try {
+      return JSON.parse(lines[lines.length - 1])
+    } catch (e) {
+      return { text: text }
+    }
+  }
+
+  // Standard Qt text-editing keys shared by every searchable panel's filter:
+  //   Backspace       delete previous character
+  //   Ctrl+Backspace  delete previous word (Qt DeleteStartOfWord)
+  //   Ctrl+U          clear the whole field
+  // True only when the event would actually change the text, so an empty
+  // filter never swallows the key — panels keep their own empty-filter
+  // fallbacks (e.g. menu back-navigation) in later branches.
+  // The arrow a horizontal key press means along the reading direction: in a
+  // right-to-left layout, mirrored, Left moves forward and Right back. With
+  // vim set, h and l count as Left and Right too.
+  function readingKey(event, vim) {
+    var key = event.key
+    if (vim && (key === Qt.Key_H || event.text === "h")) key = Qt.Key_Left
+    else if (vim && (key === Qt.Key_L || event.text === "l")) key = Qt.Key_Right
+    if (I18n.rightToLeft) {
+      if (key === Qt.Key_Left) return Qt.Key_Right
+      if (key === Qt.Key_Right) return Qt.Key_Left
+    }
+    return key
+  }
+
+  function editsFilter(event, text) {
+    if (!text) return false
+    // Alt/Meta-modified sequences belong to other shortcuts — never edit here.
+    if (event.modifiers & (Qt.AltModifier | Qt.MetaModifier)) return false
+    if (event.key === Qt.Key_U)                     // Ctrl+U only (not Ctrl+Shift+U → Unicode input)
+      return event.modifiers === Qt.ControlModifier
+    return event.key === Qt.Key_Backspace           // plain, Shift, or Ctrl Backspace
+  }
+
+  // New filter text after applying an edit key. Assumes editsFilter(event, text).
+  function editedFilter(event, text) {
+    if (event.key === Qt.Key_U) return ""                        // Ctrl+U: clear
+    if (event.modifiers & Qt.ControlModifier)                    // Ctrl+Backspace: word
+      return text.replace(/\s+$/, "").replace(/\S+$/, "")
+    return text.slice(0, -1)                                     // Backspace: char
+  }
+
+  // Layout normalization shared by bar config consumers
+  // so the two never drift. Entries are deep-cloned to decouple from the
+  // input config; consumers can mutate without leaking back to shell.json.
+  function normalizeLayoutEntry(entry) {
+    if (typeof entry === "string") return { id: canonicalWidgetId(entry) }
+    if (isPlainObject(entry) && entry.id) {
+      var copy = cloneJson(entry)
+      copy.id = canonicalWidgetId(copy.id)
+      return copy
+    }
+    return null
+  }
+
+  function normalizeLayoutSection(list) {
+    if (!Array.isArray(list)) return []
+    var out = []
+    for (var i = 0; i < list.length; i++) {
+      var e = normalizeLayoutEntry(list[i])
+      if (e) out.push(e)
+    }
+    return out
+  }
+
+  // The bar's sections in the order they run along it, and tray, drawn
+  // inside the tray's drawer. The center box sits in the middle of the bar;
+  // centerBegin and centerEnd hang off its two edges.
+  readonly property var barSections: ["left", "centerBegin", "center", "centerEnd", "right", "tray"]
+
+  function normalizeLayout(layout) {
+    var src = isPlainObject(layout) ? layout : {}
+    var out = {}
+    for (var i = 0; i < barSections.length; i++)
+      out[barSections[i]] = normalizeLayoutSection(src[barSections[i]])
+    return out
+  }
+}

package/test/fixtures/qml/flea-theme/imports/qs/Commons/qmldir

@@ -0,0 +1,13 @@
+module qs.Commons
+singleton AudioNodes 1.0 AudioNodes.qml
+singleton Border 1.0 Border.qml
+singleton Color 1.0 Color.qml
+singleton I18n 1.0 I18n.qml
+singleton InputDevices 1.0 InputDevices.qml
+singleton IpcRegistry 1.0 IpcRegistry.qml
+singleton InputMethodState 1.0 InputMethodState.qml
+singleton Style 1.0 Style.qml
+singleton UntypedInput 1.0 UntypedInput.qml
+singleton Util 1.0 Util.qml
+ShellIpc 1.0 ShellIpc.qml
+Translations 1.0 Translations.qml

package/test/fixtures/qml/flea-theme/segment.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import Quickshell
+import "./ui" as Flea
+FloatingWindow {
+ id: demo
+ width: 800; height: 420
+ title: "Flea — settings segments"
+ color: Flea.Theme.color.background
+ property string choice: "List"
+ Column {
+  x: 24; y: 24; spacing: 24
+  Text {text:"Real Flea segmented choices";font.pixelSize:24;color:Flea.Theme.color.foreground}
+  Flea.SettingsSegment {options:["List","Grid","Columns"];value:demo.choice;onPicked:function(i){demo.choice=options[i]}}
+  Flea.SettingsSegment {options:["List","Grid","Columns"];glyphs:["list","grid","columns"];value:demo.choice;onPicked:function(i){demo.choice=options[i]}}
+  Text {id: status;text:"Selected: "+demo.choice;font.pixelSize:18;color:Flea.Theme.color.foreground}
+ }
+}

package/test/fixtures/qml/flea-theme/settings.qml

@@ -0,0 +1,58 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import "./ui" as Flea
+import "./ui/js/TextSize.js" as TextSize
+FloatingWindow {
+  id: demo
+  width: 800; height: 420
+  title: "Flea — text size settings | " + Flea.Theme.baseSize + " | " + demo.clicks
+  color: Flea.Theme.color.background
+  property bool editing: true
+  property int clicks: 0
+  Text {
+    x: 24; y: 24
+    text: "Flea text size"
+    font.pixelSize: 24
+    color: Flea.Theme.color.foreground
+  }
+  Flea.SettingsRuler {
+    id: ruler
+    x: 24; y: 85; width: 740
+    stops: TextSize.STOPS
+    index: TextSize.STOPS.indexOf(Flea.Theme.baseSize)
+    active: demo.editing
+    onPicked: function (size) {
+      demo.clicks++
+      // Change the real shared ViewState in memory; this demo never writes settings.
+      Flea.ViewState.state = {display: {textSize: {mode: size}}}
+    }
+  }
+  Text {
+    id: sample
+    x: 24; y: 165
+    text: "The quick brown fox — shared Theme"
+    color: Flea.Theme.color.foreground
+    font.family: Flea.Theme.font.family
+    font.pixelSize: Flea.Theme.font.body
+  }
+  Text {
+    id: status
+    x: 24; y: 220
+    text: "Size: " + Flea.Theme.baseSize + " / clicks: " + demo.clicks
+    color: Flea.Theme.color.muted
+    font.pixelSize: 16
+  }
+  Button {
+    id: toggle
+    x: 24; y: 280; width: 220; height: 44
+    text: demo.editing ? "Disable ruler" : "Enable ruler"
+    onClicked: demo.editing = !demo.editing
+  }
+  Button {
+    id: reset
+    x: 270; y: 280; width: 230; height: 44
+    text: "Follow Omarchy"
+    onClicked: Flea.ViewState.state = {display: {textSize: {mode: "system"}}}
+  }
+}

package/test/fixtures/qml/flea-theme/text-metrics.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import Quickshell
+FloatingWindow {
+ width: 400; height: 240
+ title: "Text metrics | " + empty.implicitWidth + ":" + empty.implicitHeight + ":" + empty.lineCount + ":" + single.lineCount + ":" + multi.lineCount + ":" + clipped.lineCount + ":" + clipped.truncated
+ Text {id:empty;text:""}
+ Text {id:single;y:40;text:"one"}
+ Text {id:multi;y:80;text:"one\ntwo"}
+ Text {id:clipped;y:140;text:"one\ntwo\nthree";maximumLineCount:2;elide:Text.ElideRight}
+}

package/test/fixtures/qml/flea-theme/ui/DialogButton.qml

@@ -0,0 +1,150 @@
+import QtQuick
+import qs.Commons
+import "js/Buttons.js" as Buttons
+
+// The one control every dialog, card, picker button and strip action draws.
+Item {
+    id: root
+
+    property string label: ""
+    property bool primary: false
+    // A destructive action rests as the error label in a muted frame, never primary.
+    property bool destructive: false
+    property real horizontalPadding: Theme.spacing.gap
+    // An unavailable action shows muted ink and its press does nothing.
+    property bool available: true
+    // The keyboard's own signal. Callers whose focus sits on a wrapper pass it down.
+    property bool focused: root.activeFocus
+    // True where the form owns the Tab order and the button only reports through tabbed.
+    property bool tabHandle: false
+    // A stop in its dialog's own Tab walk; while unavailable it is disabled, so it leaves the walk and keeps its look.
+    property bool tabStop: false
+    // A member of a set (the protocols): its frame and label are foreground while it is the current one and muted otherwise.
+    property bool setMember: false
+    property bool current: false
+    // Hosted in the chrome strip: a Theme.chromeHeight press area around a Theme.chromeControlHeight frame at caption size, and Tab reaches it.
+    property bool inStrip: false
+
+    // The pointer's own state, read by the native capture harness before it shoots a hover or a press.
+    readonly property bool hovered: hover.hovered
+    readonly property bool pressed: tap.pressed
+    // A release activates only inside the press area, so a held point outside draws the resting control.
+    readonly property bool pressShown: root.pressed && root.available && tap.point.position.x >= 0 && tap.point.position.x < root.width
+        && tap.point.position.y >= 0 && tap.point.position.y < root.height
+
+    signal activated()
+    // The form owns the order; a button only reports that Tab happened inside it.
+    signal tabbed(var from, bool back)
+
+    // Focus is the control's own frame: foreground, or accent for a set member where it has hue. Where a hairline would match the rest (a primary whose rest frame is the foreground, a set member without hue) the frame draws RING wide.
+    readonly property string focusFrame: Buttons.focusFrame(Theme.color.accentHasHue, root.setMember, root.primary && Qt.colorEqual(Theme.color.accentFrame, Theme.color.foreground))
+    readonly property bool focusShown: root.focused && root.available
+    // A secondary frame takes mutedFrame, ThemeRoles' border role, under a live label; a set member takes foreground while current and mutedFrame otherwise.
+    readonly property color frame: root.focusShown && root.focusFrame === "accent" ? Theme.color.accent
+        : root.focusShown ? Theme.color.foreground
+        : root.setMember ? (root.current ? Theme.color.foreground : Theme.color.mutedFrame)
+        : root.primary && root.available ? Theme.color.accentFrame : Theme.color.mutedFrame
+    readonly property color ink: !root.available || root.setMember && !root.current ? Theme.color.muted
+        : root.destructive ? Theme.color.error : Theme.color.foreground
+    // The frame and this wash say which action is being asked for; the label stays foreground.
+    readonly property color wash: root.primary && root.available ? Qt.alpha(Theme.color.accent, Buttons.WASH_PRIMARY) : "transparent"
+    // A border draws inside its rectangle, so the thick frame grows inward and nothing moves.
+    readonly property int frameWidth: root.focusShown && root.focusFrame === "thick" ? Buttons.RING : Theme.spacing.hairline
+
+    // A chrome strip's press area fills the strip and centres the control height above its rule.
+    readonly property real frameHeight: root.inStrip ? Theme.chromeControlHeight : root.height
+    readonly property real frameY: root.inStrip ? Math.round((root.height - Theme.spacing.hairline - root.frameHeight) / 2) : 0
+
+    implicitWidth: Math.max(Theme.hitMin, text.implicitWidth + 2 * root.horizontalPadding + 2 * Theme.spacing.hairline)
+    implicitHeight: root.inStrip ? Theme.chromeHeight : Theme.rowHeight - Theme.spacing.rowPaddingY
+    // A strip control or a tab stop stays in the Tab chain and drops out as a disabled item; flipping activeFocusOnTab under a focused control only warns.
+    activeFocusOnTab: root.inStrip || root.tabStop
+    enabled: root.available || !root.inStrip && !root.tabStop
+    opacity: root.available ? 1 : Buttons.DISABLED_OPACITY
+
+    Accessible.role: Accessible.Button
+    Accessible.name: root.label
+    Accessible.onPressAction: if (root.available) root.activated()
+
+    Item {
+        id: box
+        y: root.frameY
+        width: parent.width
+        height: root.frameHeight
+
+        // Only the frame and wash shrink: native text loses thin stems under a non-integer scale.
+        Item {
+            id: chrome
+            property int insetX: root.pressShown && !Theme.reducedMotion ? Math.round(box.width * (1 - Buttons.PRESS_SCALE) / 2) : 0
+            property int insetY: root.pressShown && !Theme.reducedMotion ? Math.round(box.height * (1 - Buttons.PRESS_SCALE) / 2) : 0
+            x: chrome.insetX
+            y: chrome.insetY
+            width: Math.round(box.width) - 2 * chrome.insetX
+            height: Math.round(box.height) - 2 * chrome.insetY
+            Behavior on insetX {
+                enabled: !Theme.reducedMotion
+                NumberAnimation { duration: Buttons.PRESS_MS; easing.type: Easing.OutCubic }
+            }
+            Behavior on insetY {
+                enabled: !Theme.reducedMotion
+                NumberAnimation { duration: Buttons.PRESS_MS; easing.type: Easing.OutCubic }
+            }
+            Rectangle {
+                objectName: "buttonFrame"
+                anchors.fill: parent
+                color: root.wash
+                border.width: root.frameWidth
+                border.color: root.frame
+            }
+            // Hover and press lay the control's own ink inside the frame at its width.
+            Rectangle {
+                objectName: "buttonWash"
+                anchors.fill: parent
+                anchors.margins: root.frameWidth
+                color: root.pressShown ? Qt.alpha(root.ink, Buttons.WASH_PRESS)
+                    : !root.pressed && hover.hovered && root.available ? Qt.alpha(root.ink, Buttons.WASH_HOVER) : "transparent"
+            }
+        }
+
+        Text {
+            id: text
+            objectName: "buttonLabel"
+            anchors.centerIn: parent
+            text: root.label
+            color: root.ink
+            font.family: Theme.font.family
+            font.pixelSize: root.inStrip ? Theme.font.caption : Theme.font.body
+            textFormat: Text.PlainText
+        }
+    }
+
+    HoverHandler {
+        id: hover
+        cursorShape: root.available ? Qt.PointingHandCursor : Qt.ArrowCursor
+    }
+
+    // A held key's repeats never activate again, so a key held past a focus move cannot press the next button.
+    function keyActivate(event) { if (!root.available) event.accepted = false; else if (!event.isAutoRepeat) root.activated() }
+
+    // A focused button answers Enter exactly as a press does; a handled Tab is accepted here so Qt never moves focus past the form's own stepFocus order.
+    Keys.onReturnPressed: function(event) { root.keyActivate(event) }
+    Keys.onEnterPressed: function(event) { root.keyActivate(event) }
+    Keys.onSpacePressed: function(event) { root.keyActivate(event) }
+    Keys.onTabPressed: function(event) {
+        if (!root.tabHandle) { event.accepted = false; return }
+        root.tabbed(root, (event.modifiers & Qt.ShiftModifier) !== 0)
+        event.accepted = true
+    }
+    Keys.onBacktabPressed: function(event) {
+        if (!root.tabHandle) { event.accepted = false; return }
+        root.tabbed(root, true)
+        event.accepted = true
+    }
+
+    TapHandler {
+        id: tap
+        acceptedButtons: Qt.LeftButton
+        gesturePolicy: TapHandler.ReleaseWithinBounds
+        onTapped: if (root.available) root.activated()
+    }
+}

package/test/fixtures/qml/flea-theme/ui/DialogField.qml

@@ -0,0 +1,147 @@
+import QtQuick
+import qs.Commons
+import "." as Flea
+
+// One labelled field, as the canvas's Network board draws it: a small uppercase label above a
+// bordered box that takes the accent while it has the caret.
+Item {
+    id: root
+
+    property string label: ""
+    // An alias, not a plain property assigned from onTextChanged: writing to a property that carries
+    // a binding destroys that binding, so a later programmatic set (switching protocol resets the
+    // port) would silently never reach the field.
+    property alias text: field.text
+    property string placeholder: ""
+    // A password box hides what it holds, and the eye beside it reveals while held.
+    property bool secret: false
+    // The field that holds a refused answer frames itself in the error role; off everywhere else.
+    property bool error: false
+    // Bullets that stand for a refused answer the field no longer holds; the first key replaces them.
+    property int heldMask: 0
+
+    signal accepted()
+    // Keys changed the text, so a card can drop the sentence the error frame stands for.
+    signal edited()
+    // The form owns the order; a field only reports that Tab happened inside it.
+    signal tabbed(var from, bool back)
+
+    readonly property alias input: field
+    readonly property bool focused: field.activeFocus
+    // Read by the capture harness: whether the eye is held, and its centre in window coordinates.
+    readonly property bool revealed: reveal.pressed
+    function eyeCentre() {
+        var at = eye.mapToItem(null, eye.width / 2, eye.height / 2)
+        return Math.round(at.x) + " " + Math.round(at.y)
+    }
+
+    function takeFocus() {
+        field.forceActiveFocus()
+    }
+    readonly property real labelSpacing: 0.1
+
+    implicitHeight: caption.implicitHeight + Theme.spacing.hairline * 4 + box.height
+
+    Text {
+        id: caption
+        anchors.top: parent.top
+        anchors.left: parent.left
+        text: root.label.toUpperCase()
+        color: Theme.color.muted
+        font.family: Theme.font.family
+        font.pixelSize: Theme.font.caption
+        font.letterSpacing: Theme.font.caption * root.labelSpacing
+        textFormat: Text.PlainText
+    }
+
+    Rectangle {
+        id: box
+        anchors.top: caption.bottom
+        anchors.topMargin: Theme.spacing.hairline * 4
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: Theme.rowHeight - Theme.spacing.rowPaddingY
+        color: Theme.color.background
+        border.width: Theme.spacing.hairline
+        border.color: root.error ? Theme.color.error : (field.activeFocus ? Theme.color.accent : Theme.color.mutedFrame)
+
+        TextInput {
+            id: field
+            anchors.left: parent.left
+            anchors.right: eye.left
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: Theme.spacing.gap
+            anchors.rightMargin: Theme.spacing.gap
+            color: Theme.color.foreground
+            selectionColor: Theme.color.accent
+            selectedTextColor: Theme.color.background
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.body
+            clip: true
+            leftPadding: heldMarks.visible ? heldMarks.width : 0
+            // Revealed only while the eye is held, so a shoulder never reads it from a stuck toggle.
+            echoMode: root.secret && !reveal.pressed ? TextInput.Password : TextInput.Normal
+            // The boards draw a masked value as U+2022 bullets, never Qt's larger default circle.
+            passwordCharacter: "\u2022"
+            onAccepted: root.accepted()
+            onTextEdited: { root.heldMask = 0; root.edited() }
+            Keys.onPressed: function(event) {
+                if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Delete) && field.text.length === 0 && root.heldMask > 0) { root.heldMask = 0; root.edited() }
+            }
+            Keys.onTabPressed: function(event) { root.tabbed(root, (event.modifiers & Qt.ShiftModifier) !== 0) }
+            Keys.onBacktabPressed: root.tabbed(root, true)
+        }
+
+        Text {
+            id: heldMarks
+            anchors.left: field.left
+            anchors.verticalCenter: field.verticalCenter
+            visible: root.heldMask > 0 && field.text.length === 0 && !reveal.pressed
+            text: field.passwordCharacter.repeat(Math.max(0, root.heldMask))
+            color: Theme.color.foreground
+            font: field.font
+            textFormat: Text.PlainText
+        }
+
+        Text {
+            anchors.left: field.left
+            anchors.verticalCenter: parent.verticalCenter
+            visible: field.text.length === 0 && !field.activeFocus && !heldMarks.visible
+            text: root.placeholder
+            color: Theme.color.muted
+            font.family: Theme.font.family
+            font.pixelSize: Theme.font.body
+            textFormat: Text.PlainText
+            elide: Text.ElideRight
+        }
+
+        Item {
+            id: eye
+            anchors.right: parent.right
+            anchors.rightMargin: Theme.spacing.gap
+            anchors.verticalCenter: parent.verticalCenter
+            width: root.secret ? Math.max(Theme.hitMin, Theme.font.bodySmall) : 0
+            height: root.secret ? Math.max(Theme.hitMin, Theme.font.bodySmall) : 0
+
+            Accessible.role: Accessible.Button
+            Accessible.name: "Show password"
+            Accessible.ignored: !root.secret
+
+            Flea.Glyph {
+                anchors.centerIn: parent
+                width: Theme.font.bodySmall
+                height: Theme.font.bodySmall
+                visible: root.secret
+                name: "eye"
+                color: reveal.pressed ? Theme.color.accent : Theme.color.mutedFrame
+            }
+
+            MouseArea {
+                id: reveal
+                anchors.fill: parent
+                enabled: root.secret
+                cursorShape: Qt.PointingHandCursor
+            }
+        }
+    }
+}

package/test/fixtures/qml/flea-theme/ui/EscapeHint.qml

@@ -0,0 +1,11 @@
+import QtQuick
+
+// The word that closes a surface, in the corner every surface puts it in: Dialogs rule 7, and the
+// spelling ui/SettingsPanel.qml already uses, so no two dialogs can name the way out differently.
+Text {
+    text: "esc"
+    color: Theme.color.muted
+    font.family: Theme.font.family
+    font.pixelSize: Theme.font.caption
+    textFormat: Text.PlainText
+}