Promote bar/common to qs.Ui kit module

2026-05-17 22:33:08 -04:00
parent 408dada45d
commit 6b915926b2
25 changed files with 110 additions and 98 deletions
@@ -0,0 +1,25 @@
+import QtQuick
+
+// Shared visual chrome for keyboard-and-mouse-navigable items inside a panel.
+// Contract: items must NOT read `containsMouse` for color/border. Mouse
+// hover updates the panel's cursor state at the root; visuals derive from
+// `hasCursor` / `current`. That's what guarantees a single highlight on
+// screen at any time across both keyboard and mouse interaction.
+Rectangle {
+  id: root
+
+  property bool hasCursor: false
+  property bool current: false
+
+  property color foreground: "#cacccc"
+  property color fill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.18)
+
+  radius: 4
+  color: (hasCursor || current) ? fill : "transparent"
+  border.width: hasCursor ? 1 : 0
+  border.color: foreground
+
+  Behavior on color {
+    ColorAnimation { duration: 60 }
+  }
+}
@@ -0,0 +1,212 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Commons
+
+// Layer-shell popup attached to a bar widget icon, designed for
+// click-driven AND keyboard-driven panels (e.g. SUPER+CTRL+W summon).
+//
+// Built on PanelWindow with WlrKeyboardFocus.Exclusive rather than
+// PopupWindow (xdg-popup). Layer-shell surfaces declared Exclusive get
+// keyboard focus from Hyprland *at map time*, which is the protocol-level
+// equivalent of focus-on-launch for xdg-toplevels. xdg-popups don't get
+// that — they only receive keys after a click/hover routes focus through
+// their parent surface — so keyboard-summoned popups fell flat without it.
+//
+// API is a subset of Common.PopupCard: anchorItem, owner, bar, open,
+// padding, margin, contentWidth/Height, default contentItem. Missing on
+// purpose (for now): centerOnBar, triggerMode ("hover"), containsMouse.
+// Hover-mode popups (system-stats, weather-flyout) and centered popups
+// (calendar week-view) need extra plumbing before migrating; converting
+// them is a follow-up.
+//
+// Positioning: full-screen layer-shell with the card placed inside at
+// `cardOrigin`. We use the bar window's height/width for the perpendicular
+// axis (away-from-bar) because mapToItem on the anchor returns
+// bar-content-relative coords with internal layout offsets baked in
+// (e.g. ~13px from the bar's vertical centering of its widget row). The
+// parallel axis (along-the-bar) uses the anchor's content x/y since the
+// bar spans full screen on that axis.
+//
+// Outside-click dismissal: an overlay MouseArea catches clicks, with the
+// QsWindow.mask subtracting the bar strip so clicks on the bar still
+// reach the bar widgets (activePopout coordinator hands off to another
+// popup if the user clicks a different bar icon).
+PanelWindow {
+  id: root
+
+  required property Item anchorItem
+  required property QtObject bar
+  property var owner: null
+  property int margin: 10
+  property int padding: 14
+  property int contentWidth: 280
+  property int contentHeight: 200
+  property bool open: false
+  property int gap: 10  // distance between bar edge and panel
+
+  default property alias contentItem: contentHolder.children
+
+  readonly property var coordinatorKey: owner || root
+  readonly property var anchorWindow: anchorItem ? anchorItem.QsWindow.window : null
+  readonly property string barPos: bar ? bar.position : "top"
+
+  function closePopout() {
+    if (owner && "closePopout" in owner) owner.closePopout()
+    else root.open = false
+  }
+
+  // --- screen + lifetime ---------------------------------------------------
+
+  screen: anchorWindow ? anchorWindow.screen : null
+  visible: open || card.opacity > 0
+  color: "transparent"
+  exclusionMode: ExclusionMode.Ignore
+
+  WlrLayershell.namespace: "omarchy-keyboard-panel"
+  WlrLayershell.layer: WlrLayer.Overlay
+  // Keyboard focus follows `open` (NOT `visible`). The window remains
+  // mapped during the fade-out so the opacity animation has something to
+  // animate, but keyboard/click ownership must release the moment the
+  // logical close fires — otherwise the user is locked out for 140ms.
+  WlrLayershell.keyboardFocus: open ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+
+  // Full-screen layer-shell. The visible card is positioned inside via
+  // `cardOrigin`. The `mask` below makes the bar area click-through (so
+  // the user can click another bar icon while the panel is open and the
+  // activePopout coordinator swaps to that popup); everywhere else, the
+  // overlay catches the click and dismisses via the MouseArea below.
+  anchors {
+    top: true
+    bottom: true
+    left: true
+    right: true
+  }
+
+  // Clickable region = whole screen MINUS the bar's strip. Clicks on the
+  // bar pass through to the bar layer; clicks anywhere else are caught
+  // by us and either land on the card (no-op) or trigger dismissal.
+  readonly property real _barStripSize: bar ? bar.barSize : 0
+  mask: Region {
+    width: root.screenW
+    height: root.screenH
+    Region {
+      x: root.barPos === "right" ? root.screenW - root._barStripSize : 0
+      y: root.barPos === "bottom" ? root.screenH - root._barStripSize : 0
+      width: (root.barPos === "top" || root.barPos === "bottom") ? root.screenW : root._barStripSize
+      height: (root.barPos === "top" || root.barPos === "bottom") ? root._barStripSize : root.screenH
+      intersection: Intersection.Subtract
+    }
+  }
+
+  // Track every layout change between the bar's contentItem and the
+  // anchor item. `transform` updates whenever any item in that chain
+  // moves/resizes, which is what makes the position binding below
+  // actually reactive — mapToItem on its own is a one-shot.
+  TransformWatcher {
+    id: anchorWatcher
+    a: anchorWindow ? anchorWindow.contentItem : null
+    b: anchorItem
+  }
+
+  // Anchor item's position within the bar's content surface. For a
+  // full-width top bar, the content x maps directly to screen x; the y
+  // returned here has the bar's internal padding baked in (e.g. ~13px
+  // from vertical centering of the widget row), which is why `cardOrigin`
+  // below uses `barH` for the perpendicular axis instead of this y.
+  readonly property point anchorScreenPos: {
+    anchorWatcher.transform  // reactive dependency
+    if (!anchorItem || !anchorWindow) return Qt.point(0, 0)
+    return anchorItem.mapToItem(anchorWindow.contentItem, 0, 0)
+  }
+  readonly property real anchorW: anchorItem ? anchorItem.width : 0
+  readonly property real anchorH: anchorItem ? anchorItem.height : 0
+  readonly property real screenW: screen ? screen.width : 0
+  readonly property real screenH: screen ? screen.height : 0
+
+  // Desired top-left of the card in screen coordinates. For the
+  // perpendicular axis (away-from-bar) we anchor to the bar window's edge
+  // directly — not the anchor item's y/x — because mapToItem(barContent)
+  // returns coordinates in the bar's content space, which can be offset
+  // from the bar surface's screen-anchored corner by internal layout
+  // (centering wrappers, padding). The bar's surface IS aligned to its
+  // anchored screen edge, so using `barW`/`barH` gives the right edge
+  // regardless of how the bar's internal widgets are positioned. For the
+  // parallel axis (along the bar) the anchor item's reported position is
+  // still consistent with the bar content origin, so it's accurate for
+  // centering the card under the icon.
+  readonly property real barW: anchorWindow ? anchorWindow.width : screenW
+  readonly property real barH: anchorWindow ? anchorWindow.height : 0
+  readonly property point cardOrigin: {
+    if (!anchorItem || !bar) return Qt.point(margin, margin)
+    var x = 0, y = 0
+    if (barPos === "bottom") {
+      x = anchorScreenPos.x + anchorW / 2 - contentWidth / 2
+      y = screenH - barH - contentHeight - gap
+    } else if (barPos === "left") {
+      x = barW + gap
+      y = anchorScreenPos.y + anchorH / 2 - contentHeight / 2
+    } else if (barPos === "right") {
+      x = screenW - barW - contentWidth - gap
+      y = anchorScreenPos.y + anchorH / 2 - contentHeight / 2
+    } else { // "top" (default)
+      x = anchorScreenPos.x + anchorW / 2 - contentWidth / 2
+      y = barH + gap
+    }
+    x = Math.max(margin, Math.min(x, screenW - contentWidth - margin))
+    y = Math.max(margin, Math.min(y, screenH - contentHeight - margin))
+    return Qt.point(Math.round(x), Math.round(y))
+  }
+
+
+  // --- popout coordination (same-bar single-popout model) -----------------
+
+  // Coordinate on `open`, not `visible`. `visible` lags into the fade-out
+  // animation, which made ownership transfer to a sibling popup race.
+  onOpenChanged: {
+    if (!bar) return
+    if (open) bar.requestPopout(coordinatorKey)
+    else if (bar.activePopout === coordinatorKey) bar.releasePopout(coordinatorKey)
+  }
+
+  // --- outside-click dismissal --------------------------------------------
+
+  // Catches clicks anywhere in the clickable region (i.e. everywhere on
+  // screen except the bar strip, which is masked out). The card has its
+  // own MouseArea below so clicks on it don't bubble up here. Disabled
+  // during the fade-out so the dying overlay doesn't swallow clicks that
+  // were meant for the apps behind it.
+  MouseArea {
+    anchors.fill: parent
+    enabled: root.open
+    onClicked: root.closePopout()
+  }
+
+  // --- card ----------------------------------------------------------------
+
+  Rectangle {
+    id: card
+    x: root.cardOrigin.x
+    y: root.cardOrigin.y
+    width: root.contentWidth
+    height: root.contentHeight
+    color: Color.popups.background
+    border.color: Color.popups.border
+    border.width: 2
+    radius: 0
+    opacity: root.open ? 1.0 : 0
+    Behavior on opacity {
+      NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
+    }
+
+    // Swallow clicks on the card so they don't bubble to the dismissal
+    // MouseArea behind us.
+    MouseArea { anchors.fill: parent }
+
+    Item {
+      id: contentHolder
+      anchors.fill: parent
+      anchors.margins: root.padding
+    }
+  }
+}
@@ -0,0 +1,64 @@
+import QtQuick
+
+// Small (22×22 by default) icon button used at the right edge of panel rows
+// for inline actions — forget network, confirm passphrase, unpair device,
+// etc. Two visual modes are supported via `hoverColor`:
+//   - default: hoverColor === foreground → subtle foreground-tint hover
+//   - urgent:  hoverColor === bar.urgent → red-tint hover for destructive
+//              actions like forget/unpair
+//
+// `enabled` gates clicks and dims the icon. The component owns its own
+// hover state visuals; mouse hover does NOT update any panel cursor state
+// here because action buttons are not cursor targets — the row they live
+// in is.
+Rectangle {
+  id: root
+
+  property string iconText: ""
+  property string tooltipText: ""
+  property color foreground: "#cacccc"
+  property color hoverColor: foreground
+  property color panelBackground: "#101315"
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 14
+  property real size: 22
+
+  signal clicked()
+
+  implicitWidth: size
+  implicitHeight: size
+  radius: 4
+
+  color: mouse.containsMouse && root.enabled
+    ? Qt.rgba(hoverColor.r, hoverColor.g, hoverColor.b, 0.20)
+    : "transparent"
+
+  Behavior on color { ColorAnimation { duration: 60 } }
+
+  Text {
+    anchors.centerIn: parent
+    text: root.iconText
+    color: root.enabled
+      ? (mouse.containsMouse ? root.hoverColor : Qt.darker(root.foreground, 1.3))
+      : Qt.darker(root.foreground, 2.0)
+    font.family: root.fontFamily
+    font.pixelSize: root.fontSize
+  }
+
+  MouseArea {
+    id: mouse
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+    enabled: root.enabled
+    onClicked: root.clicked()
+  }
+
+  PanelToolTip {
+    visible: root.tooltipText !== "" && mouse.containsMouse
+    text: root.tooltipText
+    panelForeground: root.foreground
+    panelBackground: root.panelBackground
+    fontFamily: root.fontFamily
+  }
+}
@@ -0,0 +1,17 @@
+import QtQuick
+
+// Small-caps-style label that introduces a panel section ("DNS provider",
+// "Wi-Fi networks", "Output device", "Paired devices"). Sits between a
+// PanelSeparator and the content rows.
+Text {
+  id: root
+
+  property color foreground: "#cacccc"
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 10
+
+  color: Qt.darker(foreground, 1.4)
+  font.family: fontFamily
+  font.pixelSize: fontSize
+  font.bold: true
+}
@@ -0,0 +1,17 @@
+import QtQuick
+
+// 1px horizontal divider for panel sections. The alpha-on-foreground tint
+// keeps the rule legible against the panel background without competing
+// with text or borders.
+Rectangle {
+  id: root
+
+  property color foreground: "#cacccc"
+  property real strength: 0.12
+
+  width: parent ? parent.width : implicitWidth
+  implicitWidth: 100
+  implicitHeight: 1
+  height: 1
+  color: Qt.rgba(foreground.r, foreground.g, foreground.b, strength)
+}
@@ -0,0 +1,117 @@
+import QtQuick
+
+Item {
+  id: root
+
+  property QtObject bar: null
+  property real value: 0
+  property real minimum: 0
+  property real maximum: 1
+  property real step: 0.05
+  property bool integer: false
+  property color trackColor: bar ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18) : "#333"
+  property color fillColor: bar ? bar.foreground : "#cacccc"
+  property color knobColor: bar ? bar.foreground : "#cacccc"
+  property bool dragging: false
+  property real trackHeight: 4
+  property real liveValue: value
+
+  onValueChanged: if (!dragging) liveValue = value
+
+  signal moved(real value)
+  signal released(real value)
+
+  implicitWidth: 200
+  implicitHeight: 22
+
+  readonly property real range: Math.max(0.0001, maximum - minimum)
+  readonly property real progress: Math.max(0, Math.min(1, (liveValue - minimum) / range))
+
+  Rectangle {
+    id: track
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.left: parent.left
+    anchors.right: parent.right
+    height: root.trackHeight
+    radius: height / 2
+    color: root.trackColor
+  }
+
+  Rectangle {
+    id: fill
+    anchors.verticalCenter: track.verticalCenter
+    anchors.left: track.left
+    height: track.height
+    radius: track.radius
+    color: root.fillColor
+    width: track.width * root.progress
+
+    Behavior on width {
+      enabled: !root.dragging
+      NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
+    }
+  }
+
+  Rectangle {
+    id: knob
+    width: 14
+    height: 14
+    radius: 7
+    color: root.knobColor
+    border.color: root.bar ? root.bar.background : "#101315"
+    border.width: 2
+    anchors.verticalCenter: track.verticalCenter
+    x: Math.max(0, Math.min(track.width - width, track.width * root.progress - width / 2))
+    scale: mouseArea.containsMouse || root.dragging ? 1.15 : 1.0
+
+    Behavior on x {
+      enabled: !root.dragging
+      NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
+    }
+
+    Behavior on scale {
+      NumberAnimation { duration: 110; easing.type: Easing.OutCubic }
+    }
+  }
+
+  MouseArea {
+    id: mouseArea
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    acceptedButtons: Qt.LeftButton
+
+    function valueFromX(x) {
+      var clamped = Math.max(0, Math.min(track.width, x))
+      var raw = root.minimum + (clamped / track.width) * root.range
+      if (root.integer) raw = Math.round(raw)
+      return Math.max(root.minimum, Math.min(root.maximum, raw))
+    }
+
+    onPressed: function(mouse) {
+      root.dragging = true
+      var next = valueFromX(mouse.x)
+      root.liveValue = next
+      root.moved(next)
+    }
+    onPositionChanged: function(mouse) {
+      if (!root.dragging) return
+      var next = valueFromX(mouse.x)
+      root.liveValue = next
+      root.moved(next)
+    }
+    onReleased: function(mouse) {
+      root.dragging = false
+      root.released(root.liveValue)
+      root.liveValue = root.value
+    }
+    onWheel: function(wheel) {
+      var delta = wheel.angleDelta.y > 0 ? root.step : -root.step
+      var next = Math.max(root.minimum, Math.min(root.maximum, root.liveValue + delta))
+      if (root.integer) next = Math.round(next)
+      root.liveValue = next
+      root.moved(next)
+      root.released(next)
+    }
+  }
+}
@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Controls
+
+// Styled wrapper around Qt Quick Controls ToolTip. Drop-in: declare inside
+// the hovered item and bind `visible` to the hover state, e.g.
+//   Common.PanelToolTip {
+//     visible: mouse.containsMouse
+//     text: "Forget network"
+//     panelForeground: bar.foreground
+//     panelBackground: bar.background
+//     fontFamily: bar.fontFamily
+//   }
+//
+// Property names are prefixed `panel*` to avoid clashing with ToolTip's
+// built-in `background`/`font` properties.
+ToolTip {
+  id: root
+
+  property color panelForeground: "#cacccc"
+  property color panelBackground: "#101315"
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 11
+
+  delay: 400
+  padding: 0
+
+  background: Rectangle {
+    color: root.panelBackground
+    border.color: root.panelForeground
+    border.width: 1
+    radius: 0
+    opacity: 0.97
+  }
+
+  contentItem: Text {
+    text: root.text
+    color: root.panelForeground
+    font.family: root.fontFamily
+    font.pixelSize: root.fontSize
+    leftPadding: 10
+    rightPadding: 10
+    topPadding: 6
+    bottomPadding: 6
+  }
+}
@@ -0,0 +1,116 @@
+import QtQuick
+import QtQuick.Controls
+
+Rectangle {
+  id: root
+
+  property string text: ""
+  property string iconText: ""
+  property string tooltipText: ""
+  property color foreground: "#cacccc"
+  property color background: "transparent"
+  property color hoverBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.12)
+  property color pressedBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.22)
+  property color tooltipBackground: "#101315"
+  property color tooltipForeground: foreground
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 12
+  property real iconSize: 14
+  property real horizontalPadding: 10
+  property real verticalPadding: 6
+  property bool active: false
+  property bool leftAlign: false
+  property color activeBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.18)
+
+  // Keyboard cursor flag. When true, the pill renders the same fill + border
+  // as a mouse hover — so j/k navigation and pointer hover are visually
+  // indistinguishable. Default false; bind from a panel's cursor state.
+  property bool hasCursor: false
+
+  ToolTip {
+    visible: root.tooltipText !== "" && mouseArea.containsMouse
+    text: root.tooltipText
+    delay: 400
+    padding: 0
+
+    background: Rectangle {
+      color: root.tooltipBackground
+      border.color: root.tooltipForeground
+      border.width: 1
+      radius: 0
+      opacity: 0.97
+    }
+
+    contentItem: Text {
+      text: root.tooltipText
+      color: root.tooltipForeground
+      font.family: root.fontFamily
+      font.pixelSize: 11
+      leftPadding: 10
+      rightPadding: 10
+      topPadding: 6
+      bottomPadding: 6
+    }
+  }
+
+  signal clicked()
+  signal rightClicked()
+
+  implicitWidth: row.implicitWidth + horizontalPadding * 2
+  implicitHeight: row.implicitHeight + verticalPadding * 2
+  radius: 4
+
+  // Hot = mouse hover OR keyboard cursor. Pressed wins over both; otherwise
+  // hot beats `active` (so a cursor on an already-active pill still reads
+  // as hovered, matching CursorSurface's behaviour for navigable rows).
+  readonly property bool hot: mouseArea.containsMouse || hasCursor
+
+  color: mouseArea.pressed ? pressedBackground
+    : hot ? hoverBackground
+    : (active ? activeBackground : background)
+  border.width: hot ? 1 : 0
+  border.color: foreground
+
+  Behavior on color {
+    ColorAnimation { duration: 120 }
+  }
+
+  Row {
+    id: row
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.left: root.leftAlign ? parent.left : undefined
+    anchors.leftMargin: root.leftAlign ? root.horizontalPadding : 0
+    anchors.horizontalCenter: root.leftAlign ? undefined : parent.horizontalCenter
+    spacing: 8
+
+    Text {
+      visible: root.iconText !== ""
+      text: root.iconText
+      color: root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: root.iconSize
+      anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Text {
+      visible: root.text !== ""
+      text: root.text
+      color: root.foreground
+      font.family: root.fontFamily
+      font.pixelSize: root.fontSize
+      anchors.verticalCenter: parent.verticalCenter
+    }
+  }
+
+  MouseArea {
+    id: mouseArea
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    acceptedButtons: Qt.LeftButton | Qt.RightButton
+    onClicked: function(mouse) {
+      if (mouse.button === Qt.RightButton) root.rightClicked()
+      else root.clicked()
+    }
+  }
+}
@@ -0,0 +1,139 @@
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+import qs.Commons
+
+PopupWindow {
+  id: root
+
+  required property Item anchorItem
+  required property QtObject bar
+  property var owner: null
+  property int margin: 10
+  property int padding: 14
+  property int contentWidth: 280
+  property int contentHeight: 200
+  property bool open: false
+  property bool centerOnBar: false
+  // "click" — uses HyprlandFocusGrab so clicking outside dismisses the popup.
+  // "hover" — passive overlay; the owning widget controls open via hover.
+  property string triggerMode: "click"
+
+  readonly property var coordinatorKey: owner || root
+  readonly property var anchorWindow: anchorItem ? anchorItem.QsWindow.window : null
+  readonly property bool containsMouse: cardHover.hovered
+
+  function closePopout() {
+    if (owner && "closePopout" in owner) owner.closePopout()
+    else root.open = false
+  }
+
+  default property alias contentItem: contentHolder.children
+
+  visible: open || card.opacity > 0
+  color: "transparent"
+  implicitWidth: contentWidth
+  implicitHeight: contentHeight
+
+  onOpenChanged: {
+    if (!bar) return
+    if (open) bar.requestPopout(coordinatorKey)
+    else if (bar.activePopout === coordinatorKey) bar.releasePopout(coordinatorKey)
+  }
+
+  // Outside-click dismissal via Hyprland's focus grab. While `active`, input
+  // is routed only to the listed windows; clicking anywhere else clears the
+  // grab and we close the popup. Skipped for hover-mode popups so the cursor
+  // can move freely between the trigger and the popup.
+  HyprlandFocusGrab {
+    active: root.open && root.triggerMode === "click"
+    windows: root.anchorWindow ? [root, root.anchorWindow] : [root]
+    onCleared: root.closePopout()
+  }
+
+  anchor {
+    id: popupAnchor
+    window: anchorItem ? anchorItem.QsWindow.window : null
+    adjustment: PopupAdjustment.Slide
+    edges: Edges.Top | Edges.Left
+    gravity: Edges.Bottom | Edges.Right
+    rect.width: 1
+    rect.height: 1
+
+    onAnchoring: {
+      if (!root.anchorItem || !root.bar) return
+
+      var target = root.anchorItem
+      var popupWidth = root.implicitWidth
+      var popupHeight = root.implicitHeight
+      var localX = target.width / 2 - popupWidth / 2
+      var localY = target.height + root.margin
+
+      if (root.bar.position === "bottom") {
+        localY = -popupHeight - root.margin
+      } else if (root.bar.position === "left") {
+        localX = target.width + root.margin
+        localY = target.height / 2 - popupHeight / 2
+      } else if (root.bar.position === "right") {
+        localX = -popupWidth - root.margin
+        localY = target.height / 2 - popupHeight / 2
+      }
+
+      var window = target.QsWindow.window
+      if (!window) return
+
+      if (root.centerOnBar) {
+        var cx = 0;
+        var cy = 0;
+        if (root.bar.position === "top" || root.bar.position === "bottom") {
+          cx = window.width / 2 - popupWidth / 2
+          cy = root.bar.position === "bottom" ? -popupHeight - root.margin : window.height + root.margin
+          cx = Math.max(root.margin, Math.min(cx, window.width - popupWidth - root.margin))
+        } else {
+          cx = root.bar.position === "left" ? window.width + root.margin : -popupWidth - root.margin
+          cy = window.height / 2 - popupHeight / 2
+          cy = Math.max(root.margin, Math.min(cy, window.height - popupHeight - root.margin))
+        }
+
+        popupAnchor.rect.x = Math.round(cx)
+        popupAnchor.rect.y = Math.round(cy)
+        return
+      }
+
+      var point = window.contentItem.mapFromItem(target, localX, localY)
+
+      if (root.bar.position === "top" || root.bar.position === "bottom") {
+        point.x = Math.max(root.margin, Math.min(point.x, window.width - popupWidth - root.margin))
+      } else {
+        point.y = Math.max(root.margin, Math.min(point.y, window.height - popupHeight - root.margin))
+      }
+
+      popupAnchor.rect.x = Math.round(point.x)
+      popupAnchor.rect.y = Math.round(point.y)
+    }
+  }
+
+  Rectangle {
+    id: card
+    anchors.fill: parent
+    color: Color.popups.background
+    border.color: Color.popups.border
+    border.width: 2
+    radius: 0
+    opacity: root.open ? 1.0 : 0
+
+    Behavior on opacity {
+      NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
+    }
+
+    Item {
+      id: contentHolder
+      anchors.fill: parent
+      anchors.margins: root.padding
+    }
+
+    HoverHandler {
+      id: cardHover
+    }
+  }
+}
@@ -0,0 +1,69 @@
+import QtQuick
+
+Item {
+  id: root
+
+  property var bar: null
+  property string text: ""
+  property string fontFamily: bar ? bar.fontFamily : "JetBrainsMono Nerd Font"
+  property real fontSize: 12
+  property color foreground: bar ? bar.foreground : "#cacccc"
+  property color activeColor: bar ? bar.urgent : "#a55555"
+  property bool active: false
+  property real horizontalMargin: 8.5
+  property real rightExtraMargin: 0
+  property real verticalPadding: 6
+  property real fixedWidth: -1
+  property real fixedHeight: -1
+  property real textRotation: 0
+  property bool keepSpace: false
+  property string tooltipText: ""
+
+  signal pressed(int button)
+  signal wheelMoved(int delta)
+
+  readonly property bool vertical: bar ? bar.vertical : false
+  readonly property int barSize: bar ? bar.barSize : 26
+
+  visible: text !== "" || keepSpace
+  opacity: text === "" ? 0 : 1
+  implicitWidth: fixedWidth > 0 ? fixedWidth : (vertical ? barSize : Math.max(12, label.implicitWidth + horizontalMargin * 2 + rightExtraMargin))
+  implicitHeight: fixedHeight > 0 ? fixedHeight : (vertical ? Math.max(12, label.implicitHeight + verticalPadding * 2) : barSize)
+
+  Behavior on opacity {
+    NumberAnimation { duration: 140; easing.type: Easing.OutCubic }
+  }
+
+  Text {
+    id: label
+    anchors.centerIn: parent
+    anchors.horizontalCenterOffset: root.vertical ? 0 : -root.rightExtraMargin / 2
+    text: root.text
+    color: root.active ? root.activeColor : root.foreground
+    font.family: root.fontFamily
+    font.pointSize: root.fontSize * 0.75
+    renderType: Text.NativeRendering
+    rotation: root.textRotation
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    Behavior on color {
+      ColorAnimation { duration: 160 }
+    }
+  }
+
+  MouseArea {
+    id: mouseArea
+    anchors.fill: parent
+    acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+    onEntered: if (root.bar) root.bar.showTooltip(root, root.tooltipText)
+    onExited: if (root.bar) root.bar.hideTooltip(root)
+    onClicked: function(mouse) {
+      if (root.bar) root.bar.hideTooltip(root)
+      root.pressed(mouse.button)
+    }
+    onWheel: function(wheel) { root.wheelMoved(wheel.angleDelta.y) }
+  }
+}
@@ -0,0 +1,12 @@
+module qs.Ui
+
+CursorSurface 1.0 CursorSurface.qml
+KeyboardPanel 1.0 KeyboardPanel.qml
+PanelActionButton 1.0 PanelActionButton.qml
+PanelSectionHeader 1.0 PanelSectionHeader.qml
+PanelSeparator 1.0 PanelSeparator.qml
+PanelSlider 1.0 PanelSlider.qml
+PanelToolTip 1.0 PanelToolTip.qml
+PillButton 1.0 PillButton.qml
+PopupCard 1.0 PopupCard.qml
+WidgetButton 1.0 WidgetButton.qml