improvements

updated design
2026-08-11 17:35:26 +02:00 · 2026-08-11 16:34:09 +02:00
34 changed files with 1774 additions and 249 deletions
@@ -18,6 +18,8 @@
 !brave-flags.conf
 !chromium-flags.conf
 !README.md
 !plans/
 !DESIGN-IS-2026-08-11/
 !rice.png
 !rice-2.png
 !rice-3.png
@@ -0,0 +1,36 @@
 # Takemi shell design audit — scope
 ## Audited artifact
 - Running Persona 5-inspired desktop shell shown in the two supplied 1920×1080 screenshots.
 - Quickshell implementation under `quickshell/`, including the top bar, right rail,
  pop-outs, tray menus, power overlay, notifications/OSD, and lock screen.
 - Shared design tokens and primitives in `quickshell/config/` and
  `quickshell/components/`.
 ## User and task
 - Primary user: the workstation owner using the shell throughout the day.
 - Primary task: identify system state and reach common desktop controls quickly,
  without the theme obscuring application content.
 ## Constraints
 - Preserve the Persona 5 / Tae Takemi identity.
 - Preserve the crimson, black, and white palette and screen-print character.
 - Stack remains Quickshell, Hyprland, and Fluxo.
 - The result must work at desktop scale, with keyboard and pointer input, and
  remain legible during long sessions.
 ## References
 - Persona 5 interface language: asymmetric editorial composition, hard ink,
  decisive silhouettes, halftone texture, and rapid card-like motion.
 - Current implementation and supplied screenshots are the concrete baseline;
  fidelity to the game is subordinate to daily desktop usefulness.
 ## Out of scope
 - Application-level themes outside the shell.
 - Replacing the wallpaper or character artwork.
 - Changing the desktop stack.
@@ -0,0 +1,114 @@
 # Evidence
 ## 1. Innovative
 - The shell applies one custom QML geometry and print system across panels,
  backdrops, motion, and textures (`quickshell/config/Theme.qml:118-153`,
  `quickshell/components/P5Panel.qml:7-56`).
 - This refreshes standard desktop bars/popovers, but the interaction model is
  still conventional bar + rail + popup + modal.
 ## 2. Useful
 - The permanent bar exposes workspaces, active window, media, resources, and
  time in one slab (`quickshell/bar/Bar.qml:67-122`).
 - Power and lock are keyboard-operable; bar, rail, tray, and most pop-out
  actions remain pointer-only (`quickshell/overlays/PowerMenu.qml:242-261`,
  `quickshell/lock/LockFace.qml:290-311`,
  `quickshell/bar/RailIcon.qml:104-124`).
 - The primary surfaces contain at least 41 interactive targets; the live total
  grows with workspaces, devices, streams, notifications, and tray entries.
 ## 3. Aesthetic
 - A clear system exists: spacing `[6,12,20,32]`, type
  `[9,11,12,15,20,34,92]`, 12 literal palette colors, one nominal 14° angle,
  and shared 10px cuts (`quickshell/config/Theme.qml:19-49,92-148`).
 - Runtime type exceptions include 8, 30, 42, and 156.4px; local geometry also
  introduces several non-token cuts and leans.
 - White on crimson is 3.68:1 and fails normal-text AA where selected destructive
  actions or unread badges use that pairing
  (`quickshell/components/P5Button.qml:32-73`,
  `quickshell/bar/NotifButton.qml:38-58`).
 - Screenshot #1: permanent chrome is visually continuous and disciplined, but
  competes with an already high-contrast Persona wallpaper/frame.
 - Screenshot #2: the left headline/right action-stack composition is strong;
  the repeated stripe field and still-legible desktop behind it dilute focus.
 ## 4. Understandable
 - The power screen labels all actions and prints its keyboard map
  (`quickshell/overlays/PowerMenu.qml:31-38,216-261`).
 - Rail icons expose different left/right/middle/scroll behaviors without visible
  instruction (`quickshell/bar/Rail.qml:76-132`).
 - Several state labels behave as inverse actions: “Wi-Fi On,” Bluetooth “On,”
  “Scanning,” and “Silenced” toggle those states off.
 - “WHO GOES THERE,” “WRONG,” “HELD,” “PROCS,” “VRAM,” and unlabeled load values
  favor voice or jargon over immediate comprehension.
 ## 5. Unobtrusive
 - Normal chrome consumes only a 40px top bar and 48px right rail
  (`quickshell/config/Theme.qml:109-116`).
 - The full-screen modes add stripes, a wedge, oversized split text, attribution,
  six slabs, and a hint simultaneously
  (`quickshell/overlays/PowerMenu.qml:50-228`).
 - Twelve action identities are repeated between permanent chrome and detail
  panels; repetition improves reach but adds competing affordances.
 ## 6. Honest
 - No marketing inflation or dark patterns were found. Power labels map directly
  to their system action (`quickshell/overlays/PowerMenu.qml:31-38,230-239`).
 - “n HELD” counts all history rather than suppressed items
  (`quickshell/popouts/NotifPopout.qml:27`,
  `quickshell/services/Notifs.qml:36-44`).
 - Muted OSDs display 0% even when stored volume remains nonzero
  (`quickshell/overlays/Osd.qml:51-64,172-185`).
 - A visually disabled slider can still emit changes
  (`quickshell/components/P5Slider.qml:9-12,48-84`).
 ## 7. Long-lasting
 - The system is based on reusable primitives rather than per-screen decoration.
 - Literal `P5` branding, the quote attribution, and the esports-like continuous
  frame tie the result closely to one entertainment reference and visual era
  (`quickshell/bar/Sigil.qml:31`,
  `quickshell/overlays/PowerMenu.qml:88-118`).
 ## 8. Thorough
 - Empty, loading, failure, focus, and disabled states exist.
 - A rendered success state is absent; generic buttons lack a disabled state;
  focus treatment is concentrated in power and lock; explicit accessible names
  and roles total zero (`quickshell/components/P5Button.qml:6-107`).
 - The lock’s disabled state is clear, but `P5Slider` can look disabled while
  remaining interactive.
 ## 9. Environmentally friendly
 - The shell has 0 JavaScript bytes, about 259KB of QML, 1.4KB of local texture
  assets, no declared HTTP request, and a measured load proxy below two seconds.
 - Seven Fluxo reads recur in polling batches; playing media creates 3–6 idle
  animation loops (`quickshell/services/Sys.qml:78-102`,
  `quickshell/bar/MediaPill.qml:125-153`).
 - No reduced-motion branch exists (`quickshell/config/Theme.qml:139-148`).
 ## 10. As little design as possible
 - The one-slab bar avoids a row of redundant cards
  (`quickshell/bar/Bar.qml:8-14,40-63`).
 - The audited tree reaches seven declarative levels, contains twelve repeated
  action identities, and includes removable atmospheric elements in modal and
  lock compositions.
 - The permanent surface, transient surface, and cinematic surface currently
  share too much of the same visual intensity instead of forming a hierarchy.
 ## Known gaps
 - Dynamic application strings, device counts, and menu depth cannot be fixed
  from static source.
 - Exact compositor frame time, GPU cost, and live accessibility-tree output
  were not available.
 - Screenshot evidence covers the normal desktop and power overlay; lock-screen
  judgments also use its implementation source.
@@ -0,0 +1,43 @@
 # Rams scorecard
 1. **Good design is innovative — 2/3**
   Evidence: one custom print/geometry system refreshes conventional shell surfaces (`01-evidence.md#1-innovative`).
   Justification: the expression is distinctive, but it does not introduce a new desktop interaction pattern.
 2. **Good design makes a product useful — 2/3**
   Evidence: core state and actions are direct, while most shell controls require a pointer (`01-evidence.md#2-useful`).
   Justification: the primary tasks work quickly, but keyboard and discoverability gaps add friction.
 3. **Good design is aesthetic — 2/3**
   Evidence: the token system is strong, with several type/geometry exceptions and a 3.68:1 text pairing (`01-evidence.md#3-aesthetic`).
   Justification: the visual system is unmistakable, but contrast and intensity inconsistencies prevent a fully resolved score.
 4. **Good design makes a product understandable — 1/3**
   Evidence: multiple rail gestures are undisclosed and several state labels read like actions (`01-evidence.md#4-understandable`).
   Justification: more than three controls require prior knowledge or experimentation.
 5. **Good design is unobtrusive — 1/3**
   Evidence: compact permanent chrome expands into visually competing full-screen decoration (`01-evidence.md#5-unobtrusive`).
   Justification: the theme sometimes becomes the figure when the user’s task should remain the figure.
 6. **Good design is honest — 2/3**
   Evidence: no dark patterns exist, but held-count, muted-volume, and disabled-slider presentation diverge from behavior (`01-evidence.md#6-honest`).
   Justification: the mismatches are minor rather than deceptive, but prevent a one-to-one mapping everywhere.
 7. **Good design is long-lasting — 2/3**
   Evidence: reusable primitives coexist with literal franchise and gaming-HUD markers (`01-evidence.md#7-long-lasting`).
   Justification: the craft will last, while the most literal references may date the surface.
 8. **Good design is thorough — 1/3**
   Evidence: success, generic disabled, broad focus, and accessibility metadata are missing or rough (`01-evidence.md#8-thorough`).
   Justification: three or more important state families remain incomplete.
 9. **Good design is environmentally friendly — 1/3**
   Evidence: source weight is small, but recurring polling and idle motion have no reduced-motion gate (`01-evidence.md#9-environmentally-friendly`).
   Justification: the runtime is lean yet motion is always on when its conditions are met.
 10. **Good design is as little design as possible — 1/3**
    Evidence: restrained single slabs coexist with repeated affordances and multi-layer modal atmosphere (`01-evidence.md#10-as-little-design-as-possible`).
    Justification: at least three decorative or duplicated elements could be removed without breaking a task.
 **Total: 15/30**
@@ -0,0 +1,30 @@
 # Verdict — REDESIGN
 The strict Rams verdict is **REDESIGN (15/30)**: preserve the excellent brand
 tokens and working shell primitives, but redesign the hierarchy so permanent,
 transient, and cinematic surfaces no longer compete at the same intensity.
 ## Highest-leverage moves
 1. **Principles #4 and #8 — make behavior legible:** give every icon one primary
   click action, add concise Persona-styled hover labels, expose secondary actions
   inside its pop-out, and add real focus/disabled/accessibility states. Evidence:
   `01-evidence.md#4-understandable` and `#8-thorough`.
 2. **Principles #5 and #10 — introduce three intensity tiers:** quiet permanent
   chrome, expressive transient panels, theatrical full-screen scenes; reserve
   stripes, large split type, and strong halftone for the latter two. Evidence:
   `01-evidence.md#5-unobtrusive` and `#10-as-little-design-as-possible`.
 3. **Principles #3 and #6 — assign semantics by treatment, not red alone:** use
   white fill for selection, a red rule/slash for active state, solid red only
   for destructive/error, and pulse only for urgency; fix white-on-red small text.
   Evidence: `01-evidence.md#3-aesthetic` and `#6-honest`.
 4. **Principles #3 and #7 — move the chaos to macro-composition:** keep clean
   module geometry, but vary panel silhouette, title placement, and scale by
   context instead of repeating the same framed HUD grammar everywhere. Evidence:
   `01-evidence.md#3-aesthetic` and `#7-long-lasting`.
 5. **Principles #2 and #9 — add a calm mode:** stop idle equalizer/pulse/marquee
   motion when reduced motion is requested and reduce polling when a detail panel
   is closed. Evidence: `01-evidence.md#2-useful` and `#9-environmentally-friendly`.
 This is a hierarchy redesign, not an instruction to discard the palette,
 textures, panel engine, services, or current functionality.
@@ -0,0 +1,41 @@
 # Planning handoff
 ```text
 /make-plan Redesign the Takemi Persona 5 desktop shell. Current design failed audit at 15/30 with critical gaps in principles #4 understandable, #5 unobtrusive, #8 thorough, #9 environmentally friendly, and #10 as little design as possible.
 Verdict paragraph:
 > The strict Rams verdict is REDESIGN (15/30): preserve the excellent brand tokens and working shell primitives, but redesign the hierarchy so permanent, transient, and cinematic surfaces no longer compete at the same intensity.
 Why redesign and not refine: the total is below the 20-point refine threshold because the same high-intensity visual and interaction grammar spans permanent chrome, transient controls, and full-screen scenes.
 Preserve from current design:
 - Crimson/black/white palette, type scale foundation, and motion timings in quickshell/config/Theme.qml:19-148.
 - Single-slab bar/rail architecture in quickshell/bar/Bar.qml:8-63 and quickshell/bar/Rail.qml:9-64.
 - Reusable P5Panel geometry/texture engine in quickshell/components/P5Panel.qml:7-248.
 - Existing services and feature coverage; this is an information/design hierarchy change, not a functionality cut.
 Discard:
 - One-intensity-fits-all use of stripes, halftone, split type, slashes, and repeated framed geometry. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#5-unobtrusive. Caused failure on principles #5 and #10.
 - Undisclosed multi-button/multi-gesture behavior on icon-only permanent controls. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#4-understandable. Caused failure on principles #4 and #8.
 Top moves:
 1. Principles #4 and #8 — make behavior legible: give every icon one primary click action, add concise Persona-styled hover labels, expose secondary actions inside its pop-out, and add real focus/disabled/accessibility states. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#4-understandable and #8-thorough.
 2. Principles #5 and #10 — introduce three intensity tiers: quiet permanent chrome, expressive transient panels, theatrical full-screen scenes; reserve stripes, large split type, and strong halftone for the latter two. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#5-unobtrusive and #10-as-little-design-as-possible.
 3. Principles #3 and #6 — assign semantics by treatment, not red alone: use white fill for selection, a red rule/slash for active state, solid red only for destructive/error, and pulse only for urgency; fix white-on-red small text. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#3-aesthetic and #6-honest.
 4. Principles #3 and #7 — move the chaos to macro-composition: keep clean module geometry, but vary panel silhouette, title placement, and scale by context instead of repeating the same framed HUD grammar everywhere. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#3-aesthetic and #7-long-lasting.
 5. Principles #2 and #9 — add a calm mode: stop idle equalizer/pulse/marquee motion when reduced motion is requested and reduce polling when a detail panel is closed. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#2-useful and #9-environmentally-friendly.
 Redesign priorities:
 1. Principle #4 — every visible control communicates its primary action without memorized mouse-button lore.
 2. Principles #5/#10 — visual intensity increases deliberately from chrome to pop-out to modal.
 3. Principles #3/#6 — color, fill, outline, pattern, and motion each have one stable semantic job.
 Deliverables:
 - New information architecture, not derived mechanically from the old layout.
 - New labeled primary flow compared side-by-side with the current shell.
 - Empty/loading/error/success/focus/disabled state matrix.
 - Migration path that preserves existing service behavior and keybinds.
 - Cutover criteria based on discoverability, contrast, reduced motion, and visual hierarchy.
 Guard against porting the old structure under new styling, running both hierarchies indefinitely, following generic gaming-HUD trends, or discarding the preserved brand tokens and primitives.
 ```
@@ -1 +1 @@
-monitor=eDP-1, disable
+
@@ -14,7 +14,7 @@ bindr = ALT, z, exec, ~/.config/hypr/scripts/replay-ctrl.sh toggle
 bindr = ALT SHIFT, c, exec, ~/.config/hypr/scripts/droidcam-ctrl.sh toggle
 # general binds
-bind = $mainMod, M, exec, pdfs-prompt
+bind = $mainMod, M, exec, pdfs-prompt --dmenu --menu 'fuzzel --dmenu --width 60'
 bind = $mainMod, B, exec, fluxo bt menu
 bind = $mainMod, RETURN, exec, $terminal
 bind = $mainMod SHIFT, Q, killactive,
@@ -0,0 +1,542 @@
 # Takemi design hierarchy redesign
 ## Outcome
 Turn the existing Persona 5 shell into a three-level visual system:
 1. **Chrome** — quiet, glanceable, and subordinate to applications.
 2. **Transient** — expressive pop-outs with distinct compositions and obvious controls.
 3. **Cinematic** — theatrical power and lock scenes with focused hierarchy.
 Preserve the crimson/black/white palette, services, keybinds, one-slab bar/rail,
 `P5Panel`, session-lock security, and current functional coverage. This plan changes
 visual hierarchy and interaction clarity, not the desktop stack.
 ## Phase 1 execution override — 2026-08-11
 For the current Phase 1 implementation, the user explicitly removed reduced-motion
 work and screen-reader metadata from scope. This override supersedes Phase 1.1, the
 `Accessible.*` parts of Phase 1.4, and their related definition-of-done and
 verification requirements for this execution only.
 - Do not create durable motion preferences or change animation policy.
 - Do not add or alter `Accessible.*` metadata or accessible action handlers.
 - Keep keyboard focus, visible focus treatment, keyboard navigation, root-disabled
  input behavior, semantic color/treatment tokens, and the surface hierarchy in
  scope.
 - Defer the remaining overridden requirements to a separately approved milestone.
 ## Implementation progress — 2026-08-11
 - **Phase 1 foundation: complete for the approved scope.** Added explicit surface
  presets and semantic treatment tokens; made `P5Button` and `P5Slider`
  keyboard-capable with visible focus and root-gated disabled behavior. The user
  explicitly excluded durable reduced-motion work and `Accessible.*` metadata, so
  those items remain deferred rather than incomplete regressions.
 - **Phase 2 calm chrome: complete.** Bar and rail use the quiet `ChromeSurface`
  tier without permanent texture; the clock omits seconds; CPU/MEM/GPU are visibly
  labelled; MediaPill uses elided static text and a static play/pause mark; rail
  clicks consistently pin detail panels and undisclosed secondary state actions
  were removed; delayed Persona tooltips show state and scroll hints without
  taking focus or overlapping an opening detail panel.
 - **Audio vertical slice: complete.** Output percentage is dominant, output/input
  are distinct bands, application streams are subordinate, and mute plus mixer
  actions are explicit. Pinned popouts use `PopupWindow.grabFocus` as their sole
  focus/dismiss owner, remap when promoted from hover, focus the first Audio
  control, support Tab and Escape, and synchronously release coordinator ownership.
 - **Verification status.** Changed QML passes individual Qt 6 `qmllint` and the
  repository diff passes whitespace validation. Tooltip placement/suppression and
  hover open/close were exercised in a live Quickshell session and passed. Pinned
  click/remap, outside-click dismissal, Escape, and compositor-close synchronization
  remain untested and require interaction QA before the milestone is considered
  runtime-verified.
 ## Non-goals
 - Do not replace Quickshell, Hyprland, Fluxo, PAM, or the service layer.
 - Do not add new accent hues or generic glass/blur cards.
 - Do not reproduce Persona 5 screens literally; keep this a usable desktop shell.
 - Do not build a second “control center” that duplicates every existing pop-out.
 - Do not rewrite tray-menu recursion or the popup coordinator unless verification
  exposes a concrete defect.
 ## Definition of done
 - Permanent chrome remains readable but no longer competes with application content.
 - Each primary rail icon has one obvious click action and a concise hover label.
 - Selected, active, destructive, error, and urgent states are distinguishable by
  treatment as well as color.
 - All small text meets WCAG AA; black-on-crimson replaces white-on-crimson where needed.
 - Pinned pop-outs and modal controls are keyboard reachable and visibly focused.
 - Power actions that end the session require a deliberate confirmation step.
 - Lock has idle, editing, busy, failure, and visible success compositions.
 - Reduced motion survives process restarts and stops all nonessential loops.
 - `qmllint`, live reload, interaction checks, and 1920×1080 plus 1366×768 visual
  captures pass without new warnings.
 ---
 ## Phase 0 — API and pattern lock
 ### Allowed APIs
 - **Quickshell 0.3.0 `PopupWindow`:** `visible`, `anchor`, `grabFocus`, `screen`.
  Configure placement through `anchor.item/window`, `edges`, `gravity`, `margins`,
  `adjustment`; call `anchor.updateAnchor()` when a visible trigger moves.
  [Official PopupWindow docs](https://quickshell.org/docs/v0.3.0/types/Quickshell/PopupWindow/)
  and [PopupAnchor docs](https://quickshell.org/docs/v0.3.0/types/Quickshell/PopupAnchor/).
 - **Popup bounds:** combine `PopupAdjustment.Flip | Slide | Resize` where content
  can genuinely resize. Use `QsWindow.mask: Region { item: ... }` for transparent
  overshoot bleed only after testing transformed entry animation.
  [PopupAdjustment](https://quickshell.org/docs/v0.3.0/types/Quickshell/PopupAdjustment/),
  [Region](https://quickshell.org/docs/v0.3.0/types/Quickshell/Region/).
 - **Pinned dismissal:** current `HyprlandFocusGrab.active/windows/onCleared` is valid
  only after a visible window exists (`components/Popout.qml:83-97`). Do not combine
  it casually with `PopupWindow.grabFocus`; choose one owner per opening mode.
  [HyprlandFocusGrab](https://quickshell.org/docs/v0.3.0/types/Quickshell.Hyprland/HyprlandFocusGrab/).
 - **Durable preferences:** `FileView` + `JsonAdapter`, using
  `Quickshell.statePath("design-preferences.json")`, `watchChanges`, `reload()`, and
  `writeAdapter()`. `PersistentProperties` survives reload only, not restart.
  [FileView](https://quickshell.org/docs/v0.3.0/types/Quickshell.Io/FileView/),
  [JsonAdapter](https://quickshell.org/docs/v0.3.0/types/Quickshell.Io/JsonAdapter/).
 - **Accessibility:** `Accessible.role/name/description/focusable/focused/pressed`,
  `Accessible.onPressAction`, `onIncreaseAction`, and `onDecreaseAction`; decorative
  duplicates use `Accessible.ignored: true`.
  [Qt Accessible](https://doc.qt.io/qt-6/qml-qtquick-accessible.html).
 - **Focus:** `FocusScope`, `focusPolicy: Qt.StrongFocus`, `activeFocusOnTab`,
  `KeyNavigation`, `Keys`, and `forceActiveFocus(Qt.PopupFocusReason)`.
  [Qt focus model](https://doc.qt.io/qt-6/qtquick-input-focus.html).
 - **Disabled controls:** disable the root `Item`; this suppresses pointer and keyboard
  input and propagates to children. Explicitly bind `HoverHandler.enabled` when a
  disabled control must not react visually.
  [Qt Item](https://doc.qt.io/qt-6/qml-qtquick-item.html).
 - **System contrast:**
  `Application.styleHints.accessibility.contrastPreference === Qt.HighContrast`.
  Qt 6.11 has no documented reduced-motion preference, so motion policy is owned by
  `Preferences`.
 - **Secure lock:** retain `WlSessionLock`/`WlSessionLockSurface` in
  `lock/Lock.qml:12-28`; `Overlay + Exclusive` is not a secure replacement.
  [WlSessionLock](https://quickshell.org/docs/v0.3.0/types/Quickshell.Wayland/WlSessionLock/).
 ### Repository patterns to copy
 - Copy singleton structure from `config/Theme.qml:1-16` and `services/Actions.qml:1-10`.
 - Copy popup show/hide ownership from `components/Popout.qml:58-116,150-190`.
 - Copy keyboard roving selection from `overlays/PowerMenu.qml:242-261`.
 - Copy development-safe lock preview boundary from `lock/Lock.qml:7-27` and
  `lockpreview.qml`; never style by repeatedly locking the real session.
 - Copy one-slab chrome composition from `bar/Bar.qml:40-63` and `bar/Rail.qml:43-64`.
 ### Verification
 - Record `qs --version` and Qt version in the implementation PR: expected Quickshell
  0.3.0 and Qt 6.11.1.
 - Run `qmllint` on each copied API in a minimal changed component before broad rollout.
 - Use `qs ipc show` to confirm existing IPC surface before adding typed functions.
 ### Guards
 - No deprecated `PopupWindow.parentWindow`, `relativeX`, or `relativeY`.
 - No direct `QsWindow.width/height`; use implicit sizes.
 - No `WlrKeyboardFocus.Exclusive` as a lock substitute.
 - No stock `QsMenuAnchor` or default Qt tooltip visuals inside the custom theme.
 - No claimed system reduced-motion detection; it does not exist in the documented API.
 ---
 ## Phase 1 — Establish the semantic design foundation
 ### 1.1 Durable preferences
 Create `quickshell/config/Preferences.qml` using the Phase 0 `FileView`/`JsonAdapter`
 pattern. Persist:
 - `reducedMotion: false`
 - `tooltips: true`
 - `highIntensityChrome: false` only as a migration escape hatch; default remains calm
 Expose typed setters through the existing `IpcHandler` in
 `services/Actions.qml:60-68`, such as `setReducedMotion(enabled: bool): void`. Do not
 build a settings UI in this phase.
 ### 1.2 Three explicit surface presets
 - Add `components/ChromeSurface.qml`: a thin `P5Panel` preset with opaque flat fill,
  one keyline, no halftone, no drop, and an active slash only when requested.
 - Refine `popouts/PopoutSurface.qml:7-23` as the transient preset: halftone becomes
  opt-in by composition rather than present on every panel; retain the hard offset
  and stronger border.
 - Keep `components/P5Backdrop.qml` cinematic-only. Bar, rail, tooltips, cards, and OSD
  must not instantiate it.
 Do not add a generic numeric “intensity” prop to `P5Panel`; explicit presets make
 the hierarchy visible in code and prevent arbitrary intermediate tiers.
 ### 1.3 Semantic treatments
 Document and encode in `config/Theme.qml`:
 | State | Fill | Mark | Text | Motion |
 |---|---|---|---|---|
 | Rest | surface | neutral keyline | white | none |
 | Hover | surface | short red wipe | white | one short lunge |
 | Focus/selected | white | black keyline | black | snap once |
 | Active | surface | persistent red slash | white | none |
 | Destructive/error | solid red | black keyline | black | shake only on error |
 | Urgent | surface | red pulse mark | white | bounded pulse |
 | Disabled | surface | muted outline | muted | none |
 Replace small white-on-crimson labels with black-on-crimson; measured contrast improves
 from 3.68:1 to 5.70:1. Do not add a new status color.
 ### 1.4 Base-control contract
 - Convert `components/P5Button.qml` to a `FocusScope` or focusable root with one
  activation path shared by `TapHandler`, Enter, Space, and
  `Accessible.onPressAction`. Add `description`, visible focus state, and a real
  disabled state.
 - Replace `P5Slider.enabledControl` with root `enabled` and update its call sites.
  Gate tap, drag, hover, accessible increase/decrease, and left/right keys through
  the same enabled root.
 - Add semantic names and roles to `RailIcon`, `StatusIcon`, notification actions,
  media transport, calendar navigation, and tray-menu rows. Mark split-text ghosts,
  masks, texture layers, and duplicate glyphs ignored.
 ### Verification
 - Focus every base control with Tab and confirm a visible non-color-only state.
 - Trigger each through pointer, Enter/Space, and its accessible action; assert one
  signal per activation.
 - Disable each control and assert no `clicked`/`moved` signal and no hover animation.
 - Recompute all foreground/background contrast pairs; normal text must be ≥4.5:1.
 - Restart Quickshell and confirm preferences persist.
 ### Guards
 - Do not treat `Accessible` metadata as keyboard support; implement both.
 - Do not attach semantics to every decorative child.
 - Do not use `MouseArea.enabled` as the component-wide disabled gate.
 - Do not spread raw state colors through callers; state treatment belongs in base controls.
 ---
 ## Phase 2 — Quiet and clarify permanent chrome
 ### 2.1 Bar
 Update `bar/Bar.qml` and `bar/BarPill.qml` to use `ChromeSurface` and remove all
 always-on texture. Keep the single slab and hairline dividers.
 - `bar/Clock.qml`: remove permanent seconds; reveal them only inside Calendar.
 - `bar/Resources.qml`: render tiny `CPU`, `MEM`, and `GPU` labels beside values so
  `2.6G` is not contextless; remove the currently dead `Metric.label` path only after
  its visible replacement exists.
 - `bar/MediaPill.qml`: keep title/artist but replace the three continuously animated
  equalizer bars with one static play-state mark in normal mode. Allow the loop only
  when high-intensity chrome is explicitly enabled and reduced motion is off.
 - Preserve active-window elision and current collision calculation in
  `bar/Bar.qml:90-96`.
 ### 2.2 Rail interaction grammar
 Make left click mean **open/pin details** for network, Bluetooth, audio, battery,
 notifications, and power. Remove undisclosed right/middle-click state changes from
 `bar/Rail.qml:76-132,151-171`; move those actions into their corresponding pop-outs.
 Retain scrolling only for volume, microphone, and brightness because it directly
 maps to a continuous readout. Mention that gesture in the tooltip.
 ### 2.3 Persona tooltip
 Add `components/P5Tooltip.qml` as a small anchored `PopupWindow`, not a stock Qt
 tooltip. Copy anchor/delay/hide behavior from `components/Popout.qml`, but use:
 - calm `ChromeSurface`
 - 350–450ms delay
 - one-line name + current state
 - optional second micro-line such as `SCROLL TO ADJUST`
 - no focus grab, no halftone, no scale loop
 - `PopupAdjustment.Flip | Slide`
 Add `label` and `hint` to `RailIcon`; tooltips honor `Preferences.tooltips` and never
 become the only source of an accessible name.
 ### 2.4 Pinned keyboard opening
 Add explicit `openHover()` and `openPinned()` paths to `components/Popout.qml`.
 `openPinned()` must set its focus mode before mapping; if a hover popup is already
 visible, close and remap rather than assuming a live `grabFocus` change works. Start
 with Audio as the vertical slice. Choose either `PopupWindow.grabFocus` or the current
 `HyprlandFocusGrab` for pinned dismissal after runtime comparison; never leave both
 owning the same close event.
 ### Verification
 - Screenshot clean desktop against both a quiet and high-contrast wallpaper.
 - First-time test: identify every rail icon and predict left click from tooltip.
 - Verify no secondary pointer action remains unless it is printed in the tooltip.
 - Open Audio by hover and click: hover must remain passive; pinned mode must accept
  keyboard focus, Esc-close, and outside-click close exactly once.
 - Move/rescale the rail while a popup is open and call `anchor.updateAnchor()` from
  the actual geometry-change path if it drifts.
 ### Guards
 - Do not reintroduce separate floating cards into bar or rail.
 - Do not increase bar/rail footprint.
 - Do not put stripes, halftone, or large display text in permanent chrome.
 - Do not make a tooltip interactive.
 ---
 ## Phase 3 — Give transient surfaces distinct macro-compositions
 Retain shared popup lifecycle, width discipline, coordinator, header baseline, and
 body controls. Redesign one family at a time; capture and approve each family before
 moving on so a bad motif is not copied eight times.
 ### 3.1 Control pop-outs
 - **Audio (`AudioPopout.qml`)** — make current volume the headline number; output and
  microphone form two clear bands; applications become a restrained mixer list.
  Put Mute and `Open audio mixer` inside the panel.
 - **Network (`NetPopout.qml`)** — dossier composition: current connection/IP at top,
  download/upload fully named, network list as clipped paper rows. Use action labels
  `Turn Wi-Fi on/off` and `Network settings`.
 - **Bluetooth (`BtPopout.qml`)** — share list-row mechanics with Network but not its
  exact silhouette. Use action copy `Turn on/off`, `Start/stop scanning`; pair/connect
  status must not rely on color alone.
 - **Battery (`BatteryPopout.qml`)** — oversized percentage crossing one edge, with
  `Plugged in`/`On battery`, remaining time, draw, and health ordered underneath.
  Keep Suspend as the one explicit action.
 ### 3.2 Information pop-outs
 - **Media (`MediaPopout.qml`)** — let album art define one side of the silhouette;
  keep metadata in a solid legibility zone; label transport actions accessibly.
 - **Calendar (`CalendarPopout.qml`)** — large selected day/month as the composition,
  grid subordinate; move seconds here from the permanent bar; label previous/next.
 - **Notifications (`NotifPopout.qml`, `NotifCard.qml`)** — overlapping-paper rhythm
  only at the list level, not on every inner action. Rename `n HELD` to `n IN HISTORY`;
  make DND copy an action (`Silence notifications` / `Resume notifications`).
 - **System (`SysPopout.qml`)** — treat it as a diagnostic poster: four primary metrics
  first, hardware detail second. Expand `PROCS`, `MEM`, `VRAM`, `Root`, and label load
  averages `1 / 5 / 15 min`.
 ### 3.3 Shared transient rules
 - `PopoutHeader` supplies alignment and focus traversal, not the full silhouette.
 - Only one dominant numeral/image/headline per panel.
 - Maximum one halftone region and one red slash per panel.
 - Lists use consistent 32–40px targets and explicit selected/focused/disabled states.
 - Empty and loading layouts preserve the panel silhouette instead of collapsing.
 - Fix muted OSD honesty: show stored percentage beside `MUTED`, or omit percentage;
  never display a fabricated 0%.
 ### Verification
 - Capture all eight pop-outs at rest plus empty/loading/error/disabled states where applicable.
 - Test with longest realistic SSID, device, track, app, and notification strings.
 - Verify list focus order, Enter/Space activation, Esc close, and disabled-row skipping.
 - Ensure only one transient window stays open through a rapid rail sweep.
 - Test popup bounds at every screen edge and both target resolutions.
 ### Guards
 - Do not create eight copies of the same card grid.
 - Do not vary edge angle randomly inside one surface.
 - Do not use display italic for body copy or dense device lists.
 - Do not put action wording in state form (`Wi-Fi On`) when clicking performs the inverse.
 ---
 ## Phase 4 — Focus the cinematic scenes
 ### 4.1 Power menu
 In `overlays/PowerMenu.qml`:
 - Keep the left headline/right action-stack asymmetry.
 - Increase backdrop opacity enough that application text no longer competes.
 - Use one stripe band or wedge, not a full-screen stripe field plus every other motif.
 - Separate Lock/Suspend/Hibernate from Log Out/Reboot/Shut Down with a labeled break
  and greater spacing.
 - Keep white fill/black text for normal selection. Use solid crimson/black text for
  destructive selection.
 - Add `pendingAction`: the first activation of Log Out/Reboot/Shut Down replaces the
  action region with `CONFIRM LOG OUT`, `CONFIRM REBOOT`, or `CONFIRM SHUT DOWN`
  plus Cancel; second activation executes.
  Escape clears confirmation first and closes the menu only when no action is pending.
 - Keep roving Up/Down/J/K navigation and update focus order for confirmation.
 ### 4.2 Lock screen
 Refactor `lock/LockFace.qml` into explicit visual states while retaining the single
 PAM context and `WlSessionLock` shell:
 - **Idle:** clock is dominant; status is quiet; auth field is present but subordinate.
 - **Editing:** first user edit shifts emphasis to auth and dims/moves clock/status.
 - **Busy:** `CHECKING…`, disabled input, bounded sweep.
 - **Failure:** `PASSWORD INCORRECT` or PAM message, solid error treatment, one shake.
 - **Success:** paint a short `ACCESS GRANTED` state before unlocking; skip delay under
  reduced motion.
 Replace `WHO GOES THERE`, `WRONG`, and `PAM ERROR` with explicit copy. Resolve the
 username safely from `USER` then `LOGNAME`; if both are empty, do not call PAM with a
 literal placeholder—show `AUTHENTICATION USER UNAVAILABLE`.
 Keep responsive scaling, per-monitor wallpaper, and `lockpreview.qml`. Ensure the
 password input exposes `Accessible.EditableText`, name `Password`, `editable: true`,
 and `passwordEdit: true`.
 ### Verification
 - Power: pointer and keyboard through safe action, destructive confirmation, cancel,
  outside click, and repeated open/close.
 - Lock preview: capture all five states at 1920×1080 and 1366×768.
 - Real lock test only after preview and PAM-path review; test wrong password, correct
  password, empty username environment simulation, and Quickshell reload behavior.
 - Confirm `WlSessionLock.secure` path remains unchanged.
 ### Guards
 - Never execute destructive action on the first activation.
 - Never fake authentication success in preview or bypass PAM.
 - Never replace session lock with a focus-exclusive overlay.
 - Do not let theatrical copy obscure what the user must do.
 ---
 ## Phase 5 — Motion, contrast, and runtime calm
 ### 5.1 Motion policy
 In `Theme.qml`, derive `motionScale` from `Preferences.reducedMotion`. Apply it to:
 - every `Behavior`
 - popup enter/exit sequences
 - media equalizer and marquee loops
 - icon pulses
 - toast countdown/entry
 - OSD, power, and lock scene transitions
 When reduced motion is on, set final state directly or disable `Behavior`; do not merely
 shorten loops to 1ms. Essential progress indicators may remain static with clear text.
 ### 5.2 High contrast
 Read `Application.styleHints.accessibility.contrastPreference`. In high contrast:
 - increase keyline/border separation
 - disable low-opacity texture behind text
 - retain shape/icon differences among selection, active, danger, and urgency
 - do not change the three-color identity
 ### 5.3 Polling cleanup
 After visual behavior is stable, move `sysReader` from the 2-second batch to the
 20-second batch in `services/Sys.qml:78-102`; uptime/load/process count do not drive
 permanent animation. Keep CPU/MEM/GPU at 2 seconds because the bar renders them.
 Measure before making further demand-driven polling changes; do not introduce a
 consumer-count abstraction without evidence that it materially reduces work.
 ### Verification
 - Restart with reduced motion and verify zero infinite animations via source grep and
  live observation; all final states must still appear.
 - Toggle high contrast and re-run contrast checks.
 - Compare Fluxo process-launch frequency before/after for 60 seconds.
 - Confirm notification timing, popup dismissal, and lock success still complete when
  animation is disabled.
 ### Guards
 - Do not claim to follow an OS reduced-motion setting.
 - Do not gate functional timers such as notification lifetime or polling behind motion.
 - Do not add blur, gradients, or extra texture to compensate for removed motion.
 ---
 ## Phase 6 — Integrated verification and cutover
 ### Automated checks
 1. `qmllint -I quickshell` on every changed QML file individually; the current tool can
   exit 255 without diagnostics on some recursive/singleton batches, so record files
   and results rather than treating one giant invocation as authoritative.
 2. `git diff --check`.
 3. Grep for:
   - white small text on solid accent
   - `enabledControl`
   - pointer handlers without an accessible name on shared controls
   - infinite animations not gated by reduced motion
   - deprecated popup properties
   - old copy: `WHO GOES THERE|PAM error|HELD|PROCS|VRAM`
 4. Reload through `qs ipc call shell reloadConfig` and inspect `qs log`.
 ### Interaction matrix
 Test each bar/rail/pop-out action with pointer, keyboard where focusable, outside-click,
 Esc, disabled state, and service unavailable. Specifically test tray menus with nested
 submenus, Wi-Fi off, no Bluetooth adapter, no battery, no player, no notifications,
 and missing album art.
 ### Visual matrix
 Capture:
 - 1920×1080 and 1366×768
 - calm and high-contrast wallpaper
 - default, reduced-motion, and high-contrast preferences
 - desktop, every pop-out, tray menu, OSD, toast, power normal/confirm, and all lock states
 Compare against these invariants:
 - Chrome has no texture and never dominates content.
 - Transient panels each have one dominant composition.
 - Cinematic scenes retain the strongest typography and atmosphere.
 - Nothing important is encoded by color alone.
 - No text clips, crosses a cut edge, or falls below contrast requirements.
 ### Cutover sequence
 Implement in six reviewable commits matching Phases 1–6. Do not delete the old visual
 path until its phase passes screenshots and interaction tests. Remove migration aliases
 (`enabledControl`, high-intensity escape hatch) only in the final cleanup commit after
 all call sites and preferences have migrated.
 ## Expected file map
 ### New
 - `quickshell/config/Preferences.qml`
 - `quickshell/components/ChromeSurface.qml`
 - `quickshell/components/P5Tooltip.qml`
 ### Foundation edits
 - `quickshell/config/Theme.qml`
 - `quickshell/components/P5Panel.qml`
 - `quickshell/components/P5Button.qml`
 - `quickshell/components/P5Slider.qml`
 - `quickshell/components/Popout.qml`
 - `quickshell/components/Icon.qml`
 - `quickshell/components/Marquee.qml`
 - `quickshell/services/Actions.qml`
 ### Surface edits
 - `quickshell/bar/{Bar,BarPill,Rail,RailIcon,StatusIcon,Clock,Resources,MediaPill,Tray}.qml`
 - `quickshell/popouts/{PopoutSurface,PopoutHeader,AudioPopout,NetPopout,BtPopout,BatteryPopout,MediaPopout,CalendarPopout,NotifPopout,SysPopout,TrayMenuList}.qml`
 - `quickshell/components/NotifCard.qml`
 - `quickshell/overlays/{Osd,Toasts,PowerMenu}.qml`
 - `quickshell/lock/LockFace.qml`
 - `quickshell/services/Sys.qml`
 ## Recommended execution order
 Execute Phase 1 first and review its state matrix before any visual restyling. Then use
 Audio as the full vertical slice through Phases 2–3. Once its tooltip, pinned focus,
 semantic states, reduced motion, and transient composition pass, repeat that proven
 pattern across the remaining surfaces. Leave real session-lock testing until the lock
 preview and power confirmation work are complete.
@@ -39,10 +39,18 @@ cost 4.4% of the height on top of what the bar already takes.
 - **rail** — one slab: network, bluetooth, audio, mic, backlight, battery, tray,
  notifications, power. Popouts open leftward, into the screen.
-Each surface is a single continuous `P5Panel` with modules divided by sheared
+Each permanent surface is a single continuous `ChromeSurface` with modules
-hairlines. `BarPill` is chromeless by default — a module is *content inside* a
+divided by sheared hairlines. `BarPill` is chromeless by default — a module is
-surface, not a surface of its own — and marks hover with a crimson underline.
+*content inside* a surface, not a surface of its own — and marks hover with a
-Pass `standalone: true` for the rare thing that really is its own panel.
+crimson underline. Pass `standalone: true` for the rare thing that really is its
 own panel.
 The shell uses three deliberate surface tiers. **Chrome** (`ChromeSurface`) is
 the calm, texture-free bar, rail, and tooltip layer. **Transient**
 (`PopoutSurface`) is reserved for expressive menus and detail panels, with one
 clear composition and stronger separation from the desktop. **Cinematic**
 (`P5Backdrop`) belongs only to scene-scale experiences such as power and lock;
 it is never used as decoration inside ordinary chrome or popouts.
 ```
 shell.qml        entrypoint — bar, rail, power menu, toasts, OSD per screen
@@ -67,20 +75,34 @@ contentPad * 2`), which keeps the shape maths out of binding loops.
 | Sigil | bar | app menu | reload shell | | | |
 | Workspaces | bar | switch | | | | |
 | Clock | bar | pin calendar | | | | calendar |
-| Network | rail | pin panel | toggle Wi-Fi | nm-connection-editor | | networks |
+| Network | rail | pin details | | | | state + networks |
-| Bluetooth | rail | pin panel | toggle adapter | | | devices |
+| Bluetooth | rail | pin details | | | | state + devices |
-| Volume | rail | mute | pin panel | pavucontrol | volume | audio mixer |
+| Volume | rail | pin audio | | | volume | state + scroll hint + audio |
-| Mic | rail | mute | pin panel | | mic volume | audio mixer |
+| Mic | rail | pin audio | | | mic volume | state + scroll hint + audio |
-| Brightness | rail | | | | brightness | |
+| Brightness | rail | | | | brightness | state + scroll hint |
 | Battery | rail | pin panel | | | | power detail |
 | Tray | rail | activate | app menu | secondary | | |
-| Bell | rail | history + mark read | do not disturb | | | history |
+| Bell | rail | pin history + mark read | | | | state + history |
 | Power | rail | power menu | | | | |
 | Media | bar | play/pause | next | raise player | next/prev | full player |
 | CPU/MEM/GPU | bar | btop | | | | resource dashboard |
 Popouts open on a short dwell and stay while the pointer is over the trigger or
-the panel. Clicking pins one open.
+the panel. Hover openings remain passive. Clicking remaps a detail panel as a
 keyboard-focused popup: Tab moves through its controls, Escape dismisses it,
 and an outside click closes it. A shell-wide coordinator keeps only one
 transient surface mapped at a time, including tray context menus, so sweeping
 across the rail cannot stack several animated panels over one another.
 Audio is the reference vertical-slice popout: current output percentage leads,
 output and input have distinct bands, and application streams form a subordinate
 mixer list. Output/input mute actions and **Open audio mixer** are explicit
 buttons inside the panel; scrolling the rail icons remains the fast level
 adjustment.
 The power menu is fully keyboard-driven as well as clickable: `Up`/`Down` or
 `J`/`K` moves the active slab, `Enter`/`Space` confirms it, and `Escape`
 dismisses the screen.
 ## Keybinds
@@ -4,8 +4,8 @@ import Quickshell.Hyprland
 import "root:/config"
 import "root:/components"
-// Focused window title, glitching on every change the way a Persona 5 caption
+// Focused window title. Rapid application title churn is settled before it is
-// snaps into place.
+// painted, then the stable caption lands like a misregistered print layer.
 Item {
    id: root
@@ -19,7 +19,8 @@ Item {
        && (root.monitor === null || toplevel.monitor === null
            || toplevel.monitor.id === root.monitor.id)
-    readonly property string title: mine && toplevel.title ? toplevel.title : "—"
+    readonly property string incomingTitle: mine && toplevel.title ? toplevel.title : "—"
    property string displayedTitle: "—"
    // The bar shrinks this when the three clusters would otherwise collide.
    property real maxWidth: 240
@@ -31,18 +32,60 @@ Item {
        NumberAnimation { duration: Theme.durSlow; easing.type: Easing.OutExpo }
    }
-    Marquee {
+    Item {
-        id: label
+        id: titleStage
        anchors.fill: parent
-        text: root.title
+        clip: true
-        color: root.mine ? Theme.subtext : Theme.muted
+
-        pixelSize: Theme.fsSmall
+        Text {
-        family: Theme.fontDisplay
+            id: label
-        italic: true
+            anchors.verticalCenter: parent.verticalCenter
-        weight: Font.DemiBold
+            width: parent.width
            text: root.displayedTitle
            color: root.mine ? Theme.subtext : Theme.muted
            elide: Text.ElideRight
            font.pixelSize: Theme.fsSmall
            font.family: Theme.fontDisplay
            font.italic: true
            font.weight: Font.DemiBold
            renderType: Text.NativeRendering
        }
        // Crimson duplicate: visible only during the landing transition. The
        // small opposing offset gives the title Persona's rough print snap
        // without leaving permanent motion in the bar.
        Text {
            id: ghost
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width
            text: root.displayedTitle
            color: Theme.accent
            opacity: 0
            elide: Text.ElideRight
            font: label.font
            renderType: Text.NativeRendering
        }
    }
-    onTitleChanged: flash.restart()
+    function commitTitle(): void {
        if (root.displayedTitle === root.incomingTitle)
            return;
        root.displayedTitle = root.incomingTitle;
        titleLanding.restart();
    }
    // Browser tabs, terminals and editors can update titles several times in a
    // frame. Keep the old caption steady until the stream settles instead of
    // restarting an animation for every intermediate value.
    Timer {
        id: titleSettle
        interval: 120
        repeat: false
        onTriggered: root.commitTitle()
    }
    onIncomingTitleChanged: titleSettle.restart()
    Component.onCompleted: displayedTitle = incomingTitle
    // A quick crimson wipe under the title on focus change.
    Rectangle {
@@ -55,7 +98,7 @@ Item {
    }
    SequentialAnimation {
-        id: flash
+        id: titleLanding
        ParallelAnimation {
            NumberAnimation {
                target: wipe; property: "width"
@@ -66,6 +109,24 @@ Item {
                target: wipe; property: "opacity"
                from: 0; to: 1; duration: Theme.durFast
            }
            NumberAnimation {
                target: label; property: "x"
                from: -10; to: 0
                duration: Theme.durBase; easing.type: Easing.OutBack
            }
            NumberAnimation {
                target: label; property: "opacity"
                from: 0.35; to: 1; duration: Theme.durFast
            }
            NumberAnimation {
                target: ghost; property: "x"
                from: 9; to: -3
                duration: Theme.durBase; easing.type: Easing.OutExpo
            }
            NumberAnimation {
                target: ghost; property: "opacity"
                from: 0.8; to: 0; duration: Theme.durBase
            }
        }
        NumberAnimation {
            target: wipe; property: "opacity"
@@ -37,29 +37,16 @@ PanelWindow {
    exclusiveZone: Theme.barHeight + Theme.barMargin
    color: "transparent"
-    // The slab. One panel, full width, flat fill, black keyline.
+    // Calm permanent chrome: one opaque slab with no texture or offset copy.
-    P5Panel {
+    ChromeSurface {
        id: slab
        anchors.fill: parent
        lean: Theme.skew
        chop: Theme.cut
        chopCorners: [1, 3]
        padding: 0
-        fill: Theme.surface
+        active: true
        fillOpacity: 1.0
        border: Theme.alpha(Theme.outline, 0.9)
        borderWidth: 1
        slash: true
        slashColor: Theme.accent
        slashWidth: 5
        // No offset copy on the big slabs. The 3px black silhouette behind the
        // fill is a print-misregistration trick, and at this scale it stops
        // reading as one: on a 1900px bar you only ever see it at the chopped
        // corners, where it turns the single clean cut into a staggered double
        // edge that looks like a rendering fault. The black keyline still
        // carries the heavy outer contour, which is what the corner needs.
        drop: false
    }
    readonly property real edgeInset: Theme.barHeight * Theme.skew + Theme.padM
@@ -17,7 +17,7 @@ BarPill {
    SystemClock {
        id: clock
-        precision: SystemClock.Seconds
+        precision: SystemClock.Minutes
    }
    onClicked: calendar.pinned = !calendar.pinned
@@ -65,16 +65,6 @@ BarPill {
            split: 1.4
        }
        // Seconds, kept quiet so they read as a ticking detail rather than noise.
        Text {
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: 4
            text: Qt.formatDateTime(clock.date, "ss")
            color: Theme.alpha(Theme.primary, 0.8)
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            renderType: Text.NativeRendering
        }
    }
    // Glitch the time on the hour, because it should feel like something happened.
@@ -17,7 +17,7 @@ BarPill {
    visible: Media.hasPlayer || width > 1
    // Track position, drawn by the pill in its own rule band.
-    progress: Media.canSeek ? Media.progress : -1
+    progress: Media.hasTimeline ? Media.progress : -1
    implicitWidth: Media.hasPlayer
        ? layout.implicitWidth + contentPad * 2
@@ -83,8 +83,6 @@ BarPill {
                text: Media.sourceIcon
                font.pixelSize: Theme.fsLarge
                color: Theme.primary
                pulsing: Media.playing
                pulseScale: 1.12
            }
        }
@@ -101,28 +99,33 @@ BarPill {
            readonly property real cap: 150
-            Marquee {
+            Text {
                width: Math.min(meta.cap, implicitWidth)
                height: 14
                text: Media.title || Media.identity
                color: Theme.text
-                pixelSize: Theme.fsSmall
+                elide: Text.ElideRight
-                family: Theme.fontDisplay
+                font.pixelSize: Theme.fsSmall
-                weight: Font.DemiBold
+                font.family: Theme.fontDisplay
-                italic: true
+                font.weight: Font.DemiBold
                font.italic: true
                renderType: Text.NativeRendering
            }
-            Marquee {
+            Text {
                width: Math.min(meta.cap, implicitWidth)
                height: 12
                text: Media.artist || Media.album || Media.identity
                color: Theme.muted
-                pixelSize: Theme.fsMicro
+                elide: Text.ElideRight
-                family: Theme.fontMono
+                font.pixelSize: Theme.fsMicro
                font.family: Theme.fontMono
                renderType: Text.NativeRendering
            }
        }
-        // Play state, as a two-bar equaliser that freezes when paused.
+        // Compact play-state equaliser. It moves only while audio is playing
        // and freezes into three quiet bars when paused.
        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 2
@@ -40,8 +40,8 @@ PanelWindow {
    exclusiveZone: Theme.railWidth + Theme.barMargin
    color: "transparent"
-    // The slab.
+    // The same calm permanent-chrome preset used by the top bar.
-    P5Panel {
+    ChromeSurface {
        id: slab
        anchors.fill: parent
        vertical: true
@@ -49,18 +49,8 @@ PanelWindow {
        chop: Theme.cut
        chopCorners: [1, 3]
        padding: 0
-        fill: Theme.surface
+        active: true
        fillOpacity: 1.0
        border: Theme.alpha(Theme.outline, 0.9)
        borderWidth: 1
        slash: true
        slashColor: Theme.accent
        slashWidth: 5
        // Same as the bar — see the note there. The doubled corner is worse on
        // the rail, because its chopped corners sit against the wallpaper's
        // high-contrast stripes rather than against other chrome.
        drop: false
    }
    readonly property real edgeInset: Theme.railWidth * Theme.skew + Theme.padM
@@ -76,18 +66,21 @@ PanelWindow {
        RailIcon {
            id: netIcon
            icon: Net.icon
            label: "Network"
            statusText: Net.label
            suppressTooltip: netPopout.detailActive
            dim: !Sys.netUp
-            onClicked: netPopout.pinned = !netPopout.pinned
+            onClicked: netPopout.togglePinned()
            onRightClicked: Net.toggleWifi()
            onMiddleClicked: Actions.openNetworkSettings()
        }
        RailIcon {
            id: btIcon
            icon: Bt.icon
            label: "Bluetooth"
            statusText: Bt.label
            suppressTooltip: btPopout.detailActive
            dim: !Bt.enabled
-            onClicked: btPopout.pinned = !btPopout.pinned
+            onClicked: btPopout.togglePinned()
            onRightClicked: Bt.toggle()
        }
        Divider {}
@@ -96,19 +89,24 @@ PanelWindow {
            id: volIcon
            icon: Audio.icon
            readout: Audio.muted ? "" : Audio.volumePercent + "%"
            label: "Volume"
            statusText: Audio.muted ? "Muted" : Audio.volumePercent + "% · " + Audio.sinkName
            hint: "Scroll to adjust"
            suppressTooltip: audioPopout.detailActive
            alert: Audio.muted
-            onClicked: Audio.toggleMute()
+            onClicked: audioPopout.togglePinned()
            onRightClicked: audioPopout.pinned = !audioPopout.pinned
            onMiddleClicked: Actions.openAudioSettings()
            onScrolled: delta => Audio.changeVolume(delta > 0 ? 0.05 : -0.05)
        }
        RailIcon {
            id: micIcon
            icon: Audio.micIcon
            label: "Microphone"
            statusText: Audio.micMuted ? "Muted" : Audio.micPercent + "% · " + Audio.sourceName
            hint: "Scroll to adjust"
            suppressTooltip: audioPopout.detailActive
            alert: Audio.micMuted
-            onClicked: Audio.toggleMicMute()
+            onClicked: audioPopout.togglePinned()
            onRightClicked: audioPopout.pinned = !audioPopout.pinned
            onScrolled: delta => Audio.setMicVolume(Audio.micVolume + (delta > 0 ? 0.05 : -0.05))
        }
@@ -117,6 +115,9 @@ PanelWindow {
            visible: Brightness.available
            icon: Brightness.icon
            readout: Math.round(Brightness.percent) + "%"
            label: "Brightness"
            statusText: Math.round(Brightness.percent) + "%"
            hint: "Scroll to adjust"
            onScrolled: delta => Brightness.change(delta > 0 ? 5 : -5)
        }
@@ -127,9 +128,12 @@ PanelWindow {
            visible: Battery.available
            icon: Battery.icon
            readout: Math.round(Battery.percent) + "%"
            label: "Battery"
            statusText: Math.round(Battery.percent) + "% · " + Battery.timeLabel
            suppressTooltip: battPopout.detailActive
            alert: Battery.critical
            pulsing: Battery.critical
-            onClicked: battPopout.pinned = !battPopout.pinned
+            onClicked: battPopout.togglePinned()
        }
    }
@@ -151,21 +155,27 @@ PanelWindow {
        RailIcon {
            id: bellIcon
            icon: Notifs.icon
            label: "Notifications"
            statusText: Notifs.dnd
                ? "Do not disturb"
                : (Notifs.unread > 0 ? Notifs.unread + " unread" : "All caught up")
            readout: Notifs.unread > 0
                ? (Notifs.unread > 9 ? "9+" : String(Notifs.unread))
                : ""
            dim: Notifs.dnd
            alert: Notifs.hasUnread && !Notifs.dnd
            suppressTooltip: notifPopout.detailActive
            onClicked: {
-                notifPopout.pinned = !notifPopout.pinned;
+                notifPopout.togglePinned();
                Notifs.markRead();
            }
            onRightClicked: Notifs.toggleDnd()
        }
        RailIcon {
            id: powerIcon
            icon: "󰐥"
            label: "Power"
            statusText: "Session actions"
            alert: Actions.powerMenuOpen
            onClicked: Actions.togglePowerMenu()
        }
@@ -12,6 +12,10 @@ Item {
    property string icon: ""
    property string readout: ""
    property string label: ""
    property string statusText: ""
    property string hint: ""
    property bool suppressTooltip: false
    property color tint: Theme.primary
    property bool alert: false
    property bool dim: false
@@ -24,8 +28,6 @@ Item {
    readonly property real wipeInset: 5
    signal clicked()
    signal rightClicked()
    signal middleClicked()
    signal scrolled(real delta)
    implicitWidth: Theme.railWidth
@@ -110,16 +112,17 @@ Item {
        acceptedButtons: Qt.LeftButton
        onTapped: root.clicked()
    }
    TapHandler {
        acceptedButtons: Qt.RightButton
        onTapped: root.rightClicked()
    }
    TapHandler {
        acceptedButtons: Qt.MiddleButton
        onTapped: root.middleClicked()
    }
    WheelHandler {
        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
        onWheel: event => root.scrolled(event.angleDelta.y)
    }
    P5Tooltip {
        anchorItem: root
        triggerHovered: root.hovered
        title: root.label
        status: root.statusText
        hint: root.hint
        suppressed: root.suppressTooltip
    }
 }
@@ -56,10 +56,8 @@ BarPill {
        color: Theme.alpha(Theme.outline, 0.8)
    }
-    // The CPU/MEM/GPU labels are gone: three characters of chrome per metric,
+    // A tiny fixed label makes every number self-describing without turning the
-    // repeated three times, in the most cramped part of the shell. The number
+    // compact meter cluster back into three separate cards.
    // over its meter is legible on its own, and dropping them buys the room to
    // set the figure in display italic instead of squeezing it into mono.
    component Metric: Column {
        id: metric
@@ -70,18 +68,34 @@ BarPill {
        anchors.verticalCenter: parent.verticalCenter
        spacing: 2
-        Text {
+        Row {
-            text: metric.readout
+            spacing: 4
            color: Theme.heat(metric.value)
            font.family: Theme.fontDisplay
            font.pixelSize: Theme.fsBody
            font.weight: Theme.weightDisplay
            font.italic: true
            font.letterSpacing: 0.5
            renderType: Text.NativeRendering
-            Behavior on color {
+            Text {
-                ColorAnimation { duration: Theme.durBase }
+                anchors.baseline: readoutText.baseline
                text: metric.label
                color: Theme.muted
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.weight: Font.Bold
                font.letterSpacing: 0.5
                renderType: Text.NativeRendering
            }
            Text {
                id: readoutText
                text: metric.readout
                color: Theme.heat(metric.value)
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsBody
                font.weight: Theme.weightDisplay
                font.italic: true
                font.letterSpacing: 0.5
                renderType: Text.NativeRendering
                Behavior on color {
                    ColorAnimation { duration: Theme.durBase }
                }
            }
        }
@@ -0,0 +1,27 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // Calm, permanent-chrome preset. It is deliberately flat and opaque: one
 // neutral keyline, no texture, no offset copy, and no accent unless active.
 P5Panel {
    property bool active: false
    property color tone: Theme.treatmentActiveMark
    fill: Theme.treatmentRestFill
    fillOpacity: 1.0
    border: Theme.treatmentRestMark
    borderWidth: 1
    // Keep the hard ink contour. Removing both texture and keyline made the
    // permanent slabs read as generic broadcast HUD chrome.
    keyline: true
    drop: false
    halftone: false
    sheen: false
    slash: active
    slashColor: tone
    slashWidth: 4
    lean: 0.06
    chop: Theme.cut
    padding: Theme.padS
 }
@@ -1,24 +1,40 @@
 import QtQuick
 import "root:/config"
-// Chopped, leaning button. On hover it lunges toward the pointer and flips to
+// Chopped, leaning button with one activation path for pointer and keyboard.
-// crimson-on-white; on press it snaps flat.
+FocusScope {
 Item {
    id: root
    property string text: ""
    property string icon: ""
    property color accent: Theme.primary
    property color hoverFill: Theme.accent
    property bool destructive: false
    property bool selected: false
    property real lean: Theme.skew
    property real lunge: 6
    property bool wide: false
    signal clicked()
-    readonly property bool hovered: hover.hovered
+    readonly property bool hovered: root.enabled && hover.hovered
    readonly property bool pressed: tap.pressed
    readonly property bool focusedOrSelected: root.activeFocus || root.selected
    readonly property bool highlighted: root.hovered || root.focusedOrSelected
    // Pointer activation must not turn a transient action into the black/white
    // keyboard-focus treatment. Tab still reaches it, and programmatic focus
    // (power-menu roving selection / pinned popouts) still works.
    focusPolicy: root.enabled ? Qt.TabFocus : Qt.NoFocus
    function activate(): void {
        if (root.enabled)
            root.clicked();
    }
    function activateFromKey(event): void {
        if (!event.isAutoRepeat)
            root.activate();
    }
    implicitWidth: wide ? 260 : (row.implicitWidth + panel.contentPad * 2)
    implicitHeight: 44
@@ -28,13 +44,24 @@ Item {
        anchors.fill: parent
        lean: root.lean
        padding: Theme.padS
-        fill: root.hovered ? (root.destructive ? root.hoverFill : Theme.text) : Theme.surface
+        fill: {
-        fillOpacity: root.hovered ? 1.0 : 0.9
+            if (!root.enabled) return Theme.treatmentDisabledFill;
-        border: root.hovered ? "transparent" : Theme.alpha(root.accent, 0.55)
+            if (root.destructive) return Theme.treatmentDestructiveFill;
-        slash: !root.hovered
+            if (root.highlighted) return Theme.treatmentHoverFill;
-        slashColor: root.destructive ? Theme.accent : root.accent
+            return Theme.treatmentRestFill;
-        halftone: root.hovered
+        }
-        halftoneColor: root.destructive ? Theme.text : Theme.base
+        fillOpacity: root.enabled ? 1.0 : 0.72
        border: {
            if (!root.enabled) return Theme.treatmentDisabledMark;
            if (root.destructive) return Theme.treatmentFocusMark;
            if (root.highlighted) return Theme.treatmentHoverMark;
            return Theme.alpha(root.accent, 0.55);
        }
        borderWidth: Theme.stroke
        slash: !root.highlighted
        slashColor: root.destructive ? Theme.treatmentDestructiveMark : root.accent
        halftone: root.enabled && root.highlighted
        halftoneColor: Theme.ink
        halftoneOpacity: 0.14
        Behavior on fillOpacity {
@@ -52,17 +79,23 @@ Item {
                visible: root.icon !== ""
                text: root.icon
                font.pixelSize: Theme.fsTitle
-                color: root.hovered
+                color: {
-                    ? (root.destructive ? Theme.text : Theme.base)
+                    if (!root.enabled) return Theme.treatmentDisabledText;
-                    : root.accent
+                    if (root.destructive) return Theme.treatmentDestructiveText;
                    if (root.highlighted) return Theme.treatmentHoverText;
                    return root.accent;
                }
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: root.text
-                color: root.hovered
+                color: {
-                    ? (root.destructive ? Theme.text : Theme.base)
+                    if (!root.enabled) return Theme.treatmentDisabledText;
-                    : Theme.text
+                    if (root.destructive) return Theme.treatmentDestructiveText;
                    if (root.highlighted) return Theme.treatmentHoverText;
                    return Theme.treatmentRestText;
                }
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsBody
                font.weight: Theme.weightDisplay
@@ -79,7 +112,7 @@ Item {
    }
    transform: Translate {
-        x: root.pressed ? 0 : (root.hovered ? root.lunge : 0)
+        x: root.pressed ? 0 : (root.highlighted ? root.lunge : 0)
        Behavior on x {
            NumberAnimation {
@@ -96,11 +129,17 @@ Item {
    HoverHandler {
        id: hover
        enabled: root.enabled
        cursorShape: Qt.PointingHandCursor
    }
    TapHandler {
        id: tap
-        onTapped: root.clicked()
+        enabled: root.enabled
        onTapped: root.activate()
    }
    Keys.onReturnPressed: event => root.activateFromKey(event)
    Keys.onEnterPressed: event => root.activateFromKey(event)
    Keys.onSpacePressed: event => root.activateFromKey(event)
 }
@@ -8,23 +8,38 @@ Item {
    property real value: 0        // 0..1
    property color accent: Theme.primary
-    property bool enabledControl: true
+    property real stepSize: 0.05
    signal moved(real value)
    implicitHeight: 18
    implicitWidth: 200
    focusPolicy: root.enabled ? Qt.StrongFocus : Qt.NoFocus
    readonly property real _lean: Theme.skew * height
    function commit(nextValue: real): void {
        if (!root.enabled)
            return;
        root.moved(Math.max(0, Math.min(1, nextValue)));
    }
    // Rail
    Skew {
        id: rail
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right
-        height: 6
+        height: root.activeFocus ? 10 : 6
-        color: Theme.alpha(Theme.outline, 0.7)
+        color: root.activeFocus
            ? Theme.treatmentFocusFill
            : Theme.alpha(root.enabled ? Theme.outline : Theme.treatmentDisabledMark, 0.7)
        borderColor: root.activeFocus ? Theme.treatmentFocusMark : "transparent"
        borderWidth: root.activeFocus ? Theme.stroke : 0
        Behavior on height {
            NumberAnimation { duration: Theme.durFast }
        }
    }
    // Fill
@@ -33,7 +48,7 @@ Item {
        anchors.left: parent.left
        width: Math.max(0, Math.min(1, root.value)) * root.width
        height: 6
-        color: root.enabledControl ? root.accent : Theme.muted
+        color: root.enabled ? root.accent : Theme.treatmentDisabledText
        Behavior on width {
            enabled: !drag.active
@@ -49,8 +64,8 @@ Item {
    Skew {
        id: handle
        width: 6
-        height: hover.hovered || drag.active ? 18 : 14
+        height: root.activeFocus || hover.hovered || drag.active ? 18 : 14
-        color: root.enabledControl ? Theme.text : Theme.muted
+        color: root.enabled ? Theme.text : Theme.treatmentDisabledText
        anchors.verticalCenter: parent.verticalCenter
        x: Math.max(0, Math.min(1, root.value)) * root.width - width / 2
@@ -65,21 +80,46 @@ Item {
    HoverHandler {
        id: hover
        enabled: root.enabled
        cursorShape: Qt.PointingHandCursor
    }
    TapHandler {
-        onTapped: event => root.moved(Math.max(0, Math.min(1, event.position.x / root.width)))
+        enabled: root.enabled
        onPressedChanged: if (pressed) root.forceActiveFocus(Qt.MouseFocusReason)
        onTapped: event => root.commit(event.position.x / root.width)
    }
    DragHandler {
        id: drag
        enabled: root.enabled
        target: null
        xAxis.enabled: true
        yAxis.enabled: false
        onCentroidChanged: {
            if (!active) return;
-            root.moved(Math.max(0, Math.min(1, centroid.position.x / root.width)));
+            root.forceActiveFocus(Qt.MouseFocusReason);
            root.commit(centroid.position.x / root.width);
        }
    }
    Keys.onPressed: event => {
        switch (event.key) {
        case Qt.Key_Left:
            root.commit(root.value - root.stepSize);
            break;
        case Qt.Key_Right:
            root.commit(root.value + root.stepSize);
            break;
        case Qt.Key_Home:
            root.commit(0);
            break;
        case Qt.Key_End:
            root.commit(1);
            break;
        default:
            return;
        }
        event.accepted = true;
    }
 }
@@ -0,0 +1,114 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 // Calm, informational hover label for permanent chrome. It never takes focus
 // or participates in popup coordination; a delayed label should not dismiss or
 // displace the detail panel attached to the same rail control.
 PopupWindow {
    id: root
    required property Item anchorItem
    property bool triggerHovered: false
    property string title: ""
    property string status: ""
    property string hint: ""
    property int delay: 400
    property bool suppressed: false
    readonly property int pad: Theme.padS
    readonly property real textWidth: Math.max(titleText.implicitWidth,
        statusText.implicitWidth, hintText.implicitWidth)
    readonly property real contentWidth: Math.max(112, textWidth + pad * 4)
    readonly property real contentHeight: textColumn.implicitHeight + pad * 2
    anchor.item: anchorItem
    anchor.edges: Edges.Left
    anchor.gravity: Edges.Left
    anchor.adjustment: PopupAdjustment.Flip | PopupAdjustment.SlideY
    anchor.margins.left: Theme.popoutGap
    implicitWidth: contentWidth
    implicitHeight: contentHeight
    color: "transparent"
    visible: shown && title !== "" && !suppressed
    property bool shown: false
    onTriggerHoveredChanged: {
        if (triggerHovered && title !== "" && !suppressed) {
            hideTimer.stop();
            showTimer.restart();
        } else {
            showTimer.stop();
            hideTimer.restart();
        }
    }
    onSuppressedChanged: {
        if (suppressed) {
            showTimer.stop();
            shown = false;
        } else if (triggerHovered) {
            showTimer.restart();
        }
    }
    Timer {
        id: showTimer
        interval: root.delay
        onTriggered: root.shown = root.triggerHovered && !root.suppressed
    }
    Timer {
        id: hideTimer
        interval: 70
        onTriggered: root.shown = false
    }
    ChromeSurface {
        anchors.fill: parent
        padding: root.pad
        lean: 0.06
        Column {
            id: textColumn
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            spacing: 2
            Text {
                id: titleText
                text: root.title.toUpperCase()
                color: Theme.text
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsSmall
                font.weight: Theme.weightDisplay
                font.italic: true
                renderType: Text.NativeRendering
            }
            Text {
                id: statusText
                visible: text !== ""
                text: root.status
                color: Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                renderType: Text.NativeRendering
            }
            Text {
                id: hintText
                visible: text !== ""
                text: root.hint.toUpperCase()
                color: Theme.accent
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.weight: Font.Bold
                font.letterSpacing: 0.8
                renderType: Text.NativeRendering
            }
        }
    }
 }
@@ -1,6 +1,5 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "root:/config"
 // Hover-driven panel that hangs off a bar item. Opens on a short dwell, stays
@@ -17,6 +16,8 @@ PopupWindow {
    property int fromEdge: Edges.Bottom
    property real contentWidth: Theme.popoutWidth
    property real contentHeight: 200
    property Item initialFocusItem: null
    property bool remappingPinned: false
    // Extra surface around the content so the entry overshoot and glow are not
    // clipped by the window edge.
@@ -25,6 +26,8 @@ PopupWindow {
    default property alias body: contentHolder.data
    readonly property bool wantsOpen: triggerHovered || panelHover.hovered || pinned
    readonly property bool pending: showTimer.running || remapTimer.running || remappingPinned
    readonly property bool detailActive: shown || pending
    signal dismissedFully()
@@ -52,13 +55,15 @@ PopupWindow {
    implicitHeight: contentHeight + bleed * 2
    color: "transparent"
    visible: shown
    grabFocus: pinned && shown
    property bool shown: false
    onWantsOpenChanged: {
        if (wantsOpen) {
            hideTimer.stop();
-            showTimer.restart();
+            if (!pinned && !remappingPinned)
                showTimer.restart();
        } else {
            showTimer.stop();
            hideTimer.restart();
@@ -71,29 +76,17 @@ PopupWindow {
        onTriggered: root.open()
    }
-    // A pinned popout ignores hover by design, which left it with exactly one
+    onVisibleChanged: {
-    // way out: another click on the same bar item that opened it. Moving the
+        if (!visible && shown)
-    // pointer away did nothing, so a panel opened by a click — the notification
+            dismissImmediately();
    // history, most often — simply stayed on screen. Click anywhere else and
    // the compositor drops the grab, which unpins it and hands it back to the
    // hover rules.
    //
    // The grab can only take hold once the surface is mapped; asked for in the
    // same tick as `shown`, Hyprland clears it immediately.
    Timer {
        id: grabDelay
        interval: 60
        running: root.pinned && root.shown
    }
-
+    onClosed: {
-    HyprlandFocusGrab {
+        if (remappingPinned) {
-        active: root.pinned && root.shown && !grabDelay.running
+            remappingPinned = false;
-        windows: [root]
+            remapTimer.restart();
-
+        } else if (shown || pinned) {
-        // A click on the trigger itself also clears the grab, but that click is
+            dismissImmediately();
-        // the pill's own toggle — unpinning here as well would cancel it out and
+        }
        // the panel would never close from its own button.
        onCleared: if (!root.triggerHovered) root.pinned = false
    }
    Timer {
@@ -103,19 +96,91 @@ PopupWindow {
    }
    function open() {
        PopupCoordinator.claim(root);
        exitAnim.stop();
        shown = true;
        enterAnim.restart();
    }
    // Focus policy is fixed at map time. A hover-visible passive surface must
    // therefore unmap before returning as a click-owned keyboard popup.
    function openPinned() {
        showTimer.stop();
        hideTimer.stop();
        PopupCoordinator.claim(root);
        if (shown) {
            remappingPinned = true;
            shown = false;
            enterAnim.stop();
            exitAnim.stop();
            pinned = true;
        } else {
            pinned = true;
            open();
            focusTimer.restart();
        }
    }
    function togglePinned() {
        if (pinned) {
            pinned = false;
            dismiss();
        } else {
            openPinned();
        }
    }
    function dismiss() {
-        if (!shown) return;
+        if (!shown) {
            if (pinned || pending)
                dismissImmediately();
            return;
        }
        pinned = false;
        PopupCoordinator.release(root);
        enterAnim.stop();
        exitAnim.restart();
    }
    function dismissImmediately() {
        showTimer.stop();
        hideTimer.stop();
        remapTimer.stop();
        focusTimer.stop();
        enterAnim.stop();
        exitAnim.stop();
        remappingPinned = false;
        pinned = false;
        shown = false;
        contentHolder.opacity = 0;
        contentHolder.scale = 0.94;
        contentHolder.x = root.bleed;
        contentHolder.y = root.bleed;
        PopupCoordinator.release(root);
        root.dismissedFully();
    }
    Timer {
        id: remapTimer
        interval: 0
        onTriggered: {
            root.open();
            focusTimer.restart();
        }
    }
    Timer {
        id: focusTimer
        interval: 0
        onTriggered: {
            const target = root.initialFocusItem || contentHolder;
            target.forceActiveFocus(Qt.TabFocusReason);
        }
    }
    Item {
        id: contentHolder
        focus: root.pinned
        x: root.bleed
        y: root.bleed
        width: root.contentWidth
@@ -144,6 +209,13 @@ PopupWindow {
            id: panelHover
            enabled: root.shown
        }
        Keys.onEscapePressed: event => {
            if (root.pinned) {
                event.accepted = true;
                root.dismissImmediately();
            }
        }
    }
    ParallelAnimation {
@@ -183,6 +255,7 @@ PopupWindow {
            root.pinned = false;
            contentHolder.x = root.bleed;
            contentHolder.y = root.bleed;
            PopupCoordinator.release(root);
            root.dismissedFully();
        }
    }
@@ -0,0 +1,30 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 // One transient surface at a time. Without a shared owner, a quick sweep over
 // the bar/rail can leave several independently animated windows mapped on top
 // of each other. Every coordinated surface exposes dismiss().
 Singleton {
    property var active: null
    function claim(surface: var) {
        if (active && active !== surface) {
            const previous = active;
            active = null;
            previous.dismissImmediately();
        }
        active = surface;
    }
    function release(surface: var) {
        if (active === surface)
            active = null;
    }
    function dismissAll() {
        if (active)
            active.dismiss();
    }
 }
@@ -54,6 +54,46 @@ Singleton {
    // resolves to crimson. Pointing at a thing lights it up red.
    readonly property color glow: root.accent
    // ------------------------------------------------ semantic treatments
    // These tokens describe interaction meaning, not new palette entries. Each
    // state is composed only from Takemi's black, white, crimson, and neutral
    // surfaces so callers do not invent one-off state colors.
    readonly property color treatmentRestFill: root.surface
    readonly property color treatmentRestMark: root.outline
    readonly property color treatmentRestText: root.text
    readonly property color treatmentHoverFill: root.surface
    readonly property color treatmentHoverMark: root.accent
    readonly property color treatmentHoverText: root.text
    readonly property color treatmentFocusFill: root.text
    readonly property color treatmentFocusMark: root.ink
    readonly property color treatmentFocusText: root.ink
    readonly property color treatmentSelectedFill: root.treatmentFocusFill
    readonly property color treatmentSelectedMark: root.treatmentFocusMark
    readonly property color treatmentSelectedText: root.treatmentFocusText
    readonly property color treatmentActiveFill: root.surface
    readonly property color treatmentActiveMark: root.accent
    readonly property color treatmentActiveText: root.text
    // Crimson carries destructive/error meaning. Text and keylines stay black:
    // black-on-crimson is 5.70:1, while small white-on-crimson is only 3.68:1.
    readonly property color treatmentDestructiveFill: root.accent
    readonly property color treatmentDestructiveMark: root.ink
    readonly property color treatmentDestructiveText: root.ink
    readonly property color treatmentErrorFill: root.treatmentDestructiveFill
    readonly property color treatmentErrorMark: root.treatmentDestructiveMark
    readonly property color treatmentErrorText: root.treatmentDestructiveText
    readonly property color treatmentUrgentFill: root.surface
    readonly property color treatmentUrgentMark: root.accent
    readonly property color treatmentUrgentText: root.text
    readonly property color treatmentDisabledFill: root.surface
    readonly property color treatmentDisabledMark: root.outline
    readonly property color treatmentDisabledText: root.muted
    // Retired hues. Aliases only — do not introduce new uses.
    //
    // `warn` used to be accentSoft, which put a washed-out pink-red on screen
@@ -20,6 +20,8 @@ Item {
    property string status: ""
    property bool failed: false
    property bool busy: pam.active
    readonly property real uiScale: Math.max(0.72, Math.min(1.15,
        Math.min(width / 1920, height / 1080)))
    Rectangle {
        anchors.fill: parent
@@ -137,7 +139,9 @@ Item {
        anchors.top: parent.top
        anchors.topMargin: parent.height * 0.2
        spacing: Theme.padM
-        width: 300
+        width: Math.min(300, parent.width * 0.28)
        scale: surface.uiScale
        transformOrigin: Item.TopRight
        RailRow {
            width: parent.width
@@ -181,8 +185,10 @@ Item {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: parent.height * 0.14
-        width: 460
+        width: Math.min(460, parent.width - Theme.padXL * 2)
        height: 150
        scale: surface.uiScale
        transformOrigin: Item.Bottom
        transform: Translate { id: shakeShift }
@@ -206,7 +212,7 @@ Item {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: prompt.bottom
            anchors.topMargin: Theme.padL
-            width: 380
+            width: Math.min(380, authBlock.width - Theme.padL * 2)
            height: 56
            lean: 0.12
            chop: 16
@@ -320,7 +326,7 @@ Item {
            Text {
                anchors.verticalCenter: parent.verticalCenter
-                text: Quickshell.env("USER") || "narl"
+                text: Quickshell.env("USER") || "USER"
                color: Theme.muted
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsSmall
@@ -349,7 +355,7 @@ Item {
        id: pam
        config: "hyprlock"
-        user: Quickshell.env("USER") || "narl"
+        user: Quickshell.env("USER") || "USER"
        onPamMessage: {
            if (pam.responseRequired) pam.respond(surface.entry);
@@ -26,9 +26,33 @@ PanelWindow {
    exclusionMode: ExclusionMode.Ignore
    readonly property bool open: Actions.powerMenuOpen
    property int selectedAction: 0
    function focusSelectedAction(): void {
        const entry = buttonRepeater.itemAt(root.selectedAction);
        if (entry && entry.children.length > 0)
            entry.children[0].forceActiveFocus(Qt.TabFocusReason);
    }
    function moveSelection(delta: int): void {
        root.selectedAction = (root.selectedAction + delta + root.actionModel.length)
            % root.actionModel.length;
        root.focusSelectedAction();
    }
    readonly property var actionModel: [
        { label: "Lock",      icon: "󰌾", danger: false, act: "lock" },
        { label: "Suspend",   icon: "󰤄", danger: false, act: "suspend" },
        { label: "Hibernate", icon: "󰒲", danger: false, act: "hibernate" },
        { label: "Log Out",   icon: "󰗽", danger: true,  act: "logout" },
        { label: "Reboot",    icon: "󰜉", danger: true,  act: "reboot" },
        { label: "Shut Down", icon: "󰐥", danger: true,  act: "shutdown" }
    ]
    onOpenChanged: {
        if (open) {
            PopupCoordinator.dismissAll();
            selectedAction = 0;
            openAnim.restart();
        } else {
            closeAnim.restart();
@@ -122,14 +146,7 @@ PanelWindow {
        Repeater {
            id: buttonRepeater
-            model: [
+            model: root.actionModel
                { label: "Lock",      icon: "󰌾", danger: false, act: "lock" },
                { label: "Suspend",   icon: "󰤄", danger: false, act: "suspend" },
                { label: "Hibernate", icon: "󰒲", danger: false, act: "hibernate" },
                { label: "Log Out",   icon: "󰗽", danger: true,  act: "logout" },
                { label: "Reboot",    icon: "󰜉", danger: true,  act: "reboot" },
                { label: "Shut Down", icon: "󰐥", danger: true,  act: "shutdown" }
            ]
            // A carrier item owns the staggered slide so the button keeps its
            // own hover transform.
@@ -155,14 +172,19 @@ PanelWindow {
                ]
                P5Button {
                    id: actionButton
                    anchors.fill: parent
                    text: entry.modelData.label
                    icon: entry.modelData.icon
                    destructive: entry.modelData.danger
                    selected: root.selectedAction === entry.index
                    accent: entry.modelData.danger ? Theme.accent : Theme.primary
                    lean: Theme.skew
                    lunge: -10
                    onClicked: root.invoke(entry.modelData.act)
                    onHoveredChanged: if (hovered) root.selectedAction = entry.index
                    onActiveFocusChanged: if (actionButton.activeFocus) root.selectedAction = entry.index
                    Keys.forwardTo: [keyController]
                }
                // Staggered entry, one button after another.
@@ -211,7 +233,7 @@ PanelWindow {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 40
        anchors.horizontalCenter: parent.horizontalCenter
-        text: "ESC TO CANCEL"
+        text: "↑ ↓  SELECT     ENTER  CONFIRM     ESC  CANCEL"
        color: Theme.muted
        font.family: Theme.fontMono
        font.pixelSize: Theme.fsMicro
@@ -234,9 +256,26 @@ PanelWindow {
    // Escape closes. The layer takes exclusive focus while open.
    Item {
        id: keyController
        anchors.fill: parent
        focus: root.open
        Keys.onEscapePressed: Actions.closePowerMenu()
        Keys.onPressed: event => {
            if (!root.open) return;
            if (event.key === Qt.Key_Up || event.key === Qt.Key_K) {
                root.moveSelection(-1);
                event.accepted = true;
            } else if (event.key === Qt.Key_Down || event.key === Qt.Key_J) {
                root.moveSelection(1);
                event.accepted = true;
            } else if (keyController.activeFocus
                       && !event.isAutoRepeat
                       && (event.key === Qt.Key_Return || event.key === Qt.Key_Enter
                           || event.key === Qt.Key_Space)) {
                root.invoke(root.actionModel[root.selectedAction].act);
                event.accepted = true;
            }
        }
    }
    ParallelAnimation {
@@ -0,0 +1,72 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Secondary input band with an explicit mute action.
 Item {
    id: root
    implicitHeight: 68
    Row {
        anchors.left: parent.left
        anchors.right: muteButton.left
        anchors.rightMargin: Theme.padM
        anchors.verticalCenter: muteButton.verticalCenter
        spacing: Theme.padS
        Icon {
            anchors.verticalCenter: parent.verticalCenter
            text: Audio.micIcon
            color: Audio.micMuted ? Theme.accent : Theme.text
            font.pixelSize: Theme.fsLarge
        }
        Column {
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width - Theme.fsLarge - Theme.padS
            spacing: 2
            Text {
                width: parent.width
                text: Audio.sourceName
                elide: Text.ElideRight
                color: Theme.text
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsSmall
                font.weight: Font.DemiBold
                font.italic: true
                renderType: Text.NativeRendering
            }
            Text {
                text: Audio.micMuted ? "MUTED" : Audio.micPercent + "%"
                color: Audio.micMuted ? Theme.accent : Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.weight: Font.Bold
                renderType: Text.NativeRendering
            }
        }
    }
    P5Button {
        id: muteButton
        anchors.right: parent.right
        anchors.top: parent.top
        text: Audio.micMuted ? "Unmute input" : "Mute input"
        icon: Audio.micIcon
        onClicked: Audio.toggleMicMute()
    }
    P5Slider {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        value: Audio.micVolume
        accent: Theme.primary
        enabled: !Audio.micMuted
        onMoved: v => Audio.setMicVolume(v)
    }
 }
@@ -0,0 +1,71 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Dominant current-output readout for AudioPopout.
 Item {
    implicitHeight: 112
    Text {
        id: outputPercent
        anchors.left: parent.left
        anchors.top: parent.top
        text: Audio.volumePercent + "%"
        color: Audio.muted ? Theme.muted : Theme.text
        font.family: Theme.fontDisplay
        font.pixelSize: Theme.fsHuge
        font.weight: Theme.weightDisplay
        font.italic: true
        renderType: Text.NativeRendering
    }
    Column {
        anchors.left: outputPercent.right
        anchors.leftMargin: Theme.padL
        anchors.right: parent.right
        anchors.verticalCenter: outputPercent.verticalCenter
        spacing: 3
        Text {
            text: "CURRENT OUTPUT"
            color: Theme.accent
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.weight: Font.Bold
            font.letterSpacing: 2
            renderType: Text.NativeRendering
        }
        Text {
            width: parent.width
            text: Audio.sinkName
            elide: Text.ElideRight
            color: Theme.subtext
            font.family: Theme.fontDisplay
            font.pixelSize: Theme.fsSmall
            font.weight: Font.DemiBold
            font.italic: true
            renderType: Text.NativeRendering
        }
        Text {
            text: Audio.muted ? "MUTED" : "LIVE"
            color: Audio.muted ? Theme.accent : Theme.text
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.weight: Font.Bold
            renderType: Text.NativeRendering
        }
    }
    P5Slider {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        value: Audio.volume
        accent: Theme.accent
        enabled: !Audio.muted
        onMoved: v => Audio.setVolume(v)
    }
 }
@@ -5,12 +5,15 @@ import "root:/config"
 import "root:/components"
 import "root:/services"
-// Output and input levels, the sink picker, and a per-app mixer.
+// Audio is the expressive vertical slice for rail popouts: output owns the
 // composition, input is a clear secondary band, and application streams recede
 // into a compact mixer below both device controls.
 Popout {
    id: root
-    contentWidth: 360
+    contentWidth: 400
    contentHeight: surface.implicitContentHeight + Theme.padM * 2
    initialFocusItem: outputMuteButton
    PopoutSurface {
        id: surface
@@ -39,29 +42,38 @@ Popout {
            spacing: Theme.padM
            // ------------------------------------------------------- output
-            LevelRow {
+            AudioOutputHero {
                width: parent.width
-                icon: Audio.icon
+            }
-                label: "Output"
+
-                readout: Audio.muted ? "MUTED" : Audio.volumePercent + "%"
+            Column {
-                value: Audio.volume
+                width: parent.width
-                muted: Audio.muted
+                spacing: Theme.padS
-                accent: Theme.primary
+
-                onMoved: v => Audio.setVolume(v)
+                P5Button {
-                onToggled: Audio.toggleMute()
+                    id: outputMuteButton
                    width: parent.width
                    text: Audio.muted ? "Unmute output" : "Mute output"
                    icon: Audio.icon
                    onClicked: Audio.toggleMute()
                }
                P5Button {
                    width: parent.width
                    text: "Open audio mixer"
                    icon: "󰕾"
                    onClicked: Actions.openAudioSettings()
                }
            }
            // -------------------------------------------------------- input
-            LevelRow {
+            SectionRule {
                width: parent.width
                text: "Input"
            }
            AudioInputBand {
                width: parent.width
                icon: Audio.micIcon
                label: "Input"
                readout: Audio.micMuted ? "MUTED" : Audio.micPercent + "%"
                value: Audio.micVolume
                muted: Audio.micMuted
                accent: Theme.blue
                onMoved: v => Audio.setMicVolume(v)
                onToggled: Audio.toggleMicMute()
            }
            SectionRule {
@@ -98,19 +110,14 @@ Popout {
                    icon: "󰝚"
                    label: Audio.streamName(modelData)
                    readout: modelData.audio ? Math.round(modelData.audio.volume * 100) + "%" : ""
-                    value: modelData.audio?.volume ?? 0
+                    value: modelData.audio ? modelData.audio.volume : 0
-                    muted: modelData.audio?.muted ?? false
+                    muted: modelData.audio ? modelData.audio.muted : false
                    accent: Theme.glow
                    onMoved: v => { if (modelData.audio) modelData.audio.volume = v; }
                    onToggled: { if (modelData.audio) modelData.audio.muted = !modelData.audio.muted; }
                }
            }
            P5Button {
                text: "Mixer"
                icon: "󰕾"
                onClicked: Actions.openAudioSettings()
            }
        }
    }
@@ -178,7 +185,7 @@ Popout {
            anchors.right: parent.right
            value: levelRow.value
            accent: levelRow.accent
-            enabledControl: !levelRow.muted
+            enabled: !levelRow.muted
            onMoved: v => levelRow.moved(v)
        }
    }
@@ -155,26 +155,26 @@ Popout {
                TransportButton {
                    glyph: "󰒮"
-                    enabledControl: Media.canGoPrevious
+                    enabled: Media.canGoPrevious
                    onClicked: Media.previous()
                }
                TransportButton {
                    glyph: Media.playing ? "󰏤" : "󰐊"
                    primary: true
-                    enabledControl: Media.hasPlayer
+                    enabled: Media.hasPlayer
                    onClicked: Media.playPause()
                }
                TransportButton {
                    glyph: "󰒭"
-                    enabledControl: Media.canGoNext
+                    enabled: Media.canGoNext
                    onClicked: Media.next()
                }
                TransportButton {
                    glyph: "󰐒"
-                    enabledControl: Media.hasPlayer
+                    enabled: Media.hasPlayer
                    onClicked: Media.raise()
                }
            }
@@ -196,7 +196,7 @@ Popout {
                id: elapsed
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
-                text: Media.timeString(Media.position)
+                text: Media.positionSupported ? Media.timeString(Media.position) : "--:--"
                color: Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
@@ -207,7 +207,7 @@ Popout {
                id: total
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
-                text: Media.timeString(Media.length)
+                text: Media.lengthSupported ? Media.timeString(Media.length) : "LIVE"
                color: Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
@@ -222,7 +222,7 @@ Popout {
                anchors.verticalCenter: parent.verticalCenter
                value: Media.progress
                accent: Theme.accent
-                enabledControl: Media.canSeek
+                enabled: Media.canSeek
                onMoved: v => Media.seekTo(v)
            }
        }
@@ -238,7 +238,7 @@ Popout {
            Repeater {
                model: Media.players
-                Item {
+                FocusScope {
                    id: chip
                    required property var modelData
@@ -246,21 +246,44 @@ Popout {
                    implicitWidth: chipLabel.implicitWidth + Theme.padM
                    implicitHeight: 22
                    focusPolicy: chip.enabled ? Qt.TabFocus : Qt.NoFocus
                    function activate(): void {
                        if (chip.enabled)
                            Media.select(chip.modelData);
                    }
                    function activateFromKey(event): void {
                        if (!event.isAutoRepeat)
                            chip.activate();
                    }
                    Skew {
                        anchors.fill: parent
-                        color: chip.current
+                        color: !chip.enabled
-                            ? Theme.alpha(Theme.primary, 0.22)
+                            ? Theme.treatmentDisabledFill
-                            : (chipHover.hovered ? Theme.alpha(Theme.primary, 0.1) : "transparent")
+                            : (chip.activeFocus
-                        borderWidth: 1
+                            ? Theme.treatmentFocusFill
-                        borderColor: chip.current ? Theme.primary : Theme.alpha(Theme.outline, 0.7)
+                            : (chip.current
                                ? Theme.alpha(Theme.primary, 0.22)
                                : (chipHover.hovered ? Theme.alpha(Theme.primary, 0.1) : "transparent")))
                        borderWidth: chip.activeFocus ? Theme.stroke : 1
                        borderColor: !chip.enabled
                            ? Theme.treatmentDisabledMark
                            : (chip.activeFocus
                            ? Theme.treatmentFocusMark
                            : (chip.current ? Theme.primary : Theme.alpha(Theme.outline, 0.7)))
                    }
                    Text {
                        id: chipLabel
                        anchors.centerIn: parent
                        text: chip.modelData.identity
-                        color: chip.current ? Theme.text : Theme.muted
+                        color: !chip.enabled
                            ? Theme.treatmentDisabledText
                            : (chip.activeFocus
                            ? Theme.treatmentFocusText
                            : (chip.current ? Theme.text : Theme.muted))
                        font.family: Theme.fontMono
                        font.pixelSize: Theme.fsMicro
                        renderType: Text.NativeRendering
@@ -268,39 +291,57 @@ Popout {
                    HoverHandler {
                        id: chipHover
                        enabled: chip.enabled
                        cursorShape: Qt.PointingHandCursor
                    }
                    TapHandler {
-                        onTapped: Media.select(chip.modelData)
+                        enabled: chip.enabled
                        onTapped: chip.activate()
                    }
                    Keys.onReturnPressed: event => chip.activateFromKey(event)
                    Keys.onEnterPressed: event => chip.activateFromKey(event)
                    Keys.onSpacePressed: event => chip.activateFromKey(event)
                }
            }
        }
    }
-    component TransportButton: Item {
+    component TransportButton: FocusScope {
        id: tb
        property string glyph: ""
        property bool primary: false
        property bool enabledControl: true
        signal clicked()
        implicitWidth: primary ? 38 : 30
        implicitHeight: primary ? 38 : 30
        focusPolicy: tb.enabled ? Qt.TabFocus : Qt.NoFocus
        function activate(): void {
            if (tb.enabled)
                tb.clicked();
        }
        function activateFromKey(event): void {
            if (!event.isAutoRepeat)
                tb.activate();
        }
        Skew {
            anchors.fill: parent
            color: {
-                if (!tb.enabledControl) return "transparent";
+                if (!tb.enabled) return "transparent";
                if (tb.activeFocus) return Theme.treatmentFocusFill;
                if (tbHover.hovered) return tb.primary ? Theme.accent : Theme.alpha(Theme.primary, 0.22);
                return tb.primary ? Theme.alpha(Theme.primary, 0.18) : "transparent";
            }
-            borderWidth: tb.primary ? 2 : 1
+            borderWidth: tb.activeFocus ? Theme.stroke * 2 : (tb.primary ? 2 : 1)
-            borderColor: tb.enabledControl
+            borderColor: tb.enabled
-                ? (tbHover.hovered ? Theme.text : Theme.alpha(Theme.primary, 0.6))
+                ? (tb.activeFocus
                    ? Theme.treatmentFocusMark
                    : (tbHover.hovered ? Theme.text : Theme.alpha(Theme.primary, 0.6)))
                : Theme.alpha(Theme.outline, 0.4)
            Behavior on color {
@@ -313,26 +354,31 @@ Popout {
            text: tb.glyph
            font.pixelSize: tb.primary ? Theme.fsTitle : Theme.fsLarge
            color: {
-                if (!tb.enabledControl) return Theme.alpha(Theme.muted, 0.5);
+                if (!tb.enabled) return Theme.alpha(Theme.muted, 0.5);
                if (tb.activeFocus) return Theme.treatmentFocusText;
                if (tbHover.hovered && tb.primary) return Theme.text;
                return Theme.primary;
            }
        }
-        scale: tbHover.hovered && tb.enabledControl ? 1.12 : 1.0
+        scale: tbHover.hovered && tb.enabled ? 1.12 : 1.0
        Behavior on scale {
            NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
        }
        HoverHandler {
            id: tbHover
-            enabled: tb.enabledControl
+            enabled: tb.enabled
            cursorShape: Qt.PointingHandCursor
        }
        TapHandler {
-            enabled: tb.enabledControl
+            enabled: tb.enabled
-            onTapped: tb.clicked()
+            onTapped: tb.activate()
        }
        Keys.onReturnPressed: event => tb.activateFromKey(event)
        Keys.onEnterPressed: event => tb.activateFromKey(event)
        Keys.onSpacePressed: event => tb.activateFromKey(event)
    }
 }
@@ -6,12 +6,13 @@ import "root:/components"
 // own, so P5Panel's default content property stays usable by callers.
 P5Panel {
    property color tone: Theme.primary
    property bool textured: false
    fill: Theme.mantle
    fillOpacity: 0.97
    border: Theme.alpha(tone, 0.75)
    borderWidth: Theme.stroke
-    halftone: true
+    halftone: textured
    halftoneColor: tone
    halftoneOpacity: 0.06
    sheen: true
@@ -53,6 +53,7 @@ PopupWindow {
    function open() {
        if (!menuHandle) return;
        PopupCoordinator.claim(root);
        closeAnim.stop();
        shown = true;
        openAnim.restart();
@@ -68,6 +69,21 @@ PopupWindow {
        if (shown) close(); else open();
    }
    // Shared name used by PopupCoordinator for every transient surface.
    function dismiss() {
        close();
    }
    function dismissImmediately() {
        openAnim.stop();
        closeAnim.stop();
        shown = false;
        holder.opacity = 0;
        holder.scale = 0.94;
        holder.x = root.bleed;
        PopupCoordinator.release(root);
    }
    // The grab can only take hold once the popup is actually mapped. Asked for
    // in the same tick as `shown`, Hyprland has no surface to hand it and
    // clears it immediately — which closed the menu the instant it opened.
@@ -145,6 +161,7 @@ PopupWindow {
        onFinished: {
            root.shown = false;
            holder.x = root.bleed;
            PopupCoordinator.release(root);
        }
    }
 }
@@ -188,7 +188,7 @@ Column {
                    anchors.verticalCenter: parent.verticalCenter
                    width: row.entry.hasChildren ? 18 : 0
                    visible: row.entry.hasChildren
-                    text: row.expanded ? "" : ""
+                    text: row.expanded ? "󰅀" : "󰅂"
                    color: row.hovered ? Theme.ink : Theme.subtext
                    font.family: Theme.fontIcon
                    font.pixelSize: Theme.fsMicro
@@ -34,11 +34,14 @@ Singleton {
    readonly property bool canGoNext: active?.canGoNext ?? false
    readonly property bool canGoPrevious: active?.canGoPrevious ?? false
-    readonly property bool canSeek: (active?.canSeek ?? false) && (active?.lengthSupported ?? false)
+    readonly property bool positionSupported: active?.positionSupported ?? false
    readonly property bool lengthSupported: active?.lengthSupported ?? false
    readonly property bool hasTimeline: positionSupported && lengthSupported && length > 0
    readonly property bool canSeek: (active?.canSeek ?? false) && hasTimeline
-    readonly property real length: active?.lengthSupported ? (active?.length ?? 0) : 0
+    readonly property real length: lengthSupported ? (active?.length ?? 0) : 0
-    readonly property real position: active?.positionSupported ? (active?.position ?? 0) : 0
+    readonly property real position: positionSupported ? (active?.position ?? 0) : 0
-    readonly property real progress: length > 0 ? Math.min(1, position / length) : 0
+    readonly property real progress: hasTimeline ? Math.min(1, position / length) : 0
    readonly property string label: {
        if (!hasPlayer) return "Nothing playing";
@@ -53,8 +56,8 @@ Singleton {
    // MPRIS position is pull-only; tick it so the seek bar moves.
    Timer {
-        interval: 500
+        interval: 1000
-        running: root.playing && root.canSeek
+        running: root.playing && root.positionSupported
        repeat: true
        onTriggered: if (root.active) root.active.positionChanged()
    }
@@ -85,9 +88,11 @@ Singleton {
        return "󰝚";
    }
-    function timeString(micros: real): string {
+    // Quickshell exposes MPRIS position/length in seconds (with millisecond
-        if (!(micros > 0)) return "0:00";
+    // precision), not the protocol's raw microseconds.
-        const total = Math.floor(micros / 1000000);
+    function timeString(seconds: real): string {
        if (!(seconds > 0)) return "0:00";
        const total = Math.floor(seconds);
        const m = Math.floor(total / 60);
        const s = total % 60;
        if (m >= 60) {
Author	SHA1	Message	Date
nvrl	a868f50ab7	improvements	2026-08-11 17:35:26 +02:00
nvrl	39f925cb58	updated design	2026-08-11 16:34:09 +02:00