fixed some bugs

fix(qs,fluxo) performance fix for repaints
chore(hypr) migrated to lua confs
2026-08-15 02:11:03 +02:00 · 2026-08-12 20:18:56 +02:00 · 2026-08-12 18:05:43 +02:00 · 2026-08-11 17:35:26 +02:00 · 2026-08-11 16:34:09 +02:00 · 2026-08-11 11:29:04 +02:00
103 changed files with 5205 additions and 1530 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.
 ```
@@ -12,7 +12,10 @@ WINIT_X11_SCALE_FACTOR = "1.0"
 position = "None"
 dynamic_padding = true
 decorations = "None"
-opacity = 0.9
+
 ## Fully opaque, no blur. Persona surfaces are flat ink on flat ground —
 ## glass and translucency read as a different design language entirely.
 opacity = 1.0
 blur = false
 startup_mode = "Windowed"
 dynamic_title = true
@@ -24,10 +27,11 @@ decorations_theme_variant = "None"
 columns = 82
 lines = 24
-## Blank space added around the window in pixels.
+## Blank space added around the window in pixels. Roomier than the old 3/0 —
 ## the text needs to sit inside the crimson border, not against it.
 [window.padding]
-x = 3
+x = 12
-y = 0
+y = 8
 ## SCROLLING ------------------------------------------------------
 [scrolling]
@@ -103,7 +107,7 @@ ipc_socket = true
 ## GENERAL --------------------------------------------------------
 ## Import additional configuration files.
-import = ["~/.config/alacritty/colors.toml", "~/.config/alacritty/fonts.toml"]
+import = ["~/.config/alacritty/takemi.toml", "~/.config/alacritty/fonts.toml"]
 [[keyboard.bindings]]
 key = "Return"
@@ -0,0 +1,86 @@
 ## Takemi — matched to ~/.config/quickshell/config/Theme.qml and
 ## ~/.config/hypr/modules/takemi.conf.
 ##
 ## Near-black ground, white text, crimson as the only saturated colour. The
 ## sixteen ANSI slots still have to be told apart by syntax highlighters, so the
 ## non-crimson hues survive — but every one of them is pulled down and
 ## desaturated so nothing competes with the accent. Nothing here is neon.
 [colors.primary]
 background       = "#0a0a0c"
 foreground       = "#ffffff"
 dim_foreground   = "#6b6b70"
 bright_foreground = "#ffffff"
 ## Crimson block cursor, black text punched out of it.
 [colors.cursor]
 text   = "#000000"
 cursor = "#ff2d40"
 [colors.vi_mode_cursor]
 text   = "#000000"
 cursor = "#ffffff"
 ## Selection is a solid crimson block — the same "active" signal the shell uses.
 [colors.selection]
 text       = "#000000"
 background = "#ff2d40"
 [colors.search.matches]
 foreground = "#000000"
 background = "#c8c8ce"
 [colors.search.focused_match]
 foreground = "#000000"
 background = "#ff2d40"
 [colors.footer_bar]
 foreground = "#000000"
 background = "#c8c8ce"
 [colors.hints.start]
 foreground = "#000000"
 background = "#ff2d40"
 [colors.hints.end]
 foreground = "#000000"
 background = "#c8c8ce"
 ## Red is the accent, exactly. The rest are muted enough to sit behind it.
 [colors.normal]
 black   = "#14141a"
 red     = "#ff2d40"
 green   = "#7f9b6a"
 yellow  = "#d6a24a"
 blue    = "#6f7d99"
 magenta = "#c0566d"
 cyan    = "#7f9aa0"
 white   = "#c8c8ce"
 [colors.bright]
 black   = "#3a3a44"
 red     = "#ff6b78"
 green   = "#9bb886"
 yellow  = "#f0c070"
 blue    = "#8d9bb8"
 magenta = "#e07a8e"
 cyan    = "#9db8bd"
 white   = "#ffffff"
 [colors.dim]
 black   = "#0f0f13"
 red     = "#8f1826"
 green   = "#5c704d"
 yellow  = "#9c7635"
 blue    = "#515c70"
 magenta = "#8c3f4f"
 cyan    = "#5c7075"
 white   = "#6b6b70"
 [[colors.indexed_colors]]
 index = 16
 color = "#ff6b78"
 [[colors.indexed_colors]]
 index = 17
 color = "#ffffff"
@@ -68,7 +68,7 @@ update_ms = 1000
 #* Processes sorting, "pid" "program" "arguments" "threads" "user" "memory" "cpu lazy" "cpu direct",
 #* "cpu lazy" sorts top process over time (easier to follow), "cpu direct" updates top process directly.
-proc_sorting = "memory"
+proc_sorting = "cpu direct"
 #* Reverse sorting order, True or False.
 proc_reversed = false
@@ -1,49 +0,0 @@
 # This file was created by fish when upgrading to version 4.3, to migrate
 # theme variables from universal to global scope.
 # Don't edit this file, as it will be written by the web-config tool (`fish_config`).
 # To customize your theme, delete this file and see
 #     help interactive#syntax-highlighting
 # or
 #     man fish-interactive | less +/^SYNTAX.HIGHLIGHTING
 # for appropriate commands to add to ~/.config/fish/config.fish instead.
 # See also the release notes for fish 4.3.0 (run `help relnotes`).
 set --global fish_color_autosuggestion 6c7086
 set --global fish_color_cancel f38ba8
 set --global fish_color_command 89b4fa
 set --global fish_color_comment 7f849c
 set --global fish_color_cwd f9e2af
 set --global fish_color_cwd_root red
 set --global fish_color_end fab387
 set --global fish_color_error f38ba8
 set --global fish_color_escape eba0ac
 set --global fish_color_gray 6c7086
 set --global fish_color_history_current --bold
 set --global fish_color_host 89b4fa
 set --global fish_color_host_remote a6e3a1
 set --global fish_color_keyword f38ba8
 set --global fish_color_match --background=brblue
 set --global fish_color_normal cdd6f4
 set --global fish_color_operator f5c2e7
 set --global fish_color_option a6e3a1
 set --global fish_color_param f2cdcd
 set --global fish_color_quote a6e3a1
 set --global fish_color_redirection f5c2e7
 set --global fish_color_search_match --background=313244
 set --global fish_color_selection --background=313244
 set --global fish_color_status f38ba8
 set --global fish_color_user 94e2d5
 set --global fish_color_valid_path --underline
 set --global fish_pager_color_background
 set --global fish_pager_color_completion cdd6f4
 set --global fish_pager_color_description 6c7086
 set --global fish_pager_color_prefix f5c2e7
 set --global fish_pager_color_progress 6c7086
 set --global fish_pager_color_secondary_background
 set --global fish_pager_color_secondary_completion
 set --global fish_pager_color_secondary_description
 set --global fish_pager_color_secondary_prefix
 set --global fish_pager_color_selected_background
 set --global fish_pager_color_selected_completion
 set --global fish_pager_color_selected_description
 set --global fish_pager_color_selected_prefix
@@ -0,0 +1,50 @@
 # Takemi — matched to ~/.config/quickshell/config/Theme.qml,
 # ~/.config/alacritty/takemi.toml and ~/.config/nvim/lua/takemi.lua.
 #
 # Replaces the catppuccin fish_frozen_theme.fish that fish 4.3 generated on
 # upgrade. Same content as themes/Takemi.theme — that copy exists only so
 # `fish_config` can preview it; this one is what actually loads.
 #
 # Note that `fish_config` writing a theme from the web UI will recreate
 # fish_frozen_theme.fish, which sorts before this file and so would lose.
 set --global fish_color_normal ffffff
 set --global fish_color_command ffffff --bold
 set --global fish_color_keyword ff2d40
 set --global fish_color_param c8c8ce
 set --global fish_color_option 8d9bb8
 set --global fish_color_quote 7f9b6a
 set --global fish_color_escape 9db8bd
 set --global fish_color_operator c8c8ce
 set --global fish_color_redirection ff6b78
 set --global fish_color_end 6b6b70
 set --global fish_color_comment 6b6b70 --italics
 set --global fish_color_error ff2d40 --bold
 set --global fish_color_cancel ff2d40
 set --global fish_color_gray 6b6b70
 set --global fish_color_autosuggestion 4a4a52
 set --global fish_color_selection 000000 --background=ff2d40
 set --global fish_color_search_match 000000 --background=c8c8ce
 set --global fish_color_match 000000 --background=ff2d40
 set --global fish_color_history_current --bold
 set --global fish_color_valid_path --underline
 set --global fish_color_cwd ffffff --bold
 set --global fish_color_cwd_root ff2d40 --bold
 set --global fish_color_user c8c8ce
 set --global fish_color_host ffffff --bold
 set --global fish_color_host_remote ff6b78
 set --global fish_color_status ff2d40
 set --global fish_pager_color_progress 6b6b70 --background=141418
 set --global fish_pager_color_background
 set --global fish_pager_color_prefix ffffff --bold
 set --global fish_pager_color_completion c8c8ce
 set --global fish_pager_color_description 6b6b70
 set --global fish_pager_color_secondary_background --background=0d0d10
 set --global fish_pager_color_secondary_completion c8c8ce
 set --global fish_pager_color_secondary_description 6b6b70
 set --global fish_pager_color_secondary_prefix ffffff --bold
 set --global fish_pager_color_selected_background --background=ff2d40
 set --global fish_pager_color_selected_completion 000000
 set --global fish_pager_color_selected_description 000000
 set --global fish_pager_color_selected_prefix 000000 --bold
@@ -1,9 +1,13 @@
 function fish_prompt --description 'Write out the prompt'
        set -l last_status $status
        set -l normal (set_color normal)
-        set -l status_color (set_color brgreen)
+        # White at rest, crimson when the last command failed — the prompt
        # arrow is the one place the shell says "something is wrong", so it is
        # the one place that earns the accent. Was brgreen/brpurple, which
        # spent colour on states that are not worth any.
        set -l status_color (set_color ffffff)
        set -l cwd_color (set_color $fish_color_cwd)
-        set -l vcs_color (set_color brpurple)
+        set -l vcs_color (set_color 6b6b70)
        set -l prompt_status ""
        # Since we display the prompt on a new line allow the directory names to be longer.
@@ -0,0 +1,52 @@
 # name: 'Takemi'
 # url: 'local — matched to ~/.config/quickshell/config/Theme.qml'
 # preferred_background: 0a0a0c
 # Same rules as the shell and the editor: white does the work, crimson is the
 # only saturated colour and it means either "load-bearing" (keyword, prefix,
 # selected) or "wrong" (error, status, root). Everything else is grey, or a hue
 # pulled far enough down that it reads as grey with a temperature.
 #
 # Kept in sync by hand with conf.d/takemi_theme.fish, which is what actually
 # takes effect at startup. This file exists so `fish_config` can preview it.
 fish_color_normal ffffff
 fish_color_command ffffff --bold
 fish_color_keyword ff2d40
 fish_color_param c8c8ce
 fish_color_option 8d9bb8
 fish_color_quote 7f9b6a
 fish_color_escape 9db8bd
 fish_color_operator c8c8ce
 fish_color_redirection ff6b78
 fish_color_end 6b6b70
 fish_color_comment 6b6b70 --italics
 fish_color_error ff2d40 --bold
 fish_color_cancel ff2d40
 fish_color_gray 6b6b70
 fish_color_autosuggestion 4a4a52
 fish_color_selection 000000 --background=ff2d40
 fish_color_search_match 000000 --background=c8c8ce
 fish_color_match 000000 --background=ff2d40
 fish_color_history_current --bold
 fish_color_valid_path --underline
 fish_color_cwd ffffff --bold
 fish_color_cwd_root ff2d40 --bold
 fish_color_user c8c8ce
 fish_color_host ffffff --bold
 fish_color_host_remote ff6b78
 fish_color_status ff2d40
 fish_pager_color_progress 6b6b70 --background=141418
 fish_pager_color_background
 fish_pager_color_prefix ffffff --bold
 fish_pager_color_completion c8c8ce
 fish_pager_color_description 6b6b70
 fish_pager_color_secondary_background --background=0d0d10
 fish_pager_color_secondary_completion c8c8ce
 fish_pager_color_secondary_description 6b6b70
 fish_pager_color_secondary_prefix ffffff --bold
 fish_pager_color_selected_background --background=ff2d40
 fish_pager_color_selected_completion 000000
 fish_pager_color_selected_description 000000
 fish_pager_color_selected_prefix 000000 --bold
@@ -5,6 +5,13 @@
 # strings. The Quickshell config (~/.config/quickshell/services/Sys.qml) parses
 # them and does its own formatting. The previous human-readable Waybar formats
 # are preserved in config.toml.waybar-bak.
 #
 # Quickshell only consumes cpu, mem, gpu, disk, net, sys and power from fluxo.
 # Everything else it gets natively — Quickshell.Services.Mpris, .Pipewire,
 # .UPower, .Notifications, Quickshell.Bluetooth — and Brightness.qml reads
 # sysfs directly. Those fluxo modules are therefore switched off below: left on,
 # they held a libpulse context, a BlueZ D-Bus poll every 2 s and an MPRIS
 # marquee ticker firing twice a second, all feeding a bar that does not exist.
 [general]
 menu_command = "fuzzel --dmenu --prompt \"$FLUXO_PROMPT\""
@@ -44,12 +51,18 @@ format = "{mount}|{used:.1}|{total:.1}"
 format = "{percentage}"
 [audio]
 # Quickshell.Services.Pipewire drives Audio.qml; leaving this on kept a
 # libpulse context and its callbacks alive for nothing.
 enabled = false
 format_sink_unmuted = "{name} {volume:>3}% <span size='large'>{icon}</span>"
 format_sink_muted = "{name} <span size='large'> {icon}</span>"
 format_source_unmuted = "{name} {volume:>3}% <span size='large'>{icon}</span>"
 format_source_muted = "{name} <span size='large'>{icon}</span>"
 [bt]
 # Quickshell.Bluetooth drives Bt.qml. This module polled BlueZ over D-Bus every
 # 2 seconds regardless.
 enabled = false
 format_plugin = "{alias} [{left}|{right}] {anc} <span size='large'>󰂰</span>"
 format_connected = "{alias} <span size='large'>󰂰</span>"
 format_disconnected = "Disconnected <span size='large'>󰂯</span>"
@@ -60,9 +73,14 @@ format_active = "<span size='large'>󰊖</span>"
 format_inactive = "<span size='large'></span>"
 [mpris]
 # Quickshell.Services.Mpris drives Media.qml, and MediaPill/MediaPopout do their
 # own eliding and scrolling. This module was the single most expensive thing in
 # the daemon: `scroll` woke a ticker every `scroll_speed` ms to advance a marquee
 # offset for a Waybar that is not running, and each tick drove the signaler.
 enabled = false
 format = "{artist} - {title}"
 max_length = 20
-scroll = true 
+scroll = true
 scroll_speed = 500
 scroll_separator = " /// "
@@ -81,10 +99,14 @@ enabled = false
 format = "{layout}"
 [backlight]
-enable = true
+# Was `enable = true` — not a key fluxo reads, so this section was silently
 # running on its default of enabled. Brightness.qml reads
 # /sys/class/backlight directly, so the D-Bus watcher here is redundant.
 enabled = false
 format = "{percentage}"
 [dnd]
-enabled = true
+# Notifs.qml owns do-not-disturb via Quickshell.Services.Notifications.
 enabled = false
 format_dnd = "<span size='large'>󰂛</span>"
 format_normal = "<span size='large'>󰂚</span>"
@@ -1,8 +1,9 @@
-include=~/.config/fuzzel/catppuccin-fuzzel/themes/catppuccin-mocha/red.ini
+include=~/.config/fuzzel/takemi.ini
 include=~/.config/fuzzel/catppuccin-fuzzel/themes/catppuccin-mocha/red.ini
 [main]
-font=FiraCode Nerd Font:size=14
+# JetBrainsMono to match Theme.fontMono, so the launcher and the bar are
 # visibly the same typeface.
 font=JetBrainsMono Nerd Font:size=14
 terminal=alacritty
 dpi-aware=no
@@ -12,17 +13,7 @@ horizontal-pad=20
 vertical-pad=20
 inner-pad=10
-prompt="   " 
+prompt="   "
 show-actions=no
 layer=overlay
 [border]
 radius=12
 width=2
 [colors]
 background=1e1e2e80
 # Matches the background so the counter becomes invisible for a cleaner look
 counter=1e1e2eff 
 border=f38ba8ff
@@ -0,0 +1,37 @@
 # Takemi — matched to ~/.config/quickshell/config/Theme.qml,
 # ~/.config/alacritty/takemi.toml and ~/.config/nvim/lua/takemi.lua.
 #
 # Near-black ground, white text, crimson as the only saturated colour. The
 # selection is a solid crimson block with the text punched out of it in black,
 # which is the same "active" signal the bar and the terminal use.
 [colors]
 # Flat and fully opaque. The Persona surfaces are ink on ground — translucency
 # and blur read as a different design language, so the alpha stays at ff.
 background=0a0a0cff
 text=c8c8ceff
 input=ffffffff
 placeholder=6b6b70ff
 prompt=ff2d40ff
 # Fuzzy-match characters in an unselected row: crimson, since they are the
 # reason the row is on screen at all.
 match=ff2d40ff
 selection=ff2d40ff
 selection-text=000000ff
 # White rather than black, so the matched characters still read as marked once
 # the row is already crimson.
 selection-match=ffffffff
 # Deliberately the same as the background — hides the match counter.
 counter=0a0a0cff
 border=ff2d40ff
 [border]
 # Square. Every corner in this style is either a right angle or a hard chamfer;
 # nothing in the shell is rounded.
 radius=0
 # Theme.stroke.
 width=2
@@ -0,0 +1,10 @@
 {
  "$schema": "https://raw.githubusercontent.com/LuaLS/vscode-lua/master/setting/schema.json",
  "runtime.version": "Lua 5.4",
  "workspace.library": [
    "/usr/share/hypr/stubs"
  ],
  "diagnostics.globals": [
    "hl"
  ]
 }
@@ -1,18 +0,0 @@
 # narls hyprland dotfiles
 source = ~/.config/hypr/modules/monitors.conf
 source = ~/.config/hypr/modules/programs.conf
 source = ~/.config/hypr/modules/autostart.conf
 source = ~/.config/hypr/modules/env.conf
 source = ~/.config/hypr/modules/theme.conf
 source = ~/.config/hypr/modules/input.conf
 source = ~/.config/hypr/modules/keybinds.conf
 source = ~/.config/hypr/modules/window_rules.conf
@@ -0,0 +1,36 @@
 -- narls hyprland dotfiles
 --
 -- Hyprland 0.55+ reads this file instead of hyprland.conf. Every part lives in
 -- lua/, and each require() is its own scope: an error in one file does not stop
 -- the others from loading.
 --
 -- Order matters only in two places: palette must exist before anything paints
 -- with it, and monitors must exist before the lid handler binds to them. Both
 -- are handled by the requires below, top to bottom.
 -- what the desktop looks like
 require("lua/palette")
 require("lua/look")
 require("lua/animations")
 -- what it runs on
 require("lua/env")
 require("lua/monitors")
 require("lua/lid")
 require("lua/input")
 -- what it runs
 require("lua/apps")
 require("lua/autostart")
 -- how windows behave
 require("lua/rules/windows")
 require("lua/rules/layers")
 -- how it is driven
 require("lua/binds/apps")
 require("lua/binds/windows")
 require("lua/binds/workspaces")
 require("lua/binds/shell")
 require("lua/binds/media")
 require("lua/binds/capture")
@@ -1,6 +1,6 @@
 wallpaper {
 	monitor =
-	path = ~/.wallpapers/takemi_2.jpg
+	path = ~/.wallpapers/takemi_1.jpg
 	fit_mode = cover
 }
@@ -1 +0,0 @@
@@ -0,0 +1,47 @@
 -- https://wiki.hypr.land/Configuring/Advanced-and-Cool/Animations/
 --
 -- Quick and clean. Motion should get out of the way, not perform.
 --
 -- An earlier pass overdid it: a 1.56 overshoot on every window, an 88% popin
 -- scale, and a borderangle looping forever so the focused border was in
 -- constant motion. The bounce is dialled back to a hint, the popin barely
 -- scales, and the border angle does not animate at all.
 hl.config({
    animations = {
        enabled = true,
    },
 })
 -- ------------------------------------------------------------------- curves
 hl.curve("snap", { type = "bezier", points = { { 0.16, 1.00 }, { 0.30, 1.00 } } })
 hl.curve("overshoot", { type = "bezier", points = { { 0.34, 1.12 }, { 0.64, 1.00 } } })
 hl.curve("hard", { type = "bezier", points = { { 0.55, 0.00 }, { 0.90, 0.35 } } })
 hl.curve("linear", { type = "bezier", points = { { 0, 0 }, { 1, 1 } } })
 -- --------------------------------------------------------------------- tree
 -- speed is in ds (1ds = 100ms). Unset leaves inherit their parent.
 hl.animation({ leaf = "global", enabled = true, speed = 4, bezier = "snap" })
 hl.animation({ leaf = "border", enabled = true, speed = 5, bezier = "snap" })
 hl.animation({ leaf = "windows", enabled = true, speed = 4, bezier = "snap" })
 hl.animation({ leaf = "windowsIn", enabled = true, speed = 4, bezier = "overshoot", style = "popin 96%" })
 hl.animation({ leaf = "windowsOut", enabled = true, speed = 2.6, bezier = "hard", style = "popin 97%" })
 hl.animation({ leaf = "windowsMove", enabled = true, speed = 3.6, bezier = "snap" })
 hl.animation({ leaf = "fade", enabled = true, speed = 3, bezier = "snap" })
 hl.animation({ leaf = "fadeIn", enabled = true, speed = 2.4, bezier = "snap" })
 hl.animation({ leaf = "fadeOut", enabled = true, speed = 1.8, bezier = "hard" })
 hl.animation({ leaf = "fadeSwitch", enabled = true, speed = 2, bezier = "snap" })
 hl.animation({ leaf = "fadeShadow", enabled = true, speed = 3, bezier = "snap" })
 hl.animation({ leaf = "fadeDim", enabled = true, speed = 2.4, bezier = "snap" })
 hl.animation({ leaf = "layers", enabled = true, speed = 3, bezier = "snap" })
 hl.animation({ leaf = "layersIn", enabled = true, speed = 3, bezier = "snap", style = "slide" })
 hl.animation({ leaf = "layersOut", enabled = true, speed = 2, bezier = "hard", style = "slide" })
 hl.animation({ leaf = "workspaces", enabled = true, speed = 3, bezier = "snap", style = "slidevert" })
 hl.animation({ leaf = "workspacesIn", enabled = true, speed = 3, bezier = "snap", style = "slidevert" })
 hl.animation({ leaf = "workspacesOut", enabled = true, speed = 2.4, bezier = "hard", style = "slidevert" })
 hl.animation({ leaf = "specialWorkspace", enabled = true, speed = 3, bezier = "snap", style = "slidevert" })
@@ -0,0 +1,16 @@
 -- The programs the binds reach for. Exported so lua/binds/* name them once.
 return {
    terminal = "alacritty",
    fileManager = "nautilus",
    menu = "fuzzel",
    -- clipboard history picker
    clipboard = "cliphist list | fuzzel --dmenu | cliphist decode | wl-copy",
    -- pdf picker
    pdfs = "pdfs-prompt --dmenu --menu 'fuzzel --dmenu --width 60'",
    -- bluetooth menu
    bluetooth = "fluxo bt menu",
 }
@@ -0,0 +1,25 @@
 -- https://wiki.hypr.land/Configuring/Basics/Autostart/
 --
 -- Everything that used to be exec-once now runs off the start event.
 hl.on("hyprland.start", function()
    -- Takemi shell — bar, popouts, notifications, OSD, power menu and lock
    -- screen. Config lives in ~/.config/quickshell. It owns
    -- org.freedesktop.Notifications, so dunst must stay masked
    -- (systemctl --user mask dunst.service).
    hl.exec_cmd("uwsm app -- qs")
    hl.exec_cmd("uwsm app -- nm-applet --indicator")
    hl.exec_cmd("uwsm app -- hyprpaper")
    -- clipboard history, text and images
    hl.exec_cmd("wl-paste --type text --watch cliphist store")
    hl.exec_cmd("wl-paste --type image --watch cliphist store")
    -- hl.exec_cmd("uwsm app -- nextcloud --background")
    -- hl.exec_cmd("uwsm app -- rclone mount google_drive: ~/gdrive")
    -- hl.exec_cmd("uwsm app -- protonvpn-app")
    -- hl.exec_cmd("uwsm app -- /usr/bin/discord --enable-features=UseOzonePlatform --ozone-platform=wayland --start-minimized")
    -- hl.exec_cmd("uwsm app -- /usr/lib/xdg-desktop-portal-hyprland")
    -- hl.exec_cmd("sleep 5 && ~/.config/hypr/scripts/replay-ctrl.sh start")
 end)
@@ -0,0 +1,14 @@
 -- Launching things.
 -- https://wiki.hypr.land/Configuring/Basics/Binds/
 local apps = require("lua/apps")
 local mod = "SUPER" -- Sets "Windows" key as main modifier
 hl.bind(mod .. " + RETURN", hl.dsp.exec_cmd(apps.terminal), { description = "terminal" })
 hl.bind(mod .. " + E", hl.dsp.exec_cmd(apps.fileManager), { description = "file manager" })
 hl.bind(mod .. " + SPACE", hl.dsp.exec_cmd(apps.menu), { description = "app launcher" })
 hl.bind(mod .. " + M", hl.dsp.exec_cmd(apps.pdfs), { description = "pdf picker" })
 hl.bind(mod .. " + B", hl.dsp.exec_cmd(apps.bluetooth), { description = "bluetooth menu" })
 -- Clipboard history. On release so the picker does not inherit the held ALT.
 hl.bind("ALT + m", hl.dsp.exec_cmd(apps.clipboard), { release = true, description = "clipboard history" })
@@ -0,0 +1,19 @@
 -- Screenshots, replay buffer, webcam. Everything that records something.
 local scripts = os.getenv("HOME") .. "/.config/hypr/scripts/"
 -- ------------------------------------------------------------- screenshots
 -- PRINT selects a region, CTRL grabs the focused window, SHIFT saves to disk
 -- instead of the clipboard.
 hl.bind("PRINT", hl.dsp.exec_cmd('grim -g "$(slurp)" - | wl-copy'))
 hl.bind("SHIFT + PRINT", hl.dsp.exec_cmd('grim -g "$(slurp)" ~/Pictures/Screenshots/$(date +\'%Y-%m-%d_%H-%M-%S\').png'))
 hl.bind("CTRL + PRINT", hl.dsp.exec_cmd(scripts .. "screenshot_window.sh copy"))
 hl.bind("CTRL + SHIFT + PRINT", hl.dsp.exec_cmd(scripts .. "screenshot_window.sh save"))
 -- ------------------------------------------------------- replay and camera
 -- On release, so the shortcut is not caught mid-chord.
 local on_release = { release = true }
 hl.bind("ALT + z", hl.dsp.exec_cmd(scripts .. "replay-ctrl.sh toggle"), on_release)
 hl.bind("ALT + SHIFT + z", hl.dsp.exec_cmd(scripts .. "replay-ctrl.sh save"), on_release)
 hl.bind("ALT + SHIFT + c", hl.dsp.exec_cmd(scripts .. "droidcam-ctrl.sh toggle"), on_release)
@@ -0,0 +1,20 @@
 -- Laptop multimedia keys: volume, mic, brightness, transport.
 -- `locked` keeps them working over the lock screen.
 -- Volume and brightness repeat when held.
 local held = { locked = true, repeating = true }
 hl.bind("XF86AudioRaiseVolume", hl.dsp.exec_cmd("fluxo vol up 5"), held)
 hl.bind("XF86AudioLowerVolume", hl.dsp.exec_cmd("fluxo vol down 5"), held)
 hl.bind("XF86AudioMute", hl.dsp.exec_cmd("fluxo vol mute"), held)
 hl.bind("XF86AudioMicMute", hl.dsp.exec_cmd("fluxo mic mute"), held)
 hl.bind("XF86MonBrightnessUp", hl.dsp.exec_cmd("brightnessctl s +10%"), held)
 hl.bind("XF86MonBrightnessDown", hl.dsp.exec_cmd("brightnessctl s 10%-"), held)
 -- Transport. Requires playerctl.
 local locked = { locked = true }
 hl.bind("XF86AudioNext", hl.dsp.exec_cmd("playerctl next"), locked)
 hl.bind("XF86AudioPrev", hl.dsp.exec_cmd("playerctl previous"), locked)
 hl.bind("XF86AudioPlay", hl.dsp.exec_cmd("playerctl play-pause"), locked)
 hl.bind("XF86AudioPause", hl.dsp.exec_cmd("playerctl play-pause"), locked)
@@ -0,0 +1,13 @@
 -- Takemi shell (quickshell) IPC. Config lives in ~/.config/quickshell.
 local mod = "SUPER"
 local function shell(call, opts)
    hl.bind(opts.key, hl.dsp.exec_cmd("qs ipc call shell " .. call), { description = opts.description })
 end
 shell("lock", { key = mod .. " + CTRL + L", description = "lock screen" })
 shell("power", { key = mod .. " + P", description = "power menu" })
 shell("toggleDnd", { key = mod .. " + SHIFT + N", description = "toggle do not disturb" })
 shell("clearNotifications", { key = mod .. " + CTRL + SHIFT + N", description = "clear notifications" })
 shell("reloadConfig", { key = mod .. " + SHIFT + R", description = "reload shell config" })
@@ -0,0 +1,30 @@
 -- Focus, layout and groups — everything that acts on the window under you.
 local mod = "SUPER"
 -- ------------------------------------------------------------------- window
 hl.bind(mod .. " + SHIFT + Q", hl.dsp.window.close())
 hl.bind(mod .. " + V", hl.dsp.window.float())
 hl.bind(mod .. " + F", hl.dsp.window.fullscreen())
 -- hl.bind(mod .. " + t", hl.dsp.layout("togglesplit")) -- dwindle
 -- -------------------------------------------------------------------- focus
 local directions = { h = "l", l = "r", k = "u", j = "d" }
 for key, direction in pairs(directions) do
    hl.bind(mod .. " + " .. key, hl.dsp.focus({ direction = direction }))
    hl.bind(mod .. " + SHIFT + " .. key:upper(), hl.dsp.window.move({ direction = direction, group_aware = true }))
 end
 -- ------------------------------------------------------------------- groups
 hl.bind(mod .. " + n", hl.dsp.group.toggle())
 hl.bind("ALT + Tab", hl.dsp.group.next())
 -- hl.bind("ALT + Tab", hl.dsp.group.prev())
 -- -------------------------------------------------------------------- mouse
 hl.bind(mod .. " + mouse:272", hl.dsp.window.drag(), { mouse = true })
 hl.bind(mod .. " + mouse:273", hl.dsp.window.resize(), { mouse = true })
 -- ----------------------------------------------------------------- keyboard
 -- cycle keyboard layout (dvorak-intl <-> us-intl), see lua/input.lua
 hl.bind(mod .. " + ALT + SPACE", hl.dsp.exec_cmd("hyprctl switchxkblayout all next"))
@@ -0,0 +1,22 @@
 -- Workspaces, including the two scratchpads.
 local mod = "SUPER"
 -- Switch with mod + [0-9], move the active window with mod + SHIFT + [0-9].
 for i = 1, 10 do
    local key = i % 10 -- 10 maps to key 0
    hl.bind(mod .. " + " .. key, hl.dsp.focus({ workspace = i }))
    hl.bind(mod .. " + SHIFT + " .. key, hl.dsp.window.move({ workspace = i }))
 end
 -- Scroll through existing workspaces with mod + scroll
 hl.bind(mod .. " + mouse_down", hl.dsp.focus({ workspace = "e+1" }))
 hl.bind(mod .. " + mouse_up", hl.dsp.focus({ workspace = "e-1" }))
 -- Scratchpads: S holds anything virtual, D holds chat.
 local special = { S = "virtual", D = "discord" }
 for key, name in pairs(special) do
    hl.bind(mod .. " + " .. key, hl.dsp.workspace.toggle_special(name))
    hl.bind(mod .. " + SHIFT + " .. key, hl.dsp.window.move({ workspace = "special:" .. name }))
 end
@@ -0,0 +1,31 @@
 -- https://wiki.hypr.land/Configuring/Advanced-and-Cool/Environment-variables/
 --
 -- Note: this session starts through uwsm, which would rather have these in
 -- ~/.config/uwsm/env (toolkit, cursor, GPU) and ~/.config/uwsm/env-hyprland
 -- (HYPR*, AQ_*). They are kept here for now so the config stays self-contained.
 -- cursor
 hl.env("HYPRCURSOR_THEME", "Bibata-Modern-Classic")
 hl.env("HYPRCURSOR_SIZE", "24")
 hl.env("XCURSOR_THEME", "Bibata-Modern-Classic")
 hl.env("XCURSOR_SIZE", "24")
 -- session
 hl.env("XDG_CURRENT_DESKTOP", "Hyprland")
 -- toolkits
 hl.env("QT_QPA_PLATFORMTHEME", "qt6ct")
 hl.env("MOZ_ENABLE_WAYLAND", "1")
 hl.env("ELECTRON_OZONE_PLATFORM_HINT", "wayland")
 -- AMD graphics / video acceleration
 hl.env("LIBVA_DRIVER_NAME", "radeonsi")
 hl.env("VDPAU_DRIVER", "radeonsi")
 hl.env("AMD_VULKAN_ICD", "RADV")
 -- misc
 hl.env("EDITOR", "nvim")
 -- hl.env("INTEL_DEBUG", "noccs")
 -- hl.env("WLR_DRM_NO_ATOMIC", "1")
 -- hl.env("debug:full_cm_proto", "true")
@@ -0,0 +1,32 @@
 -- https://wiki.hypr.land/Configuring/Basics/Variables/#input
 hl.config({
    input = {
        -- index 0 = dvorak-intl (default), index 1 = us-intl
        -- switch with $mainMod ALT, SPACE (see lua/binds/windows.lua)
        kb_layout = "us,us",
        kb_variant = "dvorak-intl,intl",
        kb_model = "",
        kb_rules = "",
        kb_options = "caps:backspace",
        follow_mouse = 0,
        accel_profile = "flat",
        sensitivity = 0, -- -1.0 - 1.0, 0 means no modification.
        touchpad = {
            natural_scroll = false,
        },
    },
 })
 -- Layouts are inherited from the global input block so that layout switching
 -- applies to these too. Only bind resolution differs here.
 -- https://wiki.hypr.land/Configuring/Advanced-and-Cool/Devices/
 for _, name in ipairs({
    "at-translated-set-2-keyboard",
    "topre-corporation-hhkb-professional",
 }) do
    hl.device({ name = name, resolve_binds_by_sym = true })
 end
@@ -0,0 +1,129 @@
 -- Laptop lid handling.
 --
 -- One rule, applied from several triggers:
 --
 --     panel off  <=>  lid is shut AND something else is plugged in
 --
 -- Both halves are re-checked every time, so the session can never end up with
 -- zero outputs. Undocking with the lid shut brings the panel back; booting
 -- alone after a docked shutdown just works, because nothing about the previous
 -- session is remembered.
 --
 -- That last part is the fix for the old design: scripts/lid_handler.sh wrote a
 -- lid_state.conf that got sourced on the next start, so a laptop that was shut
 -- while docked came up believing it still had an external display and blanked
 -- its own panel. Lid state now comes from the kernel instead, and the external
 -- check is a live one.
 local monitors = require("lua/monitors")
 -- ------------------------------------------------------------- reading state
 -- The kernel's own view of the hinge. Present on this machine as
 -- /proc/acpi/button/lid/LID/state; the device name differs per vendor, hence
 -- the glob. Returns nil if the file is missing or unparseable.
 local function acpi_lid_closed()
    local pipe = io.popen("cat /proc/acpi/button/lid/*/state 2>/dev/null")
    if not pipe then
        return nil
    end
    local out = pipe:read("a") or ""
    pipe:close()
    if out:find("closed", 1, true) then
        return true
    elseif out:find("open", 1, true) then
        return false
    end
    return nil
 end
 -- Whatever the last switch event said, used only when ACPI has nothing for us.
 local last_switch_closed = nil
 local function lid_closed()
    local acpi = acpi_lid_closed()
    if acpi ~= nil then
        return acpi
    end
    return last_switch_closed == true
 end
 -- ---------------------------------------------------------------- reconciling
 -- nil until the first decision, so the first pass always applies.
 local panel_off = nil
 -- `ignore` is the output being unplugged: during monitor.removed it can still
 -- be listed, and counting it would keep the panel switched off.
 local function reconcile(ignore)
    -- Nothing enumerated yet means we are still parsing the config on a cold
    -- start. Leave the defaults from lua/monitors.lua alone and wait for the
    -- start event.
    local all = hl.get_monitors()
    if #all == 0 then
        return
    end
    local externals = 0
    for _, mon in ipairs(monitors.externals_present()) do
        if mon.name ~= ignore then
            externals = externals + 1
        end
    end
    local want_off = lid_closed() and externals > 0
    if want_off == panel_off then
        return
    end
    -- First decision of the session, and it agrees with what lua/monitors.lua
    -- already applied: nothing actually moved, so no daemon needs poking.
    local settled = panel_off == nil and not want_off
    panel_off = want_off
    if want_off then
        monitors.disable_builtin()
    else
        monitors.enable_builtin()
    end
    monitors.apply_external()
    -- Quickshell follows monitor hotplug by itself; only the wallpaper daemon
    -- needs a kick.
    if not settled then
        hl.exec_cmd("systemctl restart --user hyprpaper")
    end
 end
 -- ------------------------------------------------------------------ triggers
 hl.bind("switch:on:Lid Switch", function()
    last_switch_closed = true
    reconcile()
 end, { locked = true })
 hl.bind("switch:off:Lid Switch", function()
    last_switch_closed = false
    reconcile()
 end, { locked = true })
 -- Docking and undocking. Removal passes the output that is going away.
 hl.on("monitor.added", function()
    reconcile()
 end)
 hl.on("monitor.removed", function(mon)
    reconcile(mon and mon.name)
 end)
 -- Cold start: outputs are not up yet at this point, so this settles once they
 -- are. On `hyprctl reload` the start event does not fire again, but the
 -- monitor list is already populated, so run it inline too.
 hl.on("hyprland.start", function()
    reconcile()
 end)
 reconcile()
@@ -0,0 +1,102 @@
 -- Takemi — Persona 5 flavoured theme, matched to ~/.config/quickshell.
 --
 -- Everything static about how the desktop is painted. Motion lives next door
 -- in lua/animations.lua.
 local c = require("lua/palette")
 hl.config({
    -- https://wiki.hypr.land/Configuring/Basics/Variables/
    general = {
        gaps_in = 5,
        gaps_out = { top = 6, right = 8, bottom = 8, left = 8 },
        border_size = 2,
        col = {
            active_border = c.activeBorder,
            inactive_border = c.outline,
        },
        resize_on_border = false,
        -- Please see https://wiki.hypr.land/Configuring/Advanced-and-Cool/Tearing/
        -- before you turn this on
        allow_tearing = false,
        layout = "dwindle",
    },
    decoration = {
        -- Persona 5 has no rounded corners. Neither do we.
        rounding = 0,
        -- Fully opaque, both states. Flat ink on flat ground.
        active_opacity = 1.0,
        inactive_opacity = 1.0,
        shadow = {
            enabled = true,
            range = 18,
            render_power = 3,
            offset = { 0, 4 },
            color = "rgba(000000ee)",
            color_inactive = "rgba(00000088)",
        },
        -- Off. Blur is the signature of the glass-and-frost look, which is the
        -- opposite of what this theme is doing — every surface here is opaque,
        -- flat and hard-edged. With nothing translucent left to blur it also
        -- costs three render passes for no visible result.
        blur = {
            enabled = false,
        },
    },
    misc = {
        force_default_wallpaper = 0,
        disable_hyprland_logo = true,
        -- 0 = off, 1 = always, 2 = fullscreen only (G7 is a 240Hz VRR panel)
        vrr = 0,
        font_family = "FiraCode Nerd Font",
        background_color = c.base,
        focus_on_activate = true,
    },
    group = {
        col = {
            border_active = c.activeBorder,
            border_inactive = c.outline,
        },
        groupbar = {
            font_family = "JetBrainsMono Nerd Font",
            font_size = 11,
            height = 24,
            gradients = false,
            -- --- Active tab ---
            col = {
                active = c.accent,
                inactive = c.surface,
            },
            text_color = c.ink,
            -- --- Inactive tab ---
            text_color_inactive = c.muted,
            indicator_height = 3,
        },
    },
    -- https://wiki.hypr.land/Configuring/Layouts/Dwindle-Layout/
    dwindle = {
        preserve_split = true,
    },
    -- https://wiki.hypr.land/Configuring/Layouts/Master-Layout/
    master = {
        new_status = "master",
    },
 })
@@ -0,0 +1,62 @@
 -- https://wiki.hypr.land/Configuring/Basics/Monitors/
 --
 -- Declares every display once and exports the table, so lua/lid.lua can turn
 -- the laptop panel on and off without duplicating any of these numbers.
 --
 -- Load-time behaviour is deliberately dumb: the built-in panel is always
 -- enabled here. Deciding to switch it off needs to know whether anything else
 -- is actually plugged in, and during a cold start the outputs are not
 -- enumerated yet — so that decision lives in lua/lid.lua, which re-runs it on
 -- every lid and hotplug event. Worst case the panel flickers on for a moment
 -- while docked; the alternative failure is a black screen.
 local M = {}
 M.laptop = "eDP-1"
 M.external = {
    -- samsung home monitor. Other modes it has run at, if you ever need them:
    -- "2560x1440@144", "1920x1080@144", "1280x720@240"
    { output = "desc:Samsung Electric Company LC27G7xT H4ZRA00734", mode = "2560x1440@240", position = "-2560x0", scale = 1 },
 }
 -- `disabled = false` is load-bearing, not decoration. hl.monitor() merges into
 -- whatever rule the output already has, so a spec that simply omits the flag
 -- leaves an earlier `disabled = true` in place: the panel stays dark and the
 -- mode/position are applied to a monitor nobody can see. Opening the lid while
 -- docked hit exactly that.
 M.builtin = { output = M.laptop, mode = "1920x1080@60", position = "0x0", scale = 1, disabled = false }
 -- Anything not declared above falls back to Hyprland's auto placement, so a
 -- borrowed projector or a monitor at the office still lights up.
 function M.apply_external()
    for _, mon in ipairs(M.external) do
        hl.monitor(mon)
    end
 end
 function M.enable_builtin()
    hl.monitor(M.builtin)
 end
 function M.disable_builtin()
    hl.monitor({ output = M.laptop, disabled = true })
 end
 -- Every connected output except the laptop panel. Empty during early startup,
 -- which callers have to treat as "do not know yet", never as "nothing here".
 function M.externals_present()
    local found = {}
    for _, mon in ipairs(hl.get_monitors()) do
        if mon.name ~= M.laptop then
            table.insert(found, mon)
        end
    end
    return found
 end
 M.enable_builtin()
 M.apply_external()
 return M
@@ -0,0 +1,51 @@
 -- Takemi palette — kept in step with ~/.config/quickshell/config/Theme.qml.
 --
 -- Crimson, black, white. Nothing else carries hue.
 --
 -- Returned as a table, so every module that paints something does
 --   local c = require("lua/palette")
 -- and there is exactly one place the colours are written.
 local c = {}
 -- ----------------------------------------------------------------- THE KNOB
 -- The one colour in this setup. Change this line and the window borders,
 -- group indicators and focus states all recolour with it.
 --
 -- Keep it in step with `readonly property color accent` in
 -- ~/.config/quickshell/config/Theme.qml, which is what colours the shell.
 -- Those are the only two places the colour is written.
 c.accent = "rgb(ff2d40)"
 c.accentDim = "rgb(8f1826)"
 c.accentSoft = "rgb(ff6b78)"
 -- ------------------------------------------------------------------ neutrals
 c.ink = "rgb(000000)"
 c.base = "rgb(0a0a0c)"
 c.mantle = "rgb(0d0d10)"
 c.surface = "rgb(141418)"
 c.surfaceAlt = "rgb(1c1c22)"
 c.overlay = "rgb(26262e)"
 c.outline = "rgb(3a3a44)"
 c.text = "rgb(ffffff)"
 c.subtext = "rgb(c8c8ce)"
 c.muted = "rgb(6b6b70)"
 -- Retired hues, kept as aliases so existing references resolve. The shell has
 -- no teal any more — the wallpaper is the colour in the composition.
 c.primary = c.text
 c.primaryDim = "rgb(9a9aa2)"
 c.glow = c.accent
 c.blue = c.primaryDim
 c.deep = c.surfaceAlt
 c.warn = c.accentSoft
 c.ok = c.text
 -- Crimson into its own shadow, on the diagonal. The accent is the only hue
 -- here — a gradient into a second colour is what put blue in the border.
 c.activeBorder = { colors = { c.accent, c.accentDim }, angle = 135 }
 return c
@@ -0,0 +1,13 @@
 -- https://wiki.hypr.land/Configuring/Basics/Window-Rules/#layer-rules
 --
 -- Quickshell surfaces (bar, popouts, OSD) and the fuzzel launcher. Note
 -- decoration.blur is off in lua/look.lua, so these only take effect if blur is
 -- switched back on.
 for _, namespace in ipairs({ "bottom", "top", "launcher" }) do
    hl.layer_rule({
        match = { namespace = namespace },
        blur = true,
        ignore_alpha = 0.5,
    })
 end
@@ -0,0 +1,74 @@
 -- https://wiki.hypr.land/Configuring/Basics/Window-Rules/
 --
 -- Rules are evaluated top to bottom and the last match wins, so order matters.
 -- Named rules are all evaluated before anonymous ones.
 -- ==========================================
 -- MATCHERS
 -- ==========================================
 -- Dialogs and utility apps that should float in the center
 local DIALOG_TITLES = "^(Open Form|Open File|Select a File|Choose a file|Open Workspace|Choose Directory.*|Save As.*|Save File.*|branchdialog|pinentry-gtk-2|Confirm to replace files|File Operation Progress|Open Files.*|Anmelden.*|File Upload.*|TRuDI-Export laden)$"
 local DIALOG_CLASSES = "^(pavucontrol|blueman-manager|nm-connection-editor|org.pulseaudio.pavucontrol|io.narl.proton-drive-linux-prompt)$"
 local STEAM = "^(steam)$"
 local GAMESCOPE = "^(gamescope)$"
 -- ==========================================
 -- GENERAL & FIXES
 -- ==========================================
 -- Ignore maximize requests from apps. You'll probably like this.
 -- hl.window_rule({ match = { class = ".*" }, suppress_event = "maximize" })
 -- Fix some dragging issues with XWayland
 -- hl.window_rule({
 --     match = { class = "^$", title = "^$", xwayland = true, float = true, fullscreen = false, pin = false },
 --     no_focus = true,
 -- })
 hl.window_rule({ match = { class = "^$", title = "^$" }, no_blur = true })
 -- ==========================================
 -- FLOATING & CENTERED DIALOGS
 -- ==========================================
 -- Float, size, center, no blur — one rule per matcher instead of four.
 for _, match in ipairs({ { title = DIALOG_TITLES }, { class = DIALOG_CLASSES } }) do
    hl.window_rule({
        match = match,
        float = true,
        size = { 800, 600 },
        center = true,
        no_blur = true,
    })
 end
 -- ==========================================
 -- WORKSPACE ASSIGNMENTS
 -- ==========================================
 -- hl.window_rule({ match = { class = "^(firefox)$" }, workspace = "1" })
 -- hl.window_rule({ match = { class = "^(kitty)$" },   workspace = "2" })
 -- hl.window_rule({ match = { class = "^(Code)$" },    workspace = "3" })
 hl.window_rule({ match = { class = GAMESCOPE }, workspace = "1" })
 -- Special workspaces
 hl.window_rule({ match = { class = "^(Spotify|spotify)$" }, workspace = "special:virtual" })
 hl.window_rule({ match = { class = "^(discord|vesktop)$" }, workspace = "special:discord" })
 -- ==========================================
 -- STEAM & GAMING
 -- ==========================================
 -- hl.window_rule({ match = { class = STEAM, title = "^(Steam)$" }, workspace = "3 silent" })
 -- Fixed sizes for specific Steam windows
 hl.window_rule({ match = { class = STEAM, title = "^(Friends List)$" }, size = { 400, 800 } })
 hl.window_rule({ match = { class = STEAM, title = "^(Steam Settings)$" }, size = { 1000, 800 } })
 hl.window_rule({ match = { class = STEAM, title = "^(Add Non-Steam Game)$" }, size = { 1000, 800 } })
 -- Float and disable blur for Steam windows that aren't the main window
 hl.window_rule({
    match = { class = STEAM, title = "negative:^(Steam)$" },
    float = true,
    no_blur = true,
    -- center = true,
 })
 -- Allow tearing for games started with Gamescope
 hl.window_rule({ match = { class = GAMESCOPE }, immediate = true })
@@ -1,21 +0,0 @@
 # Autostart necessary processes (like notifications daemons, status bars, etc.)
 # Or execute your favorite apps at launch like this:
 # Takemi shell — bar, popouts, notifications, OSD, power menu and lock screen.
 # Config lives in ~/.config/quickshell. It owns org.freedesktop.Notifications,
 # so dunst must stay masked (systemctl --user mask dunst.service).
 exec-once = uwsm app -- qs
 # exec-once = uwsm app -- waybar
 # exec-once = uwsm app -- hyprpanel
 # exec-once = uwsm app -- nextcloud --background
 exec-once = uwsm app -- nm-applet --indicator
 # exec-once = uwsm app -- rclone mount google_drive: ~/gdrive
 # exec-once = uwsm app -- protonvpn-app
 exec-once = uwsm app -- hyprpaper
 # exec-once = uwsm app -- /usr/bin/discord --enable-features=UseOzonePlatform --ozone-platform=wayland --start-minimized &> /dev/null
 # exec-once = sleep 5 && ~/.config/hypr/scripts/replay-ctrl.sh start
 # exec-once = uwsm app -- /usr/lib/xdg-desktop-portal-hyprland
 exec-once = wl-paste --type text --watch cliphist store # Stores only text data
 exec-once = wl-paste --type image --watch cliphist store # Stores only image data
@@ -1,18 +0,0 @@
 # See https://wiki.hyprland.org/Configuring/Environment-variables/
 # env = INTEL_DEBUG,noccs
 # env = WLR_DRM_NO_ATOMIC,1
 env = HYPRCURSOR_THEME,Bibata-Modern-Classic
 env = HYPRCURSOR_SIZE,24
 env = XCURSOR_SIZE,24
 env = XCURSOR_THEME,Bibata-Modern-Classic
 env = XDG_CURRENT_DESKTOP,Hyprland
 # env = debug:full_cm_proto,true
 env = QT_QPA_PLATFORMTHEME,qt6ct
 env = LIBVA_DRIVER_NAME,radeonsi
 env = VDPAU_DRIVER,radeonsi
 env = AMD_VULKAN_ICD,RADV
 env = MOZ_ENABLE_WAYLAND,1
 env = ELECTRON_OZONE_PLATFORM_HINT,wayland
 env = EDITOR,nvim
@@ -1,32 +0,0 @@
 # https://wiki.hyprland.org/Configuring/Variables/#input
 input {
    # index 0 = dvorak-intl (default), index 1 = us-intl
    # switch with $mainMod ALT, SPACE (see keybinds.conf)
    kb_layout = us,us
    kb_variant = dvorak-intl,intl
    kb_model =
    kb_rules =
    kb_options = caps:backspace
    follow_mouse = 0
    accel_profile = flat
    sensitivity = 0 # -1.0 - 1.0, 0 means no modification.
    touchpad {
        natural_scroll = false
    }
 }
 # Layouts are inherited from the global input block so that layout
 # switching applies to these too. Only bind resolution differs here.
 device {
 	name = at-translated-set-2-keyboard
 	resolve_binds_by_sym = 1
 }
 device {
 	name = topre-corporation-hhkb-professional
 	resolve_binds_by_sym = 1
 }
@@ -1,103 +0,0 @@
 $mainMod = SUPER # Sets "Windows" key as main modifier
 bindl=,switch:on:Lid Switch,exec,~/.config/hypr/scripts/lid_handler.sh close
 bindl=,switch:off:Lid Switch,exec,~/.config/hypr/scripts/lid_handler.sh open
 bindr = ALT, m, exec, cliphist list | fuzzel --dmenu | cliphist decode | wl-copy
 bind = , PRINT, exec, grim -g "$(slurp)" - | wl-copy
 bind = SHIFT, PRINT, exec, grim -g "$(slurp)" ~/Pictures/Screenshots/$(date +'%Y-%m-%d_%H-%M-%S').png
 bind = CTRL, PRINT, exec, ~/.config/hypr/scripts/screenshot_window.sh copy
 bind = CTRL SHIFT, PRINT, exec, ~/.config/hypr/scripts/screenshot_window.sh save
 bindr = ALT SHIFT, z, exec, ~/.config/hypr/scripts/replay-ctrl.sh save
 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, B, exec, fluxo bt menu
 bind = $mainMod, RETURN, exec, $terminal
 bind = $mainMod SHIFT, Q, killactive,
 bind = $mainMod CTRL, L, exec, qs ipc call shell lock
 bind = $mainMod, E, exec, $fileManager
 bind = $mainMod, V, togglefloating,
 bind = $mainMod, F, fullscreen,
 bind = $mainMod, SPACE, exec, $menu
 bind = $mainMod, P, exec, qs ipc call shell power
 # Takemi shell
 bind = $mainMod SHIFT, N, exec, qs ipc call shell toggleDnd
 bind = $mainMod CTRL SHIFT, N, exec, qs ipc call shell clearNotifications
 bind = $mainMod SHIFT, R, exec, qs ipc call shell reloadConfig
 # cycle keyboard layout (dvorak-intl <-> us-intl)
 bind = $mainMod ALT, SPACE, exec, hyprctl switchxkblayout all next
 # bind = $mainMod, t, togglesplit, # dwindle
 bind = $mainMod, n, togglegroup
 # Move focus with mainMod + arrow keys
 bind = $mainMod, h, movefocus, l
 bind = $mainMod, l, movefocus, r
 bind = $mainMod, k, movefocus, u
 bind = $mainMod, j, movefocus, d
 bind = $mainMod SHIFT, H, movewindoworgroup, l
 bind = $mainMod SHIFT, L, movewindoworgroup, r
 bind = $mainMod SHIFT, K, movewindoworgroup, u
 bind = $mainMod SHIFT, J, movewindoworgroup, d
 # Switch workspaces with mainMod + [0-9]
 bind = $mainMod, 1, workspace, 1
 bind = $mainMod, 2, workspace, 2
 bind = $mainMod, 3, workspace, 3
 bind = $mainMod, 4, workspace, 4
 bind = $mainMod, 5, workspace, 5
 bind = $mainMod, 6, workspace, 6
 bind = $mainMod, 7, workspace, 7
 bind = $mainMod, 8, workspace, 8
 bind = $mainMod, 9, workspace, 9
 bind = $mainMod, 0, workspace, 10
 # Move active window to a workspace with mainMod + SHIFT + [0-9]
 bind = $mainMod SHIFT, 1, movetoworkspace, 1
 bind = $mainMod SHIFT, 2, movetoworkspace, 2
 bind = $mainMod SHIFT, 3, movetoworkspace, 3
 bind = $mainMod SHIFT, 4, movetoworkspace, 4
 bind = $mainMod SHIFT, 5, movetoworkspace, 5
 bind = $mainMod SHIFT, 6, movetoworkspace, 6
 bind = $mainMod SHIFT, 7, movetoworkspace, 7
 bind = $mainMod SHIFT, 8, movetoworkspace, 8
 bind = $mainMod SHIFT, 9, movetoworkspace, 9
 bind = $mainMod SHIFT, 0, movetoworkspace, 10
 # groups
 # bind = ALT, Tab, changegroupactive, prev
 bind = ALT, Tab, changegroupactive, next
 # Example special workspace (scratchpad)
 bind = $mainMod, S, togglespecialworkspace, virtual
 bind = $mainMod SHIFT, S, movetoworkspace, special:virtual
 bind = $mainMod, D, togglespecialworkspace, discord
 bind = $mainMod SHIFT, D, movetoworkspace, special:discord
 # Scroll through existing workspaces with mainMod + scroll
 bind = $mainMod, mouse_down, workspace, e+1
 bind = $mainMod, mouse_up, workspace, e-1
 # Move/resize windows with mainMod + LMB/RMB and dragging
 bindm = $mainMod, mouse:272, movewindow
 bindm = $mainMod, mouse:273, resizewindow
 # Laptop multimedia keys for volume and LCD brightness
 bindel = ,XF86AudioRaiseVolume, exec, fluxo vol up 5
 bindel = ,XF86AudioLowerVolume, exec, fluxo vol down 5
 bindel = ,XF86AudioMute, exec, fluxo vol mute
 bindel = ,XF86AudioMicMute, exec, fluxo mic mute
 bindel = ,XF86MonBrightnessUp, exec, brightnessctl s +10%
 bindel = ,XF86MonBrightnessDown, exec, brightnessctl s 10%-
 # Requires playerctl
 bindl = , XF86AudioNext, exec, playerctl next
 bindl = , XF86AudioPause, exec, playerctl play-pause
 bindl = , XF86AudioPlay, exec, playerctl play-pause
 bindl = , XF86AudioPrev, exec, playerctl previous
@@ -1,13 +0,0 @@
 # laptop screen
 monitor = eDP-1, 1920x1080@60, 0x0, 1
 # samsung home monitor
 # monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 1280x720@240, 0x0, 1
 monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@240, -2560x0, 1
 # monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@144, 0x0, 1
 # monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 1920x1080@144, 0x0, 1
 # monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@60, 0x0, 1
 # lid_state fallback
 source = ~/.config/hypr/lid_state.conf
@@ -1,7 +0,0 @@
 # See https://wiki.hyprland.org/Configuring/Keywords/
 # Set programs that you use
 $terminal = alacritty
 $fileManager = nautilus
 $menu = fuzzel
@@ -1,25 +0,0 @@
 # Takemi palette — kept in step with ~/.config/quickshell/config/Theme.qml.
 # Derived from ~/.wallpapers/takemi_2.jpg: cold teal over near-black, with
 # Persona 5 crimson as the accent.
 $base       = rgb(04070a)
 $mantle     = rgb(080e14)
 $surface    = rgb(0d1922)
 $surfaceAlt = rgb(14262f)
 $overlay    = rgb(1d3a47)
 $outline    = rgb(2b5567)
 $text       = rgb(e2f4f8)
 $subtext    = rgb(93b8c4)
 $muted      = rgb(587c8a)
 $primary    = rgb(34d3e6)
 $primaryDim = rgb(17879b)
 $glow       = rgb(8ef2ff)
 $blue       = rgb(3b8fd6)
 $deep       = rgb(0d4b5e)
 $accent     = rgb(ff2d40)
 $accentDim  = rgb(a8121f)
 $warn       = rgb(ffb03a)
 $ok         = rgb(35e08f)
@@ -1,140 +0,0 @@
 # Takemi — Persona 5 flavoured theme, matched to ~/.config/quickshell.
 source = ~/.config/hypr/modules/takemi.conf
 # Refer to https://wiki.hyprland.org/Configuring/Variables/
 # https://wiki.hyprland.org/Configuring/Variables/#general
 general {
    gaps_in = 5
    gaps_out = 6, 8, 8, 8
    border_size = 2
    # Teal into crimson, on the diagonal — the shell's two voices.
    col.active_border = $primary $accent 135deg
    col.inactive_border = $outline
    resize_on_border = false
    # Please see https://wiki.hyprland.org/Configuring/Tearing/ before you turn this on
    allow_tearing = false
    layout = dwindle
 }
 # https://wiki.hyprland.org/Configuring/Variables/#decoration
 decoration {
    # Persona 5 has no rounded corners. Neither do we.
    rounding = 0
    active_opacity = 1.0
    inactive_opacity = 0.96
    shadow {
        enabled = true
        range = 18
        render_power = 3
        offset = 0 4
        color = rgba(04070aee)
        color_inactive = rgba(04070a88)
    }
    # https://wiki.hyprland.org/Configuring/Variables/#blur
    blur {
        enabled = true
        size = 6
        passes = 3
        new_optimizations = true
        ignore_opacity = true
        xray = false
        noise = 0.02
        contrast = 1.1
        brightness = 0.85
        vibrancy = 0.25
        vibrancy_darkness = 0.3
        # The bar and its popouts do their own thing.
        popups = true
        popups_ignorealpha = 0.4
    }
 }
 # https://wiki.hyprland.org/Configuring/Animations/
 # Snappy with a little overshoot — nothing here should feel soft.
 animations {
    enabled = yes, please :)
    bezier = snap,      0.16, 1.00, 0.30, 1.00
    bezier = overshoot, 0.34, 1.56, 0.64, 1.00
    bezier = hard,      0.55, 0.00, 0.90, 0.35
    bezier = linear,    0, 0, 1, 1
    animation = global,        1, 4,    snap
    animation = border,        1, 6,    snap
    animation = borderangle,   1, 60,   linear, loop
    animation = windows,       1, 4,    overshoot
    animation = windowsIn,     1, 4.2,  overshoot, popin 88%
    animation = windowsOut,    1, 2.4,  hard,      popin 90%
    animation = windowsMove,   1, 3.6,  snap
    animation = fade,          1, 3,    snap
    animation = fadeIn,        1, 2.4,  snap
    animation = fadeOut,       1, 1.8,  hard
    animation = fadeSwitch,    1, 2,    snap
    animation = fadeShadow,    1, 3,    snap
    animation = fadeDim,       1, 2.4,  snap
    animation = layers,        1, 3,    overshoot
    animation = layersIn,      1, 3.4,  overshoot, slide
    animation = layersOut,     1, 2,    hard,      slide
    animation = workspaces,    1, 3.4,  overshoot, slidevert
    animation = workspacesIn,  1, 3.4,  overshoot, slidevert
    animation = workspacesOut, 1, 2.6,  hard,      slidevert
    animation = specialWorkspace, 1, 3.6, overshoot, slidevert
 }
 # See https://wiki.hyprland.org/Configuring/Master-Layout/ for more
 master {
    new_status = master
 }
 dwindle {
    preserve_split = true
 }
 # https://wiki.hyprland.org/Configuring/Variables/#misc
 misc {
    force_default_wallpaper = 0
    disable_hyprland_logo = true
    # 0 = off, 1 = always, 2 = fullscreen only (G7 is a 240Hz VRR panel)
    vrr = 2
    font_family = FiraCode Nerd Font
    background_color = $base
    focus_on_activate = true
 }
 group {
    col.border_active = $primary $accent 135deg
    col.border_inactive = $outline
    groupbar {
        font_family = JetBrainsMono Nerd Font
        font_size = 11
        height = 24
        gradients = false
        # --- Active Tab ---
        col.active = $primary
        text_color = $base
        # --- Inactive Tab ---
        col.inactive = $surface
        text_color_inactive = $muted
        indicator_height = 3
    }
 }
@@ -1,89 +0,0 @@
 # See https://wiki.hyprland.org/Configuring/Window-Rules/ for more
 # See https://wiki.hyprland.org/Configuring/Workspace-Rules/ for workspace rules
 # ==========================================
 # VARIABLES
 # ==========================================
 # Dialogs and utility apps that should float in the center
 $dialog_titles = ^(Open Form|Open File|Select a File|Choose a file|Open Workspace|Choose Directory.*|Save As.*|Save File.*|branchdialog|pinentry-gtk-2|Confirm to replace files|File Operation Progress|Open Files.*|Anmelden.*|File Upload.*|TRuDI-Export laden)$
 $dialog_classes = ^(pavucontrol|blueman-manager|nm-connection-editor|org.pulseaudio.pavucontrol|io.narl.proton-drive-linux-prompt)$
 # App classes
 $steam = ^(steam)$
 $gamescope = ^(gamescope)$
 # ==========================================
 # GENERAL & FIXES
 # ==========================================
 # Ignore maximize requests from apps. You'll probably like this.
 # windowrule = suppress_event maximize, match:class .*
 # Fix some dragging issues with XWayland
 # windowrule = no_focus 1, match:class ^$, match:title ^$, match:xwayland 1, match:floating 1, match:fullscreen 0, match:pinned 0
 windowrule = no_blur 1, match:class ^$, match:title ^$
 # ==========================================
 # FLOATING & CENTERED DIALOGS
 # ==========================================
 # Make them float
 windowrule = float 1, match:title $dialog_titles
 windowrule = float 1, match:class $dialog_classes
 # Set to 800x600
 windowrule = size 800 600, match:title $dialog_titles
 windowrule = size 800 600, match:class $dialog_classes
 # Center them on the screen
 windowrule = center 1, match:title $dialog_titles
 windowrule = center 1, match:class $dialog_classes
 # Disable blur
 windowrule = no_blur 1, match:title $dialog_titles
 windowrule = no_blur 1, match:class $dialog_classes
 # ==========================================
 # WORKSPACE ASSIGNMENTS
 # ==========================================
 # Normal Workspaces
 # windowrule = workspace 1, match:class ^(firefox)$
 # windowrule = workspace 2, match:class ^(kitty)$
 # windowrule = workspace 3, match:class ^(Code)$
 windowrule = workspace 1, match:class $gamescope
 # Special Workspaces
 windowrule = workspace special:virtual, match:class ^(Spotify|spotify)$
 windowrule = workspace special:discord, match:class ^(discord|vesktop)$
 # ==========================================
 # APP-SPECIFIC RULES: STEAM & GAMING
 # ==========================================
 # windowrule = workspace 3 silent, match:class $steam, match:title ^(Steam)$
 # Fixed sizes for specific Steam windows
 windowrule = size 400 800, match:title ^(Friends List)$, match:class $steam
 windowrule = size 1000 800, match:title ^(Steam Settings)$, match:class $steam
 windowrule = size 1000 800, match:title ^(Add Non-Steam Game)$, match:class $steam
 # Float and disable blur for Steam windows that aren't the main window
 windowrule = float 1, match:class $steam, match:title negative:^(Steam)$
 windowrule = no_blur 1, match:class $steam, match:title negative:^(Steam)$
 # windowrule = center 1, match:class $steam, match:title negative:^(Steam)$
 # Allow tearing for games started with Gamescope
 windowrule = immediate 1, match:class $gamescope
 # Layer rules
 # waybar blur
 layerrule = blur on, match:namespace bottom 
 layerrule = blur on, match:namespace top
 layerrule = ignore_alpha 0.5, match:namespace bottom
 layerrule = ignore_alpha 0.5, match:namespace top
 # launcher blur
 layerrule = blur on, match:namespace launcher
 layerrule = ignore_alpha 0.5, match:namespace launcher
@@ -1,54 +0,0 @@
 #!/bin/bash
 # ~/.config/hypr/scripts/lid_handler.sh
 # The file that tells Hyprland to keep the lid off during reloads
 LID_STATE_FILE="$HOME/.config/hypr/lid_state.conf"
 restart_ui() {
    # The Quickshell bar follows monitor hotplug on its own, so only the
    # wallpaper daemon needs a kick.
 	systemctl restart --user hyprpaper
 }
 if [[ "$1" == "close" ]]; then
    # Check if ANY external monitor is connected and active
    if hyprctl monitors all | grep -qE "Monitor (DP|HDMI|Type-C)-"; then
        # Prevent laptop screen from turning on during manual config reloads
        echo "monitor=eDP-1, disable" > "$LID_STATE_FILE"
        # Extract the CURRENT live settings of all external monitors using jq
        # This grabs the active resolution, refresh rate, position, and scale.
        LIVE_MONITORS=$(hyprctl -j monitors | jq -c '.[] | select(.name != "eDP-1")')
        # 3. Disable the laptop screen
        hyprctl keyword monitor "eDP-1, disable"
        # 4. Re-apply the live settings to external monitors so they don't reset
        echo "$LIVE_MONITORS" | while read -r mon_json; do
            NAME=$(echo "$mon_json" | jq -r '.name')
            WIDTH=$(echo "$mon_json" | jq -r '.width')
            HEIGHT=$(echo "$mon_json" | jq -r '.height')
            REFRESH=$(echo "$mon_json" | jq -r '.refreshRate')
            X=$(echo "$mon_json" | jq -r '.x')
            Y=$(echo "$mon_json" | jq -r '.y')
            SCALE=$(echo "$mon_json" | jq -r '.scale')
            # Formats it exactly as Hyprland expects: DP-1, 1920x1080@240, 0x0, 1
            hyprctl keyword monitor "$NAME, ${WIDTH}x${HEIGHT}@${REFRESH}, ${X}x${Y}, $SCALE"
        done
 		# restart ui
        restart_ui
    fi
 elif [[ "$1" == "open" ]]; then
    # Clear the override file so the laptop screen is allowed to turn on again
    echo "" > "$LID_STATE_FILE"
    # Let Hyprland reload itself. 
    # This automatically re-enables eDP-1 based on your hardcoded hyprland.conf!
    hyprctl reload
    restart_ui
 fi
@@ -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.
@@ -1,9 +1,9 @@
 # Takemi
-A Persona 5 flavoured Quickshell desktop for Hyprland. Cold teal and near-black
+A Persona 5 flavoured Quickshell desktop for Hyprland. Crimson, black and white,
-pulled from `~/.wallpapers/takemi_2.jpg`, with crimson as the accent voice.
+with no gradients anywhere. Everything leans by the same 14°, corners are
-Everything leans, corners are chopped rather than rounded, and headings carry
+chopped rather than rounded, and every surface is one continuous slab divided by
-the wallpaper's RGB split.
+hairlines rather than a cluster of floating cards.
 Replaces Waybar, dunst and hyprlock.
@@ -18,13 +18,47 @@ Hyprland starts it from `~/.config/hypr/modules/autostart.conf`.
 ## Layout
 Two surfaces. Status moves off the bar and onto a vertical rail, because on a
 1080p panel horizontal space is cheap and vertical space is not: a 48px rail
 costs 2.5% of the width, where another 48px strip along the bottom would have
 cost 4.4% of the height on top of what the bar already takes.
 ```
-shell.qml        entrypoint — one bar, power menu, toasts and OSD per screen
+┌────────────────────────────────────────────┐
 │ ◆ │ 1 2 3 │ window title  ♪ TRACK │ 42% │ 00:09 │  bar  — 48px exclusive
 ├────────────────────────────────────────────┤
 │                                         ▐█▌│  rail — 48px exclusive
 │                windows                  ▐ ▌│
 │                                         ▐ ▌│
 │                                         ▐ ▌│
 └────────────────────────────────────────────┘
 ```
 - **bar** — one slab: identity and workspaces on the left; the focused window,
  the player, the CPU/MEM/GPU readout and the clock on the right.
 - **rail** — one slab: network, bluetooth, audio, mic, backlight, battery, tray,
  notifications, power. Popouts open leftward, into the screen.
 Each permanent surface is a single continuous `ChromeSurface` with modules
 divided by sheared hairlines. `BarPill` is chromeless by default — a module is
 *content inside* a surface, not a surface of its own — and marks hover with a
 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
 config/          palette, type scale, geometry, motion curves
 components/      the P5 primitives: panels, gauges, sliders, split-ink text
 services/        data sources, all singletons
-bar/             the bar and its modules
+bar/             the two surfaces and their modules
-popouts/         hover panels hanging off bar modules
+popouts/         hover panels hanging off rail and bar modules
 overlays/        power menu, notification toasts, volume/brightness OSD
 lock/            session lock
 assets/          halftone and stripe tiles, generated with ImageMagick
@@ -34,27 +68,41 @@ assets/          halftone and stripe tiles, generated with ImageMagick
 callers set implicit sizes from their own layout (`row.implicitWidth +
 contentPad * 2`), which keeps the shape maths out of binding loops.
-## Bar
+## Modules
-| Module | Left click | Right click | Middle | Scroll | Hover |
+| Module | Where | Left click | Right click | Middle | Scroll | Hover |
-|---|---|---|---|---|---|
+|---|---|---|---|---|---|---|
-| Sigil | app menu | reload shell | | | |
+| Sigil | bar | app menu | reload shell | | | |
-| Workspaces | switch | | | | |
+| Workspaces | bar | switch | | | | |
-| CPU/MEM/GPU | btop | | | | resource dashboard |
+| Clock | bar | pin calendar | | | | calendar |
-| Media | play/pause | next | raise player | next/prev | full player |
+| Network | rail | pin details | | | | state + networks |
-| Clock | pin calendar | | | | calendar |
+| Bluetooth | rail | pin details | | | | state + devices |
-| Tray | activate | app menu | secondary | | |
+| Volume | rail | pin audio | | | volume | state + scroll hint + audio |
-| Network | pin panel | toggle Wi-Fi | nm-connection-editor | | networks |
+| Mic | rail | pin audio | | | mic volume | state + scroll hint + audio |
-| Bluetooth | pin panel | toggle adapter | | | devices |
+| Brightness | rail | | | | brightness | state + scroll hint |
-| Volume | mute | pin panel | pavucontrol | volume | audio mixer |
+| Battery | rail | pin panel | | | | power detail |
-| Mic | mute | pin panel | | mic volume | audio mixer |
+| Tray | rail | activate | app menu | secondary | | |
-| Brightness | | | | brightness | |
+| Bell | rail | pin history + mark read | | | | state + history |
-| Battery | pin panel | | | | power detail |
+| Power | rail | power menu | | | | |
-| Bell | history + mark read | do not disturb | | | history |
+| Media | bar | play/pause | next | raise player | next/prev | full player |
-| Power | power menu | | | | |
+| 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
@@ -112,7 +160,88 @@ means restarting Hyprland from a TTY.
 `power-profiles-daemon` is not installed (TLP is), so the power-profile
 switching in `services/Battery.qml` stays dormant. Nothing else depends on it.
-The display face is Adwaita Sans Black Italic, which is what was already on the
+The display face is Archivo Black, set italic almost everywhere. Change
-box. A heavy condensed grotesque — Anton, Archivo Black, Oswald — would land
+`Theme.fontDisplay` and everything follows.
-closer to the real Persona 5 type. Change `Theme.fontDisplay` and everything
+
-follows.
+## Palette discipline
 Crimson, black, white. That is the whole palette.
 **Changing the accent.** The colour is written in exactly three places, one per
 program:
 | File | Line | Covers |
 |---|---|---|
 | `quickshell/config/Theme.qml` | `readonly property color accent: "#ff2d40"` | the shell |
 | `hypr/modules/takemi.conf` | `$accent = rgb(ff2d40)` | window borders, groups |
 | `alacritty/takemi.toml` | `red`, cursor, selection | the terminal |
 Everything else derives. `accentDim` and `accentSoft` come off `accent` via
 `Qt.darker`/`Qt.lighter`, `glow` (the hover highlight) *is* `accent`, and every
 Hyprland border, group indicator and focus state references `$accent`. Change
 those lines and the whole setup recolours — swap in Persona 4's yellow or
 Persona 3's blue and nothing else needs touching.
 ## The rest of the desktop
 - **Alacritty** — `alacritty/takemi.toml`, selected by the `import` in
  `alacritty.toml`. The Catppuccin files are left in place, just unreferenced.
  Near-black ground, white text, crimson cursor and selection. The sixteen ANSI
  slots keep their hues because syntax highlighters need to tell them apart, but
  every one is desaturated so nothing competes with the accent.
 - **Neovim** — `nvim/lua/takemi.lua`, loaded through `nvim/colors/takemi.lua`
  so `:colorscheme takemi` and `require("takemi").lualine()` both work. Same
  palette, same rule: crimson is spent only on keywords, types and errors,
  functions are plain white-bold, and `terminal_color_0..15` mirror
  `takemi.toml` slot for slot so `:terminal` matches the shell around it.
 - **Fish** — `fish/conf.d/takemi_theme.fish`, with a preview copy in
  `fish/themes/Takemi.theme` for `fish_config`. Replaced the Catppuccin
  `fish_frozen_theme.fish` that fish 4.3 generated on upgrade. The prompt arrow
  is white and turns crimson on a non-zero exit — the shell's one "wrong"
  signal, and so the one place that earns the accent.
 - **Fuzzel** — `fuzzel/takemi.ini`, selected by the `include` in `fuzzel.ini`.
  Square corners rather than the stock radius, and a fully opaque ground.
 - **No glass anywhere.** Alacritty is `opacity = 1.0, blur = false`, and
  Hyprland's `decoration:blur` is disabled with both opacities at `1.0`. Blur is
  the signature of the frosted-glass look, which is the opposite of flat ink on
  flat ground — and with nothing translucent left it was costing three render
  passes for no visible result.
 White is the resting voice — text, icons, idle indicators. Crimson is the only
 accent and always means one thing: active, or wrong. Black is structure, used as
 a hard keyline rather than as a soft shadow. **There are no gradients in this
 shell**; every fill is flat. `Theme.sheen` still exists as a no-op property
 because a teal-to-transparent wash on every panel was the single biggest source
 of the murky blue cast the design used to have.
 `primary`, `glow`, `blue`, `ok` and `warn` survive in `Theme.qml` only as
 aliases onto white, crimson and grey, so the existing call sites keep working —
 don't introduce new uses. `warn` used to alias `accentSoft`, which put a
 washed-out pink-red wherever something was merely notable; there is no
 half-crimson in this palette, so it aliases the real `accent` now and anything
 merely informational (brightness, most readouts) is white instead. `Theme.heat()` is a continuous white→crimson ramp, so
 a CPU figure that has gone red means the same thing as a battery that has gone
 red. Tray icons are force-flattened to a single colour for the same reason: app
 brand colours wreck the palette faster than anything else in the shell.
 The wallpaper is teal. The UI used to be teal too, and the two fought each other
 into a blue-grey mush. Going monochrome-plus-red is what lets the wallpaper be
 the colour in the composition.
 ## Geometry discipline
 **One angle, one chamfer, everywhere.** `Theme.skew` is `tan(14°)` and every
 edge in the shell leans by exactly that, in the same direction; every corner is
 chopped by exactly `Theme.cut`. A vertical panel (the rail) leans its horizontal
 edges by a fraction of its *width*, which works out to the same 14°.
 This is deliberate and was learned the hard way. An earlier pass gave every
 module a different lean, chamfer and height from per-index variance tables, on
 the theory that Persona geometry is "chaotic". It isn't — Persona UI is
 meticulously clean, and the chaos lives in composition and motion, not in each
 element being a different shape. Randomised geometry just reads as noise. If you
 find yourself adding a variance table, don't.
 Each surface is **one continuous slab**, with modules divided by sheared
 hairline rules rather than by gaps. A row of separate floating cards reads as
 clutter; that is what the dividers exist to avoid.
@@ -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,13 @@ 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: "—"
    // Which toplevel the landing transition last played for. The landing is a
    // focus-change stamp, so it has to key off window identity rather than off
    // the caption text — see commitTitle().
    property var landedToplevel: null
    // The bar shrinks this when the three clusters would otherwise collide.
    property real maxWidth: 240
@@ -31,18 +37,87 @@ 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()
+    // Adopt the settled caption, and stamp it only when focus actually moved.
    //
    // The landing used to restart on any title change, which is not the same
    // thing: plenty of windows rewrite their own title on a timer — a terminal
    // running a task with a spinner or a percentage, a browser tab with a live
    // clock — and each rewrite restarted seven overlapping animations totalling
    // over half a second. At a title churning twice a second on a 240 Hz screen
    // the bar never stopped animating, and repainting it that hard measured at
    // roughly 18% of a CPU core with nothing else happening. Keying the stamp to
    // window identity restores what the effect was described as doing.
    function commitTitle(): void {
        const focusMoved = root.toplevel !== root.landedToplevel;
        if (root.displayedTitle !== root.incomingTitle)
            root.displayedTitle = root.incomingTitle;
        else if (!focusMoved)
            return;
        if (focusMoved) {
            root.landedToplevel = root.toplevel;
            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()
    // Focus can move to a window whose caption happens to match the outgoing
    // one, which changes no title and so would otherwise never land.
    onToplevelChanged: titleSettle.restart()
    Component.onCompleted: {
        displayedTitle = incomingTitle;
        // Adopt the current window silently, so a config reload does not play a
        // focus-change stamp for a focus that did not change.
        landedToplevel = toplevel;
    }
    // A quick crimson wipe under the title on focus change.
    Rectangle {
@@ -55,7 +130,7 @@ Item {
    }
    SequentialAnimation {
-        id: flash
+        id: titleLanding
        ParallelAnimation {
            NumberAnimation {
                target: wipe; property: "width"
@@ -66,6 +141,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"
@@ -5,12 +5,13 @@ import "root:/config"
 import "root:/components"
 import "root:/services"
-// One bar per monitor.
+// One bar per monitor, and one surface.
 //
-// Layout is three clusters: identity and system state on the left, the clock
+// Identity and workspaces on the left, the player, metrics and clock on the
-// and player dead centre, controls on the right. The centre is genuinely
+// right, all inside a single continuous slab and separated by hairline rules
-// centred, so the left cluster's window title is capped at whatever space is
+// rather than by gaps. Nothing floats and nothing has its own card. Status
-// actually left over — otherwise the clusters overlap on a 1080p panel.
+// lives on the rail, which is likewise one slab — two surfaces, not a dozen
 // islands.
 PanelWindow {
    id: root
@@ -36,124 +37,96 @@ PanelWindow {
    exclusiveZone: Theme.barHeight + Theme.barMargin
    color: "transparent"
-    // Half the space not taken by the centre cluster, minus breathing room.
+    // Calm permanent chrome: one opaque slab with no texture or offset copy.
-    readonly property real sideBudget:
+    ChromeSurface {
-        (width - centreCluster.width) / 2 - Theme.barGap * 2
+        id: slab
        anchors.fill: parent
        lean: Theme.skew
        chop: Theme.cut
        chopCorners: [1, 3]
        padding: 0
        active: true
        slashWidth: 5
    }
    readonly property real edgeInset: Theme.barHeight * Theme.skew + Theme.padM
    // ------------------------------------------------------------------ left
    Row {
-        id: leftCluster
+        id: leftGroup
        anchors.left: parent.left
        anchors.leftMargin: root.edgeInset
        anchors.verticalCenter: parent.verticalCenter
-        spacing: Theme.barGap
+        spacing: 0
        Sigil {
            id: sigil
            screenRef: root.modelData
        }
-        BarPill {
+        Divider {}
            id: spacesPill
            accent: Theme.primary
            padding: Theme.padS
            interactive: false
            implicitWidth: spacesRow.implicitWidth + contentPad * 2
-            Row {
+        Workspaces {
-                id: spacesRow
+            id: spaces
-                anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
+            screenRef: root.modelData
                spacing: Theme.padM
                Workspaces {
                    id: spaces
                    anchors.verticalCenter: parent.verticalCenter
                    screenRef: root.modelData
                }
                Rectangle {
                    anchors.verticalCenter: parent.verticalCenter
                    width: 1
                    height: 18
                    color: Theme.alpha(Theme.outline, 0.8)
                }
                ActiveWindow {
                    anchors.verticalCenter: parent.verticalCenter
                    screenRef: root.modelData
                    // Everything else on this side is fixed width, so the title
                    // gets whatever remains.
                    maxWidth: Math.max(70, root.sideBudget
                        - sigil.implicitWidth
                        - resources.implicitWidth
                        - spaces.implicitWidth
                        - Theme.barGap * 2
                        - Theme.padM * 3
                        - spacesPill.leanInset)
                }
            }
        }
-        Resources {
+        Divider {}
-            id: resources
+
        ActiveWindow {
            anchors.verticalCenter: parent.verticalCenter
            screenRef: root.modelData
            maxWidth: Math.max(120, root.width
                - leftGroup.x - rightGroup.width - sigil.implicitWidth
                - spaces.implicitWidth - root.edgeInset * 2 - Theme.padXL)
        }
    }
-    // ---------------------------------------------------------------- centre
+    // ----------------------------------------------------------------- right
    Row {
-        id: centreCluster
+        id: rightGroup
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.right: parent.right
        anchors.rightMargin: root.edgeInset
        anchors.verticalCenter: parent.verticalCenter
-        spacing: Theme.barGap
+        spacing: 0
        MediaPill {
            screenRef: root.modelData
        }
        Divider {}
        Resources {
            screenRef: root.modelData
        }
        Divider {}
        Clock {
            screenRef: root.modelData
        }
    }
-    // ----------------------------------------------------------------- right
+    // A hairline rule between modules, sheared to the house angle. This is what
-    Row {
+    // divides the bar now — gaps between cards are what made it look scattered.
-        id: rightCluster
+    component Divider: Item {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
-        spacing: Theme.barGap
+        implicitWidth: Theme.padM * 2
        implicitHeight: Theme.barHeight
-        Tray {
+        // A leaning hairline needs a box wide enough to hold the lean: at 20px
-            screenRef: root.modelData
+        // tall the top edge sits 20 * skew ≈ 5px right of the bottom one, so a
-        }
+        // 1px-wide Skew folded into a bowtie instead. Width is the lean plus the
        // stroke the rule should actually read as.
        readonly property real ruleWeight: 1.5
        readonly property real ruleHeight: 20
-        Status {
+        Skew {
-            screenRef: root.modelData
+            anchors.centerIn: parent
-        }
+            width: parent.ruleHeight * Theme.skew + parent.ruleWeight
-
+            height: parent.ruleHeight
-        NotifButton {
+            color: Theme.alpha(Theme.outline, 0.9)
            screenRef: root.modelData
        }
        PowerButton {
            screenRef: root.modelData
        }
    }
    // A hairline of crimson under the whole bar — the Persona 5 underscore.
    Rectangle {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        height: 1
        gradient: Gradient {
            orientation: Gradient.Horizontal
            GradientStop { position: 0.0; color: "transparent" }
            GradientStop { position: 0.18; color: Theme.alpha(Theme.accent, 0.55) }
            GradientStop { position: 0.5; color: Theme.alpha(Theme.primary, 0.35) }
            GradientStop { position: 0.82; color: Theme.alpha(Theme.accent, 0.55) }
            GradientStop { position: 1.0; color: "transparent" }
        }
    }
 }
@@ -2,25 +2,62 @@ import QtQuick
 import "root:/config"
 import "root:/components"
-// Shared chrome for every bar module: a leaning slab that lifts and lights up
+// Shared chrome for every bar module.
-// under the pointer, and forwards clicks and scrolls to the widget.
+//
 // The bar is one continuous slab, so by default a module draws no panel of its
 // own — it is content inside the bar's surface, and marks hover with a crimson
 // underline rather than by lighting up a card. That is what stops the bar from
 // reading as a row of floating islands.
 //
 // `standalone: true` brings back the individual leaning slab, for the few
 // places that genuinely are separate surfaces.
 Item {
    id: root
-    property color accent: Theme.primary
+    property color accent: Theme.accent
    property bool active: false
    property bool slash: false
    property real lean: Theme.skew
    property bool leanLeft: false
    property real padding: Theme.padM
    property bool interactive: true
    property bool halftone: false
    property bool standalone: false
    property real chop: Theme.cut
    property var chopCorners: [1, 3]
    readonly property bool hovered: hover.hovered
-    readonly property real leanInset: panel.leanInset
+    readonly property real leanInset: standalone ? panelLoader.item?.leanInset ?? 0 : 0
-    // Total horizontal inset a pill must add on top of its content width.
+    // The hover rule's own strip, reserved at the bottom of the module.
-    readonly property real contentPad: panel.contentPad
+    //
-    readonly property alias panelItem: panel
+    // The rule used to be drawn into the same box as the content, so anything
    // taller than about 32px — the media pill's art, the metric meters — had a
    // crimson line struck through its bottom edge on hover. Reserving the band
    // and centring content in what is left is what keeps the rule under the
    // module instead of across it.
    // The band reserved the full rule plus its inset — 7px off a 40px module,
    // all of it taken from the bottom — so every module's content was centred
    // 3.5px above the slab's own centre and the whole bar read as top-heavy.
    // The rule is pushed closer to the edge now and the band keeps only enough
    // clearance to stop the tallest content (the media pill's 24px art) from
    // touching it, so content sits within a pixel of the slab's centre line.
    readonly property real ruleHeight: 2
    readonly property real ruleInset: 3
    readonly property real ruleBand: root.standalone ? 0 : 2
    // Modules with a notion of progress (the player's track position) draw it in
    // the same band, so it can never be struck through the content. A module
    // cannot do this for itself: anything it declares becomes a child of the
    // content holder, whose bottom edge is above the band, and the rule lands
    // across the text instead of under it. Negative means "no progress".
    property real progress: -1
    // Total horizontal inset a module must add on top of its content width.
    readonly property real contentPad: standalone
        ? (panelLoader.item?.contentPad ?? root.padding)
        : root.padding
    default property alias content: holder.data
@@ -31,46 +68,76 @@ Item {
    implicitHeight: Theme.barHeight
-    P5Panel {
+    Loader {
-        id: panel
+        id: panelLoader
        anchors.fill: parent
-        lean: root.lean
+        active: root.standalone
        padding: root.padding
        halftone: root.halftone
        halftoneColor: root.accent
        sheen: true
-        fill: root.active ? Theme.surfaceAlt : Theme.surface
+        sourceComponent: P5Panel {
-        fillOpacity: root.hovered ? 0.98 : 0.88
+            lean: root.lean
-        border: root.hovered || root.active
+            leanLeft: root.leanLeft
-            ? Theme.alpha(root.accent, 0.9)
+            chop: root.chop
-            : Theme.alpha(Theme.outline, 0.7)
+            chopCorners: root.chopCorners
-        borderWidth: root.hovered || root.active ? Theme.stroke : 1
+            padding: root.padding
            halftone: root.halftone
            halftoneColor: root.accent
-        slash: root.slash || root.active
+            fill: root.active ? Theme.surfaceAlt : Theme.surface
-        slashColor: root.accent
+            fillOpacity: 1.0
            border: root.hovered || root.active
                ? root.accent
                : Theme.alpha(Theme.outline, 0.9)
            borderWidth: root.hovered || root.active ? Theme.stroke : 1
-        Behavior on fillOpacity {
+            slash: root.slash || root.active
-            NumberAnimation { duration: Theme.durFast }
+            slashColor: root.accent
        }
        Behavior on border {
            ColorAnimation { duration: Theme.durBase }
        }
        Item {
            id: holder
            anchors.fill: parent
        }
    }
-    // Lift toward the pointer. Subtle, but it makes the bar feel alive.
+    Item {
-    transform: Translate {
+        id: holder
-        y: root.hovered && root.interactive ? -2 : 0
+        anchors.fill: parent
        anchors.leftMargin: root.contentPad
        anchors.rightMargin: root.contentPad
        anchors.bottomMargin: root.ruleBand
    }
-        Behavior on y {
+    // Hover mark for in-bar modules: a crimson rule under the content, wiping
-            NumberAnimation {
+    // out from the leading edge. Sheared to match the one angle everything uses.
-                duration: Theme.durBase
+    Item {
-                easing.type: Easing.OutBack
+        visible: !root.standalone && root.interactive
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.bottomMargin: root.ruleInset
        height: root.ruleHeight
        clip: true
        // Track progress, shown until the pointer arrives and the hover rule
        // takes the band over.
        //
        // Deliberately untweened. MPRIS position is polled once a second, and a
        // 480 ms ease on a 1 Hz input meant this rule was mid-animation roughly
        // half of every second — about 115 animated frames per second on a
        // 240 Hz screen, each one rebuilding this Skew's Shape geometry through
        // the curve renderer and re-rendering the pill's layer textures with it.
        // Stepping once per second costs 1 frame instead of 115, matches the rate
        // the underlying data actually arrives at, and makes a seek land exactly
        // where it was dropped instead of gliding there.
        Skew {
            height: parent.height
            width: parent.width * Math.max(0, Math.min(1, root.progress))
            color: Theme.accent
            visible: root.progress >= 0 && !root.hovered && !root.active
        }
        Skew {
            height: parent.height
            width: root.hovered || root.active ? parent.width : 0
            color: root.accent
            Behavior on width {
                NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutExpo }
            }
        }
    }
@@ -17,7 +17,7 @@ BarPill {
    SystemClock {
        id: clock
-        precision: SystemClock.Seconds
+        precision: SystemClock.Minutes
    }
    onClicked: calendar.pinned = !calendar.pinned
@@ -50,35 +50,57 @@ BarPill {
            }
        }
-        Rectangle {
+        // Declared with room for its own lean, so the slash sits inside the box
        // the Row gave it instead of hanging several px into the date column.
        Skew {
            anchors.verticalCenter: parent.verticalCenter
-            width: 2
+            width: 22 * Theme.skew + 3
            height: 22
            color: Theme.alpha(Theme.accent, 0.6)
-            transform: Matrix4x4 {
+        }
-                matrix: Qt.matrix4x4(1, -Theme.skew, 0, 22 * Theme.skew,
+
-                                     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+        // Archivo Black's digits are not all the same width, so a clock sized to
-            }
+        // its own text changed width as the minutes rolled over — 11:11 is
        // several px narrower than 08:48 — and shoved the rest of the bar
        // around. Reserve the widest possible reading and centre inside it.
        TextMetrics {
            id: timeMetrics
            text: "88:88"
            font.family: Theme.fontDisplay
            font.pixelSize: Theme.fsTitle
            font.weight: Theme.weightDisplay
            font.italic: true
            font.letterSpacing: 0.5
        }
        // Archivo Black reserves descender room the time never uses — "12:04"
        // is all cap height — so centring the line box left the digits sitting
        // above everything beside them. Centre the ink instead.
        // `tightBoundingRect` is measured from the baseline, so the ink's top
        // inside the line box is `ascent + ink.y`.
        readonly property real timeInkOffset: {
            const ink = timeMetrics.tightBoundingRect;
            if (ink.height <= 0) return 0;
            const inkCentre = timeFont.ascent + ink.y + ink.height / 2;
            return Math.round(timeMetrics.boundingRect.height / 2 - inkCentre);
        }
        FontMetrics {
            id: timeFont
            font: timeMetrics.font
        }
        SplitText {
            id: timeText
            anchors.verticalCenter: parent.verticalCenter
            anchors.verticalCenterOffset: layout.timeInkOffset
            width: timeMetrics.advanceWidth
            text: Qt.formatDateTime(clock.date, "HH:mm")
            pixelSize: Theme.fsTitle
            horizontalAlignment: Text.AlignHCenter
            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.
@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Shapes
 import QtQuick.Window
 import Quickshell
 import "root:/config"
 import "root:/components"
@@ -16,6 +17,9 @@ BarPill {
    padding: Theme.padS
    visible: Media.hasPlayer || width > 1
    // Track position, drawn by the pill in its own rule band.
    progress: Media.hasTimeline ? Media.progress : -1
    implicitWidth: Media.hasPlayer
        ? layout.implicitWidth + contentPad * 2
        : 0
@@ -49,6 +53,7 @@ BarPill {
                anchors.fill: parent
                visible: false
                layer.enabled: true
                layer.smooth: true
                preferredRendererType: Shape.CurveRenderer
                ShapePath {
                    fillColor: "white"
@@ -68,6 +73,7 @@ BarPill {
                asynchronous: true
                visible: status === Image.Ready
                layer.enabled: true
                layer.smooth: true
                layer.effect: MaskedArt { maskItem: artMask }
            }
@@ -78,66 +84,120 @@ BarPill {
                text: Media.sourceIcon
                font.pixelSize: Theme.fsLarge
                color: Theme.primary
                pulsing: Media.playing
                pulseScale: 1.12
            }
        }
        // Title and artist size to the text, up to a cap.
        //
        // These used to be a flat 130px wide each, which meant a short title
        // still reserved 130px and left a hand-sized hole between the artist and
        // the equaliser — the pill looked broken rather than compact. They take
        // what they need now and only start scrolling past the cap.
        Column {
            id: meta
            anchors.verticalCenter: parent.verticalCenter
            spacing: 0
-            Marquee {
+            readonly property real cap: 150
-                width: 130
+
            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: 130
+                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.
        //
        // Sampled from a timer rather than tweened by an infinite
        // NumberAnimation. DP-1 runs at 240 Hz, and a frame-synced animation
        // here repainted the entire bar 240 times a second: this pill sits
        // inside ancestors that use layer.enabled together with
        // Shape.CurveRenderer, and the album art carries a MultiEffect pass, so
        // every one of those frames re-rendered several layer textures. Measured
        // on its own, this one animation cost about two thirds of a CPU core
        // whenever anything was playing.
        //
        // The timer samples a sine, it does not step through arbitrary levels: a
        // low tick rate only looks like the original if consecutive ticks stay
        // near each other. Each bar keeps the eased breathing motion and the
        // period it had before — the curve is just read 25 times a second
        // instead of 240.
        Row {
            id: eq
            anchors.verticalCenter: parent.verticalCenter
            spacing: 2
            // Sampling interval — the one knob trading smoothness against cost.
            // Frames are the whole expense: a full-bar repaint runs about 0.3% of
            // a core (the bar spans 2544x40 on a 240 Hz output), so cost scales
            // linearly with this rate. 16 ms holds 60 Hz, which is visually
            // indistinguishable from the original frame-synced tween at a quarter
            // of its ~75%.
            readonly property int tickMs: 16
            property int phase: 0
            // Reproduces the original per-bar tween exactly, sampled instead of
            // frame-synced. Each bar eased between two heights with its own pair
            // of durations, so the three differed in both swing and period — the
            // middle bar moved barely a pixel while the outer two ran in
            // opposition. Giving all three the full swing, as a single symmetric
            // sine would, is three times the motion and reads far busier than
            // this meter is supposed to.
            function level(i: int): real {
                const lo = 4 + (i * 5) % 13;    // old first NumberAnimation `to`
                const hi = 14 - (i * 4) % 9;    // old second NumberAnimation `to`
                const d1 = 320 + i * 90;        // ...and their durations
                const d2 = 280 + i * 70;
                const t = (eq.phase * eq.tickMs) % (d1 + d2);
                // Easing.InOutSine, which is what both halves used.
                const ease = x => (1 - Math.cos(Math.PI * x)) / 2;
                return t < d1
                    ? hi + (lo - hi) * ease(t / d1)
                    : lo + (hi - lo) * ease((t - d1) / d2);
            }
            Timer {
                interval: eq.tickMs
                running: Media.playing && eq.visible && (eq.Window.window?.visible ?? true)
                repeat: true
                onTriggered: eq.phase++
                // Restart the cycle from its trough, so playback always begins
                // from a settled meter rather than mid-swing.
                onRunningChanged: if (!running) eq.phase = 0
            }
            Repeater {
                model: 3
                Rectangle {
                    required property int index
                    width: 3
-                    height: 6
+                    height: Media.playing ? eq.level(index) : 6
                    anchors.verticalCenter: parent.verticalCenter
                    color: Media.playing ? Theme.primary : Theme.muted
                    SequentialAnimation on height {
                        running: Media.playing
                        loops: Animation.Infinite
                        NumberAnimation {
                            to: 4 + (index * 5) % 13
                            duration: 320 + index * 90
                            easing.type: Easing.InOutSine
                        }
                        NumberAnimation {
                            to: 14 - (index * 4) % 9
                            duration: 280 + index * 70
                            easing.type: Easing.InOutSine
                        }
                    }
                    Behavior on color {
                        ColorAnimation { duration: Theme.durBase }
                    }
@@ -146,22 +206,6 @@ BarPill {
        }
    }
    // Track progress, hairline along the bottom of the pill.
    Rectangle {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 3
        anchors.left: parent.left
        anchors.leftMargin: root.leanInset
        width: Math.max(0, (root.width - root.leanInset * 2) * Media.progress)
        height: 2
        color: Theme.accent
        visible: Media.canSeek
        Behavior on width {
            NumberAnimation { duration: 480; easing.type: Easing.OutQuad }
        }
    }
    onVisibleChanged: if (visible) titleGlitch.restart()
    Connections {
@@ -35,7 +35,7 @@ BarPill {
    }
    // Unread badge, chopped like everything else.
-    Rectangle {
+    Skew {
        visible: Notifs.unread > 0 && !Notifs.dnd
        anchors.right: parent.right
        anchors.rightMargin: 2
@@ -45,6 +45,8 @@ BarPill {
        height: 12
        color: Theme.accent
        // The badge count stays upright. It used to inherit the shear from the
        // transform on the block below, which at 8px left the digits smeared.
        Text {
            id: badge
            anchors.centerIn: parent
@@ -55,11 +57,6 @@ BarPill {
            font.weight: Font.Bold
            renderType: Text.NativeRendering
        }
        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 12 * Theme.skew,
                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
    }
    Connections {
@@ -0,0 +1,245 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import "root:/config"
 import "root:/components"
 import "root:/services"
 import "root:/popouts"
 // The right-hand status rail — one slab, not a stack of cards.
 //
 // Connectivity, audio, power, tray and notifications all sit inside a single
 // continuous column, divided by hairline rules the same way the bar divides its
 // modules. Same lean, same chamfer, same keyline as the bar and the dock, so
 // the three surfaces read as one system.
 //
 // On a 1080p panel this is the cheap edge: 48px of width is 2.5% of the screen,
 // where the same 48px of height would be 4.4% on top of what the bar takes.
 PanelWindow {
    id: root
    required property var modelData
    screen: modelData
    WlrLayershell.layer: WlrLayer.Top
    WlrLayershell.namespace: "takemi-rail"
    anchors {
        top: true
        bottom: true
        right: true
    }
    margins {
        top: Theme.barHeight + Theme.barMargin * 2
        bottom: Theme.barMargin
        right: Theme.barMargin
    }
    implicitWidth: Theme.railWidth
    exclusiveZone: Theme.railWidth + Theme.barMargin
    color: "transparent"
    // The same calm permanent-chrome preset used by the top bar.
    ChromeSurface {
        id: slab
        anchors.fill: parent
        vertical: true
        lean: Theme.skew
        chop: Theme.cut
        chopCorners: [1, 3]
        padding: 0
        active: true
        slashWidth: 5
    }
    readonly property real edgeInset: Theme.railWidth * Theme.skew + Theme.padM
    // ------------------------------------------------------------------- top
    Column {
        id: upper
        anchors.top: parent.top
        anchors.topMargin: root.edgeInset
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 0
        RailIcon {
            id: netIcon
            icon: Net.icon
            label: "Network"
            statusText: Net.label
            suppressTooltip: netPopout.detailActive
            dim: !Sys.netUp
            onClicked: netPopout.togglePinned()
        }
        RailIcon {
            id: btIcon
            icon: Bt.icon
            label: "Bluetooth"
            statusText: Bt.label
            suppressTooltip: btPopout.detailActive
            dim: !Bt.enabled
            onClicked: btPopout.togglePinned()
        }
        Divider {}
        RailIcon {
            id: volIcon
            icon: Audio.icon
            readout: Audio.muted ? "" : Audio.volumePercent + "%"
            reserveReadout: true
            label: "Volume"
            statusText: Audio.muted ? "Muted" : Audio.volumePercent + "% · " + Audio.sinkName
            hint: "Scroll to adjust"
            suppressTooltip: audioPopout.detailActive
            alert: Audio.muted
            onClicked: audioPopout.togglePinned()
            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: audioPopout.togglePinned()
            onScrolled: delta => Audio.setMicVolume(Audio.micVolume + (delta > 0 ? 0.05 : -0.05))
        }
        RailIcon {
            id: brightIcon
            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)
        }
        Divider { visible: Battery.available }
        RailIcon {
            id: battIcon
            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.togglePinned()
        }
    }
    // ---------------------------------------------------------------- bottom
    Column {
        id: lower
        anchors.bottom: parent.bottom
        anchors.bottomMargin: root.edgeInset
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 0
        Tray {
            id: tray
            anchors.horizontalCenter: parent.horizontalCenter
        }
        Divider { visible: tray.visible }
        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))
                : ""
            reserveReadout: true
            dim: Notifs.dnd
            alert: Notifs.hasUnread && !Notifs.dnd
            suppressTooltip: notifPopout.detailActive
            onClicked: {
                notifPopout.togglePinned();
                Notifs.markRead();
            }
        }
        RailIcon {
            id: powerIcon
            icon: "󰐥"
            label: "Power"
            statusText: "Session actions"
            alert: Actions.powerMenuOpen
            onClicked: Actions.togglePowerMenu()
        }
    }
    // The rail's counterpart to the bar's divider: a horizontal hairline,
    // sheared to the same angle the rail's own edges lean at.
    component Divider: Item {
        implicitWidth: Theme.railWidth
        implicitHeight: Theme.padM + 4
        // Same correction as the bar's divider, on the other axis: a 22px rule
        // rises 22 * skew ≈ 5px across its run, so the box has to be that tall
        // plus the weight of the stroke. At height 1 the polygon inverted and
        // the rule rendered as a stubby wedge sitting left of centre.
        readonly property real ruleWeight: 1.5
        readonly property real ruleWidth: 22
        Skew {
            anchors.centerIn: parent
            width: parent.ruleWidth
            height: parent.ruleWidth * Theme.skew + parent.ruleWeight
            vertical: true
            color: Theme.alpha(Theme.outline, 0.9)
        }
    }
    // ------------------------------------------------------------- popouts
    // All of these hang off the left edge of the rail, opening into the screen.
    NetPopout {
        id: netPopout
        anchorItem: netIcon
        triggerHovered: netIcon.hovered
        fromEdge: Edges.Left
    }
    BtPopout {
        id: btPopout
        anchorItem: btIcon
        triggerHovered: btIcon.hovered
        fromEdge: Edges.Left
    }
    AudioPopout {
        id: audioPopout
        anchorItem: volIcon
        triggerHovered: volIcon.hovered || micIcon.hovered
        fromEdge: Edges.Left
    }
    BatteryPopout {
        id: battPopout
        anchorItem: battIcon
        triggerHovered: battIcon.hovered
        fromEdge: Edges.Left
        visible: Battery.available && shown
    }
    NotifPopout {
        id: notifPopout
        anchorItem: bellIcon
        triggerHovered: bellIcon.hovered
        fromEdge: Edges.Left
    }
 }
@@ -0,0 +1,164 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // One slot on the right-hand rail: a glyph with an optional micro readout
 // stacked beneath it, and a crimson bar that wipes down the leading edge on
 // hover. The rail is only 48px wide, so unlike StatusIcon the readout sits
 // under the glyph rather than beside it, and anything longer than a percentage
 // belongs in the popout instead.
 Item {
    id: root
    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
    property bool pulsing: false
    // Hold the readout line open even while there is nothing to put in it.
    // Volume drops its percentage when muted and the bell only carries a count
    // when something is unread, so without this the slot collapsed from 42px to
    // 32px and every icon below it jumped a third of its own height.
    property bool reserveReadout: false
    readonly property bool hasReadout: root.readout !== "" || root.reserveReadout
    readonly property bool hovered: hover.hovered
    // Clearance between the wipe and the rail's left edge, chosen so the bar
    // stays inside the slab once `scale` has expanded the icon about its centre.
    readonly property real wipeInset: 5
    signal clicked()
    signal scrolled(real delta)
    implicitWidth: Theme.railWidth
    implicitHeight: root.hasReadout ? root.glyphBand + readoutLine.height + 1 : root.glyphBand
    // The glyph always sits centred in a fixed band at the top of the slot and
    // the readout hangs below it, rather than the pair being centred together.
    // Centring the pair meant the icon slid up and down by a few px whenever its
    // number appeared or vanished — the icons stopped lining up with each other
    // exactly when something was changing and you were looking at them.
    readonly property real glyphBand: 32
    // Nerd Font's status glyphs are not all centred inside their own advance —
    // the muted-speaker and muted-mic marks carry their cross out to the right,
    // so centring the advance box left them visibly off-axis next to the wifi
    // and bluetooth glyphs. Centre the ink instead, capped so a glyph with an
    // odd bounding box cannot slide far off the rail's axis.
    readonly property real opticalShift: {
        const ink = glyphMetrics.tightBoundingRect;
        if (ink.width <= 0) return 0;
        const off = glyphMetrics.advanceWidth / 2 - (ink.x + ink.width / 2);
        return Math.max(-4, Math.min(4, off));
    }
    TextMetrics {
        id: glyphMetrics
        text: root.icon
        font.family: Theme.fontIcon
        font.pixelSize: Theme.fsLarge
    }
    Item {
        id: layout
        anchors.fill: parent
        Icon {
            id: glyph
            x: (root.width - width) / 2 + root.opticalShift
            y: (root.glyphBand - height) / 2
            text: root.icon
            pulsing: root.pulsing
            font.pixelSize: Theme.fsLarge
            color: {
                if (root.alert) return Theme.accent;
                if (root.dim) return Theme.muted;
                if (root.hovered) return Theme.glow;
                return root.tint;
            }
            Behavior on color {
                ColorAnimation { duration: Theme.durBase }
            }
        }
        Text {
            id: readoutLine
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: root.glyphBand + 1
            visible: root.readout !== ""
            text: root.readout
            color: root.dim ? Theme.muted : Theme.subtext
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.weight: Font.DemiBold
            renderType: Text.NativeRendering
            Behavior on color {
                ColorAnimation { duration: Theme.durBase }
            }
        }
    }
    // Leading-edge wipe. On the rail this runs vertically down the left side,
    // mirroring the slash P5Panel puts on horizontal modules.
    //
    // Held off the edge by `wipeInset`: the icon spans the rail's full width, so
    // at x = 0 this landed exactly on the slab's own border, and the 1.08 hover
    // scale then pushed it out past the silhouette onto the desktop. The inset
    // has to survive that scale, which is why it is not simply 1 or 2.
    //
    // It is crimson rather than `tint` because it only ever appears on hover,
    // and hover is crimson everywhere else in the shell (Theme.glow). Painting
    // it white put a white bar on the rail's edge for no stated reason.
    Rectangle {
        anchors.left: parent.left
        anchors.leftMargin: root.wipeInset
        anchors.verticalCenter: parent.verticalCenter
        width: 2
        height: root.hovered ? root.height - 4 : 0
        color: Theme.glow
        Behavior on height {
            NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutExpo }
        }
    }
    scale: root.hovered ? 1.08 : 1.0
    Behavior on scale {
        NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
    }
    onAlertChanged: if (alert) glyph.bump()
    HoverHandler {
        id: hover
        cursorShape: Qt.PointingHandCursor
    }
    TapHandler {
        acceptedButtons: Qt.LeftButton
        onTapped: root.clicked()
    }
    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
    }
 }
@@ -13,7 +13,8 @@ BarPill {
    required property var screenRef
    accent: Theme.heat(Math.max(Sys.cpuUsage, Sys.memPercent))
-    padding: Theme.padS
+
    padding: Theme.padM
    implicitWidth: layout.implicitWidth + contentPad * 2
    onClicked: Actions.openSystemMonitor()
@@ -28,6 +29,7 @@ BarPill {
            label: "CPU"
            value: Sys.cpuUsage
            readout: Math.round(Sys.cpuUsage) + "%"
            widest: "100%"
        }
        Divider {}
@@ -36,6 +38,7 @@ BarPill {
            label: "MEM"
            value: Sys.memPercent
            readout: Sys.memUsed.toFixed(1) + "G"
            widest: "88.8G"
        }
        Divider { visible: Sys.gpuAvailable }
@@ -45,20 +48,27 @@ BarPill {
            label: "GPU"
            value: Sys.gpuUsage
            readout: Math.round(Sys.gpuUsage) + "%"
            widest: "100%"
        }
    }
-    component Divider: Rectangle {
+    component Divider: Item {
        anchors.verticalCenter: parent.verticalCenter
-        width: 1
+        implicitWidth: rule.width
-        height: 18
+        implicitHeight: 18
-        color: Theme.alpha(Theme.outline, 0.8)
+
-        transform: Matrix4x4 {
+        // Sized to hold its own lean — see the note on the bar's divider.
-            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 18 * Theme.skew,
+        Skew {
-                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+            id: rule
            anchors.centerIn: parent
            width: parent.height * Theme.skew + 1
            height: parent.height
            color: Theme.alpha(Theme.outline, 0.8)
        }
    }
    // A tiny fixed label makes every number self-describing without turning the
    // compact meter cluster back into three separate cards.
    component Metric: Column {
        id: metric
@@ -66,29 +76,53 @@ BarPill {
        property real value: 0
        property string readout: ""
        // The widest reading this metric will ever show. The number column is
        // sized from this rather than from the live text, because sizing to the
        // live text is what made the whole right-hand group breathe in and out:
        // "9%" and "100%" are ~14px apart in Archivo Black, so every tick of the
        // CPU sampler nudged the metrics, the media pill and the clock sideways.
        // Reserving the maximum costs a few px of blank and buys a bar that
        // never moves.
        property string widest: "100%"
        readonly property real numberWidth: Math.max(gauge.width, metrics.advanceWidth)
        readonly property real headWidth: labelText.implicitWidth + head.spacing + numberWidth
        anchors.verticalCenter: parent.verticalCenter
-        spacing: 1
+        spacing: 2
        width: Math.max(headWidth, 44)
        TextMetrics {
            id: metrics
            text: metric.widest
            font: gauge.font
        }
        Row {
            id: head
            spacing: 4
            Text {
-                anchors.verticalCenter: parent.verticalCenter
+                id: labelText
                anchors.baseline: gauge.baseline
                text: metric.label
                color: Theme.muted
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
-                font.letterSpacing: 1.5
+                font.weight: Font.Bold
                font.letterSpacing: 0.5
                renderType: Text.NativeRendering
            }
            Text {
-                anchors.verticalCenter: parent.verticalCenter
+                id: gauge
                text: metric.readout
                color: Theme.heat(metric.value)
-                font.family: Theme.fontMono
+                font.family: Theme.fontDisplay
-                font.pixelSize: Theme.fsSmall
+                font.pixelSize: Theme.fsBody
-                font.weight: Font.DemiBold
+                font.weight: Theme.weightDisplay
                font.italic: true
                font.letterSpacing: 0.5
                renderType: Text.NativeRendering
                Behavior on color {
@@ -97,12 +131,15 @@ BarPill {
            }
        }
        // Ends flush with the reading above it instead of stopping short at a
        // fixed 43px, so each metric reads as one block.
        MeterBar {
            value: metric.value
            segments: 9
            segmentWidth: 3
            spacing: 2
            height: 5
            width: metric.width
            segmentWidth: (width - 8 * spacing) / 9
        }
    }
@@ -20,26 +20,25 @@ BarPill {
    onClicked: Actions.launch("fuzzel")
    onRightClicked: Actions.reloadShell()
-    Icon {
+    // The wordmark. Was the Death arcana skull (nf-md-skull, U+F068C) — a
    // pictogram in a shell that otherwise says everything in heavy italic
    // type. SplitText puts it in the display face with the crimson-and-black
    // offset every other heading carries, so the house mark is built out of
    // the same parts as the rest of the bar.
    SplitText {
        id: mark
        anchors.centerIn: parent
-        text: "󰋠"
+        text: "P5"
-        font.pixelSize: Theme.fsTitle
+        pixelSize: Theme.fsLarge
        letterSpacing: 0
        color: root.hovered ? Theme.accent : Theme.primary
    }
-    // Spin the mark on click, then settle.
+    // Kick the ghosts out and let them snap back. The skull could spin a full
    // turn and still read as a skull; a wordmark upside down just reads as
    // broken, so the click gets the glitch instead.
    Connections {
        target: root
-        function onClicked() { spin.restart(); }
+        function onClicked() { mark.glitch(); }
    }
    SequentialAnimation {
        id: spin
        NumberAnimation {
            target: mark; property: "rotation"
            from: 0; to: 360; duration: Theme.durSlow
            easing.type: Easing.OutExpo
        }
    }
 }
@@ -71,7 +71,9 @@ BarPill {
            icon: Brightness.icon
            label: Math.round(Brightness.percent) + "%"
            labelWidth: 34
-            tint: Theme.warn
+            // Brightness is never an alarm — it stays white and lets the
            // battery be the only thing in the cluster that can go crimson.
            tint: Theme.text
            onScrolled: delta => Brightness.change(delta > 0 ? 5 : -5)
        }
@@ -1,92 +1,102 @@
 import QtQuick
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Services.SystemTray
 import Quickshell.Widgets
 import "root:/config"
 import "root:/components"
 import "root:/popouts"
-// StatusNotifier tray. Left click activates, right click opens the app's own
+// StatusNotifier tray, as a vertical column for the right-hand rail. Left click
-// menu, middle click is the secondary action.
+// activates, right click opens the app's own menu, middle click is the
-BarPill {
+// secondary action. The surrounding slab is the caller's business — this is
 // just the stack of icons.
 Column {
    id: root
-    required property var screenRef
+    spacing: Theme.padS + 2
    accent: Theme.blue
    padding: Theme.padS
    interactive: false
    visible: SystemTray.items.values.length > 0
    implicitWidth: visible ? layout.implicitWidth + contentPad * 2 : 0
-    Row {
+    Repeater {
-        id: layout
+        model: SystemTray.items
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        spacing: Theme.padM
-        Repeater {
+        Item {
-            model: SystemTray.items
+            id: entry
-            Item {
+            required property SystemTrayItem modelData
                id: entry
-                required property SystemTrayItem modelData
+            width: 18
            height: 18
            anchors.horizontalCenter: parent.horizontalCenter
-                width: 18
+            // App icons arrive in their own brand colours, which wrecks the
-                height: 18
+            // two-hue palette faster than anything else in the shell. Flatten
-                anchors.verticalCenter: parent.verticalCenter
+            // every one of them to a single-colour silhouette: white at rest,
            // crimson under the pointer. Detail inside the glyph is lost on
            // purpose — that flattening *is* the screen-printed look.
            IconImage {
                id: img
                anchors.fill: parent
                source: entry.modelData.icon
                asynchronous: true
-                IconImage {
+                layer.enabled: true
-                    id: img
+                layer.effect: MultiEffect {
-                    anchors.fill: parent
+                    colorization: 1.0
-                    source: entry.modelData.icon
+                    colorizationColor: itemHover.hovered
-                    asynchronous: true
+                        ? Theme.accent
-                    opacity: itemHover.hovered ? 1.0 : 0.82
+                        : Theme.text
-                    Behavior on opacity {
+                    Behavior on colorizationColor {
-                        NumberAnimation { duration: Theme.durFast }
+                        ColorAnimation { duration: Theme.durFast }
                    }
                }
-                scale: itemHover.hovered ? 1.18 : 1.0
+                opacity: itemHover.hovered ? 1.0 : 0.82
                Behavior on scale {
                    NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
                }
-                HoverHandler {
+                Behavior on opacity {
-                    id: itemHover
+                    NumberAnimation { duration: Theme.durFast }
                    cursorShape: Qt.PointingHandCursor
                }
            }
-                TapHandler {
+            scale: itemHover.hovered ? 1.18 : 1.0
-                    acceptedButtons: Qt.LeftButton
+            Behavior on scale {
-                    onTapped: {
+                NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
-                        if (entry.modelData.onlyMenu) {
+            }
-                            menuAnchor.open();
+
-                        } else {
+            HoverHandler {
-                            entry.modelData.activate();
+                id: itemHover
-                        }
+                cursorShape: Qt.PointingHandCursor
            }
            TapHandler {
                acceptedButtons: Qt.LeftButton
                onTapped: {
                    if (entry.modelData.onlyMenu) {
                        menu.toggle();
                    } else {
                        entry.modelData.activate();
                    }
                }
            }
-                TapHandler {
+            TapHandler {
-                    acceptedButtons: Qt.RightButton
+                acceptedButtons: Qt.RightButton
-                    onTapped: menuAnchor.open()
+                onTapped: {
                    if (entry.modelData.hasMenu) menu.toggle();
                }
            }
-                TapHandler {
+            TapHandler {
-                    acceptedButtons: Qt.MiddleButton
+                acceptedButtons: Qt.MiddleButton
-                    onTapped: entry.modelData.secondaryActivate()
+                onTapped: entry.modelData.secondaryActivate()
-                }
+            }
-                QsMenuAnchor {
+            // Menus open to the left, into the screen rather than off its edge.
-                    id: menuAnchor
+            TrayMenu {
-                    menu: entry.modelData.menu
+                id: menu
-                    anchor.item: entry
+                anchorItem: entry
-                    anchor.edges: Edges.Bottom
+                menuHandle: entry.modelData.menu
                    anchor.gravity: Edges.Bottom
                    anchor.margins.top: Theme.popoutGap
                }
            }
        }
    }
@@ -40,11 +40,12 @@ Item {
    }
    implicitWidth: row.implicitWidth
-    implicitHeight: 20
+    implicitHeight: 24
    Row {
        id: row
        anchors.verticalCenter: parent.verticalCenter
        spacing: 6
        Repeater {
@@ -54,6 +55,7 @@ Item {
                id: pip
                required property var modelData
                required property int index
                readonly property int wsId: modelData
                readonly property var info: root.occupancy[wsId]
                readonly property bool occupied: info !== undefined && info.count > 0
@@ -61,7 +63,9 @@ Item {
                readonly property bool focused: root.focusedId === wsId
                readonly property bool hovered: pipHover.hovered
-                width: focused ? 34 : (occupied ? 16 : 10)
+                // Every tick is the same height and the same shear. Only the
                // width changes, and only to say which workspace is focused.
                width: focused ? 32 : (occupied ? 16 : 9)
                height: 18
                Behavior on width {
@@ -72,24 +76,23 @@ Item {
                    }
                }
-                Rectangle {
+                Skew {
                    id: tick
                    anchors.fill: parent
                    color: {
                        if (pip.urgent) return Theme.accent;
                        if (pip.focused) return Theme.primary;
                        if (pip.hovered) return Theme.glow;
                        if (pip.occupied) return Theme.alpha(Theme.primary, 0.55);
                        return Theme.alpha(Theme.outline, 0.75);
                    }
-                    transform: Matrix4x4 {
+                    // Focused is a solid crimson block. Occupied is a white
-                        matrix: Qt.matrix4x4(
+                    // block at half weight. Empty is an outline. Three states,
-                            1, -Theme.skew, 0, pip.height * Theme.skew,
+                    // two colours, no ambiguity.
-                            0, 1, 0, 0,
+                    color: {
-                            0, 0, 1, 0,
+                        if (pip.focused || pip.urgent) return Theme.accent;
-                            0, 0, 0, 1)
+                        if (pip.hovered) return Theme.text;
                        if (pip.occupied) return Theme.alpha(Theme.text, 0.5);
                        return "transparent";
                    }
                    borderColor: pip.occupied || pip.focused
                        ? "transparent"
                        : Theme.alpha(Theme.text, 0.35)
                    borderWidth: 1
                    Behavior on color {
                        ColorAnimation { duration: Theme.durBase }
@@ -102,9 +105,9 @@ Item {
                    opacity: pip.focused ? 1 : 0
                    visible: opacity > 0.01
                    text: pip.wsId
-                    color: Theme.base
+                    color: Theme.ink
                    font.family: Theme.fontDisplay
-                    font.pixelSize: Theme.fsSmall
+                    font.pixelSize: Theme.fsBody
                    font.weight: Theme.weightDisplay
                    font.italic: true
                    renderType: Text.NativeRendering
@@ -129,8 +132,13 @@ Item {
                    cursorShape: Qt.PointingHandCursor
                }
                // Hyprland evaluates IPC `dispatch` payloads as Lua now that the
                // config is Lua (hyprland.lua rather than hyprland.conf), so the
                // old `dispatch workspace 3` string is a Lua syntax error and the
                // click silently does nothing. Dispatchers have to be called the
                // same way lua/binds/workspaces.lua calls them.
                TapHandler {
-                    onTapped: Hyprland.dispatch("workspace " + pip.wsId)
+                    onTapped: Hyprland.dispatch("hl.dsp.focus({workspace = " + pip.wsId + "})")
                }
            }
        }
@@ -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
 }
@@ -31,6 +31,29 @@ Singleton {
        ];
    }
    // Vertical counterpart: the *horizontal* edges slant instead, by a fraction
    // of width. A tall rail slab has to lean this way — leaning its vertical
    // edges by a fraction of its height would shear it clean off the screen.
    function parallelogramV(w: real, h: real, lean: real): var {
        const off = w * lean;
        return [
            Qt.point(0, off),
            Qt.point(w, 0),
            Qt.point(w, h - off),
            Qt.point(0, h)
        ];
    }
    function parallelogramVL(w: real, h: real, lean: real): var {
        const off = w * lean;
        return [
            Qt.point(0, 0),
            Qt.point(w, off),
            Qt.point(w, h),
            Qt.point(0, h - off)
        ];
    }
    function rect(w: real, h: real): var {
        return [Qt.point(0, 0), Qt.point(w, 0), Qt.point(w, h), Qt.point(0, h)];
    }
@@ -1,4 +1,5 @@
 import QtQuick
 import QtQuick.Window
 import "root:/config"
 // Horizontally scrolling text that only moves when it actually overflows, and
@@ -18,6 +19,13 @@ Item {
    readonly property bool overflowing: label.implicitWidth > width + 1
    // An Item inside an unmapped PopupWindow still reports itself visible, so a
    // marquee in a closed popout would keep its infinite animation alive. That
    // animation writes QML properties on every frame — at 240 Hz, three closed
    // popout marquees are enough to keep the whole animation driver spinning and
    // burn a fifth of a core with nothing on screen. Follow the window instead.
    readonly property bool onScreen: Window.window?.visible ?? true
    clip: true
    implicitHeight: label.implicitHeight
    implicitWidth: label.implicitWidth
@@ -38,7 +46,7 @@ Item {
    SequentialAnimation {
        id: scroll
-        running: root.running && root.overflowing && root.visible
+        running: root.running && root.overflowing && root.visible && root.onScreen
        loops: Animation.Infinite
        PauseAnimation { duration: root.pause }
@@ -8,7 +8,14 @@ MultiEffect {
    maskEnabled: maskItem !== null
    maskSource: maskItem
-    // Hard edge — the chopped corners should read as cuts, not fades.
+
    // The chopped corners should read as cuts, not fades — but a spread of 0
    // is a hard `alpha < 0.5 ? 0 : 1` step, which throws away the one thing
    // that makes the cut look drawn rather than pixelated: the mask Shape's own
    // coverage antialiasing. Every partially covered pixel along a diagonal got
    // rounded to all-or-nothing and the art came out with a visible staircase
    // down both leaning edges. A narrow spread lets that single-pixel ramp
    // through and nothing wider — still a cut, just not a jagged one.
    maskThresholdMin: 0.5
-    maskSpreadAtMin: 0.0
+    maskSpreadAtMin: 0.3
 }
@@ -1,5 +1,6 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // A segmented load meter — slanted ticks that light up left to right. Reads as
 // a gauge at a glance and keeps the panel language consistent.
@@ -31,9 +32,10 @@ Item {
                width: root.segmentWidth
                height: root.height
-                Rectangle {
+                Skew {
                    width: root.segmentWidth
                    height: root.height
                    lean: root.lean
                    color: parent.index < root.litCount ? root.activeColor : root.idleColor
                    // Peak segments glow, so a pegged CPU is visible peripherally.
@@ -41,14 +43,6 @@ Item {
                        ? (parent.index >= root.segments - 2 ? 1.0 : 0.9)
                        : 1.0
                    transform: Matrix4x4 {
                        matrix: Qt.matrix4x4(
                            1, -root.lean, 0, root.height * root.lean,
                            0, 1, 0, 0,
                            0, 0, 1, 0,
                            0, 0, 0, 1)
                    }
                    Behavior on color {
                        ColorAnimation { duration: Theme.durBase }
                    }
@@ -0,0 +1,91 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // One metric in a popout: a label and its reading on a line, with a wide
 // sheared segmented meter underneath.
 //
 // This replaces the radial Gauge. A 270° dial was the only curved thing in a
 // shell whose whole geometry is sheared slabs and hard chamfers, so it read as
 // though it had been imported from another design. The meter says the same
 // thing in the language the bar and the OSD already speak, and it gets far more
 // resolution across a popout's width than a 88px dial did.
 Item {
    id: root
    property string label: ""
    property real value: 0            // 0..100
    property string readout: Math.round(root.value) + "%"
    property string sub: ""
    property color tone: Theme.heat(root.value)
    property int segments: 24
    property real segmentSpacing: 3
    implicitHeight: head.height + Theme.padS + meter.height
    Item {
        id: head
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: Math.max(name.implicitHeight, figure.implicitHeight)
        Text {
            id: name
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            text: root.label.toUpperCase()
            color: Theme.subtext
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.letterSpacing: 2
            renderType: Text.NativeRendering
        }
        // The secondary figure — temperature, used-of-total. Sits next to the
        // label rather than under the number so the right edge stays a single
        // clean column of readings.
        Text {
            anchors.left: name.right
            anchors.leftMargin: Theme.padM
            anchors.right: figure.left
            anchors.rightMargin: Theme.padM
            anchors.verticalCenter: parent.verticalCenter
            visible: root.sub !== ""
            text: root.sub
            color: Theme.muted
            elide: Text.ElideRight
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            renderType: Text.NativeRendering
        }
        SplitText {
            // Not `value` — an id by that name shadows the `value` property, and
            // the defaults above then round a Text item instead of a number.
            id: figure
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            text: root.readout
            pixelSize: Theme.fsBody
            color: Theme.text
            split: 1
            splitOpacity: 0.5
        }
    }
    MeterBar {
        id: meter
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 12
        segments: root.segments
        spacing: root.segmentSpacing
        // Fill the row exactly rather than leaving a ragged tail on the right.
        segmentWidth: (width - (root.segments - 1) * root.segmentSpacing) / root.segments
        value: root.value
        activeColor: root.tone
    }
 }
@@ -2,6 +2,7 @@ import QtQuick
 import Quickshell
 import Quickshell.Services.Notifications
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // One notification, used both in the history list and as a floating toast.
@@ -17,14 +18,20 @@ Item {
    signal dismissed()
    // The card's own geometry, published so anything drawn along its edges —
    // the toast countdown rule — can stay inside the chopped corners instead of
    // running out past them.
    readonly property real lean: 0.05
    readonly property real chop: 12
    implicitHeight: panel.height
    P5Panel {
        id: panel
        width: parent.width
        height: layout.implicitHeight + Theme.padM * 2
-        lean: 0.05
+        lean: root.lean
-        chop: 12
+        chop: root.chop
        fill: Theme.surface
        fillOpacity: 0.97
        border: Theme.alpha(root.tone, hover.hovered ? 0.95 : 0.5)
@@ -117,18 +124,13 @@ Item {
                        implicitWidth: actionLabel.implicitWidth + Theme.padM
                        implicitHeight: 22
-                        Rectangle {
+                        Skew {
                            anchors.fill: parent
                            color: actionHover.hovered
                                ? Theme.alpha(root.tone, 0.3)
                                : Theme.alpha(root.tone, 0.1)
-                            border.width: 1
+                            borderWidth: 1
-                            border.color: Theme.alpha(root.tone, 0.6)
+                            borderColor: Theme.alpha(root.tone, 0.6)
                            transform: Matrix4x4 {
                                matrix: Qt.matrix4x4(1, -Theme.skew, 0, 22 * Theme.skew,
                                                     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
                            }
                        }
                        Text {
@@ -0,0 +1,103 @@
 import QtQuick
 import QtQuick.Shapes
 import "root:/config"
 import "root:/components"
 // The shared ground for the two full-screen surfaces: a crimson wedge leaning
 // at the house angle, a tiled stripe field that sweeps in from the left, and a
 // halftone dot wash over the top.
 //
 // The lock screen and the power menu each used to draw their own version of
 // this. They disagreed — the power menu had a wedge and a full stripe field,
 // the lock had a 42px stripe band and no wedge, and the wedge leaned at 0.32
 // where every panel in the shell leans at Theme.skew. Building both on one
 // component is what makes them read as the same object seen twice rather than
 // as two guesses at the same brief.
 Item {
    id: root
    // 0 = withdrawn, 1 = fully present. Drives the stripe slide, the stripe
    // opacity and the wedge together, so a caller animates one number instead
    // of keeping three in sync. The power menu runs it both ways on open and
    // close; the lock runs it once on entry.
    property real reveal: 1
    property color tone: Theme.accent
    property bool wedge: true
    property real wedgeOpacity: 0.35
    // Bottom-left corner of the wedge and its span, as fractions of width. The
    // wedge leans right going up, like every other edge in the shell, so its
    // top edge sits `leanOffset` further right than its bottom.
    property real wedgeLeft: 0
    property real wedgeSpan: 0.34
    property bool stripes: true
    property real stripeOpacity: 0.10
    property bool halftone: true
    property real halftoneOpacity: 0.05
    property color halftoneColor: Theme.primary
    // ONE angle, everywhere — the same rule the panels follow.
    readonly property real leanOffset: root.height * Theme.skew
    // Diagonal stripe field, sliding in from off-screen left.
    Image {
        anchors.fill: parent
        visible: root.stripes && root.reveal > 0
        source: Theme.texStripes
        fillMode: Image.Tile
        opacity: root.stripeOpacity * root.reveal
        smooth: false
        layer.enabled: true
        layer.effect: TintEffect {
            tintColor: root.tone
        }
        transform: Translate {
            x: -root.width * (1 - root.reveal)
        }
    }
    // The wedge. Drawn after the stripes so it reads as a slab laid over them.
    Shape {
        anchors.fill: parent
        visible: root.wedge && root.reveal > 0
        opacity: root.reveal
        preferredRendererType: Shape.CurveRenderer
        ShapePath {
            fillColor: Theme.alpha(Theme.accentDim, root.wedgeOpacity)
            strokeColor: "transparent"
            joinStyle: ShapePath.MiterJoin
            PathPolyline {
                path: {
                    const x = root.wedgeLeft * root.width;
                    const span = root.wedgeSpan * root.width;
                    const off = root.leanOffset;
                    return Geom.closed([
                        Qt.point(x + off, 0),
                        Qt.point(x + off + span, 0),
                        Qt.point(x + span, root.height),
                        Qt.point(x, root.height)
                    ]);
                }
            }
        }
    }
    // Screen-printed dot wash over the whole thing.
    Image {
        anchors.fill: parent
        visible: root.halftone
        source: Theme.texHalftone
        fillMode: Image.Tile
        opacity: root.halftoneOpacity
        smooth: false
        layer.enabled: true
        layer.effect: TintEffect { tintColor: root.halftoneColor }
    }
 }
@@ -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)
 }
@@ -18,6 +18,11 @@ Item {
    property real lean: Theme.skew
    property bool leanLeft: false
    // Tall panels (the right-hand rail) slant their horizontal edges instead,
    // by a fraction of width, and inset their content top/bottom rather than
    // left/right.
    property bool vertical: false
    // Corner chop size, and which corners get chopped (indices into the
    // polygon, clockwise from the top-left). Default chops the two corners that
    // read as "cut" against the lean.
@@ -34,13 +39,30 @@ Item {
    property color halftoneColor: Theme.primary
    property real halftoneOpacity: 0.07
-    // Inner glow along the top edge, for panels that should feel backlit.
+    // Accepted and ignored. This used to paint a teal-to-transparent gradient
    // down the top of every panel in the shell — the single biggest source of
    // the murky blue cast. Fills are flat now. Kept as a no-op property so the
    // call sites that still set it don't have to be chased down.
    property bool sheen: false
-    readonly property real leanInset: height * Math.abs(lean)
+    // The screen-print stack. A pure-black copy of the silhouette sits behind
-    readonly property var polygon: leanLeft
+    // the fill, offset down-and-right, and the fill carries a black keyline
-        ? Geom.parallelogramL(width, height, lean)
+    // outside its coloured border. Together these are what stop the panel from
-        : Geom.parallelogram(width, height, lean)
+    // reading as a flat clip-path.
    property bool drop: true
    property real dropOffset: Theme.dropOffset
    property color dropColor: Theme.ink
    property bool keyline: true
    property real keylineWidth: Theme.keylineWidth
    readonly property real leanInset:
        (vertical ? width : height) * Math.abs(lean)
    readonly property var polygon: vertical
        ? (leanLeft ? Geom.parallelogramVL(width, height, lean)
                    : Geom.parallelogramV(width, height, lean))
        : (leanLeft ? Geom.parallelogramL(width, height, lean)
                    : Geom.parallelogram(width, height, lean))
    // Child content lives inside `contentItem`, inset on both sides far enough
    // to clear the slanted edges. Panels do not auto-size: callers set implicit
@@ -52,14 +74,79 @@ Item {
    readonly property real contentPad: padding + leanInset
    // The panel outline as a mask texture. Anything that is painted from the
    // raw polygon rather than from the chamfered one has to be clipped to this,
    // or it escapes at the chopped corners.
    Shape {
        id: silhouette
        anchors.fill: parent
        visible: false
        layer.enabled: true
        layer.smooth: true
        preferredRendererType: Shape.CurveRenderer
        ShapePath {
            fillColor: "white"
            strokeColor: "transparent"
            joinStyle: ShapePath.MiterJoin
            PathPolyline {
                path: Geom.chamfer(root.polygon, root.chop, root.chopCorners)
            }
        }
    }
    // Offset black copy of the silhouette, behind everything.
    Loader {
        anchors.fill: parent
        active: root.drop && root.dropOffset > 0
        sourceComponent: Shape {
            preferredRendererType: Shape.CurveRenderer
            asynchronous: false
            transform: Translate {
                x: root.dropOffset * (root.leanLeft ? -1 : 1)
                y: root.dropOffset
            }
            ShapePath {
                fillColor: root.dropColor
                strokeColor: "transparent"
                joinStyle: ShapePath.MiterJoin
                PathPolyline {
                    path: Geom.chamfer(root.polygon, root.chop, root.chopCorners)
                }
            }
        }
    }
    Shape {
        id: body
        anchors.fill: parent
        preferredRendererType: Shape.CurveRenderer
        asynchronous: false
        // Fill, carrying the black keyline. The stroke is centred on the path,
        // so half of it sits outside the silhouette — which is exactly the
        // heavy outer contour the style wants.
        ShapePath {
            fillColor: Theme.alpha(root.fill, root.fillOpacity)
            strokeColor: root.keyline ? root.dropColor : "transparent"
            strokeWidth: root.keyline
                ? root.borderWidth + root.keylineWidth * 2
                : 0
            joinStyle: ShapePath.MiterJoin
            capStyle: ShapePath.FlatCap
            PathPolyline {
                path: Geom.chamfer(root.polygon, root.chop, root.chopCorners)
            }
        }
        // Coloured border, drawn on top of the keyline so it reads as an inlay.
        ShapePath {
            fillColor: "transparent"
            strokeColor: root.borderWidth > 0 ? root.border : "transparent"
            strokeWidth: root.borderWidth
            joinStyle: ShapePath.MiterJoin
@@ -76,90 +163,86 @@ Item {
        anchors.fill: parent
        active: root.halftone
        asynchronous: true
-        sourceComponent: Item {
+        sourceComponent: Image {
-            Shape {
+            anchors.fill: parent
-                id: maskShape
+            source: Theme.texHalftone
-                anchors.fill: parent
+            fillMode: Image.Tile
-                visible: false
+            opacity: root.halftoneOpacity
-                layer.enabled: true
+            smooth: false
-                layer.smooth: true
+            layer.enabled: true
-                preferredRendererType: Shape.CurveRenderer
+            layer.effect: MultiEffect {
-                ShapePath {
+                colorization: 1.0
-                    fillColor: "white"
+                colorizationColor: root.halftoneColor
-                    strokeColor: "transparent"
+                maskEnabled: true
-                    PathPolyline {
+                maskSource: silhouette
                        path: Geom.chamfer(root.polygon, root.chop, root.chopCorners)
                    }
                }
            }
            Image {
                anchors.fill: parent
                source: Theme.texHalftone
                fillMode: Image.Tile
                opacity: root.halftoneOpacity
                smooth: false
                layer.enabled: true
                layer.effect: MultiEffect {
                    colorization: 1.0
                    colorizationColor: root.halftoneColor
                    maskEnabled: true
                    maskSource: maskShape
                }
            }
        }
    }
    // Backlit top edge.
    Loader {
        anchors.fill: parent
        active: root.sheen
        sourceComponent: Shape {
            preferredRendererType: Shape.CurveRenderer
            ShapePath {
                strokeColor: "transparent"
                fillGradient: LinearGradient {
                    x1: 0; y1: 0; x2: 0; y2: root.height
                    GradientStop { position: 0.0; color: Theme.alpha(Theme.primary, 0.16) }
                    GradientStop { position: 0.55; color: "transparent" }
                }
                PathPolyline {
                    path: Geom.chamfer(root.polygon, root.chop, root.chopCorners)
                }
            }
        }
    }
    // Leading-edge slash.
    //
    // Its polygon is built from the panel's raw corners, so on a panel with a
    // chopped corner the slash used to run straight through the cut and out the
    // far side — a crimson wedge sitting a few pixels outside the silhouette,
    // at an angle that matched nothing. It is masked to the outline now, so the
    // slash ends exactly where the chamfer does.
    Loader {
        anchors.fill: parent
        active: root.slash
-        sourceComponent: Shape {
+        sourceComponent: Item {
-            preferredRendererType: Shape.CurveRenderer
+            Shape {
-            ShapePath {
+                id: slashShape
-                fillColor: root.slashColor
+                anchors.fill: parent
-                strokeColor: "transparent"
+                visible: false
-                PathPolyline {
+                layer.enabled: true
-                    path: {
+                layer.smooth: true
-                        const off = root.height * root.lean;
+                preferredRendererType: Shape.CurveRenderer
-                        const w = root.slashWidth;
+
-                        return root.leanLeft
+                ShapePath {
-                            ? Geom.closed([Qt.point(0, 0), Qt.point(w, 0),
+                    fillColor: root.slashColor
-                                           Qt.point(off + w, root.height), Qt.point(off, root.height)])
+                    strokeColor: "transparent"
-                            : Geom.closed([Qt.point(off, 0), Qt.point(off + w, 0),
+
-                                           Qt.point(w, root.height), Qt.point(0, root.height)]);
+                    PathPolyline {
                        path: {
                            const t = root.slashWidth;
                            // On a rail slab the slash runs along the slanted
                            // top edge instead of down a side.
                            if (root.vertical) {
                                const voff = root.width * root.lean;
                                return root.leanLeft
                                    ? Geom.closed([Qt.point(0, 0), Qt.point(root.width, voff),
                                                   Qt.point(root.width, voff + t), Qt.point(0, t)])
                                    : Geom.closed([Qt.point(0, voff), Qt.point(root.width, 0),
                                                   Qt.point(root.width, t), Qt.point(0, voff + t)]);
                            }
                            const off = root.height * root.lean;
                            return root.leanLeft
                                ? Geom.closed([Qt.point(0, 0), Qt.point(t, 0),
                                               Qt.point(off + t, root.height), Qt.point(off, root.height)])
                                : Geom.closed([Qt.point(off, 0), Qt.point(off + t, 0),
                                               Qt.point(t, root.height), Qt.point(0, root.height)]);
                        }
                    }
                }
            }
            MultiEffect {
                anchors.fill: parent
                source: slashShape
                maskEnabled: true
                maskSource: silhouette
            }
        }
    }
    Item {
        id: contentHolder
        anchors.fill: parent
-        anchors.leftMargin: root.contentPad
+        anchors.leftMargin: root.vertical ? root.padding : root.contentPad
-        anchors.rightMargin: root.contentPad
+        anchors.rightMargin: root.vertical ? root.padding : root.contentPad
-        anchors.topMargin: root.padding
+        anchors.topMargin: root.vertical ? root.contentPad : root.padding
-        anchors.bottomMargin: root.padding
+        anchors.bottomMargin: root.vertical ? root.contentPad : root.padding
    }
 }
@@ -1,5 +1,6 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // Leaning slider with a chopped handle. Drag or click anywhere on the rail.
 Item {
@@ -7,42 +8,47 @@ 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
-    Rectangle {
+    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
-        transform: Matrix4x4 {
+        Behavior on height {
-            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 6 * Theme.skew,
+            NumberAnimation { duration: Theme.durFast }
                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
    }
    // Fill
-    Rectangle {
+    Skew {
        anchors.verticalCenter: parent.verticalCenter
        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
        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 6 * Theme.skew,
                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        Behavior on width {
            enabled: !drag.active
@@ -55,19 +61,14 @@ Item {
    }
    // Handle
-    Rectangle {
+    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
        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(1, -Theme.skew, 0, height * Theme.skew,
                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
        Behavior on height {
            NumberAnimation { duration: Theme.durFast; easing.type: Easing.OutBack }
        }
@@ -79,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
            }
        }
    }
 }
@@ -16,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.
@@ -24,27 +26,44 @@ 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()
    // Panels hanging off the vertical rail open sideways, so the entry slide has
    // to follow whichever axis the popout actually travels along, and start on
    // the side nearest its trigger.
    readonly property bool horizontal:
        fromEdge === Edges.Left || fromEdge === Edges.Right
    readonly property string slideProperty: horizontal ? "x" : "y"
    readonly property real slideOrigin: bleed + (fromEdge === Edges.Left
        || fromEdge === Edges.Top ? 14 : -14)
    anchor.item: anchorItem
    anchor.edges: fromEdge
    anchor.gravity: fromEdge
-    anchor.adjustment: PopupAdjustment.SlideX
+    anchor.adjustment: horizontal
        ? PopupAdjustment.SlideY
        : PopupAdjustment.SlideX
    anchor.margins.top: Theme.popoutGap
    anchor.margins.bottom: Theme.popoutGap
    anchor.margins.left: Theme.popoutGap
    anchor.margins.right: Theme.popoutGap
    implicitWidth: contentWidth + bleed * 2
    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();
@@ -57,6 +76,19 @@ PopupWindow {
        onTriggered: root.open()
    }
    onVisibleChanged: {
        if (!visible && shown)
            dismissImmediately();
    }
    onClosed: {
        if (remappingPinned) {
            remappingPinned = false;
            remapTimer.restart();
        } else if (shown || pinned) {
            dismissImmediately();
        }
    }
    Timer {
        id: hideTimer
        interval: root.hideDelay
@@ -64,33 +96,125 @@ 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
        height: root.contentHeight
        opacity: 0
-        transformOrigin: Item.Top
+        transformOrigin: {
            switch (root.fromEdge) {
            case Edges.Left: return Item.Right;
            case Edges.Right: return Item.Left;
            case Edges.Top: return Item.Bottom;
            default: return Item.Top;
            }
        }
        scale: 0.94
        // The handler has to live on the content item, not the window: a
        // HoverHandler parented to the PopupWindow itself latches on and the
        // panel never learns the pointer left.
        //
        // Disabled while the popout is down, which clears `hovered`. An unmapped
        // surface gets no leave event, so a handler that was hovered when the
        // window went away stayed hovered — `wantsOpen` never went false again
        // and the panel came back up and refused to close.
        HoverHandler {
            id: panelHover
            enabled: root.shown
        }
        Keys.onEscapePressed: event => {
            if (root.pinned) {
                event.accepted = true;
                root.dismissImmediately();
            }
        }
    }
@@ -105,8 +229,8 @@ PopupWindow {
            to: 1.0; duration: Theme.durSlow; easing.type: Easing.OutBack
        }
        NumberAnimation {
-            target: contentHolder; property: "y"
+            target: contentHolder; property: root.slideProperty
-            from: root.bleed - 14; to: root.bleed
+            from: root.slideOrigin; to: root.bleed
            duration: Theme.durSlow; easing.type: Easing.OutBack
        }
    }
@@ -122,13 +246,16 @@ PopupWindow {
            to: 0.96; duration: Theme.durFast; easing.type: Easing.InQuad
        }
        NumberAnimation {
-            target: contentHolder; property: "y"
+            target: contentHolder; property: root.slideProperty
-            to: root.bleed - 8; duration: Theme.durFast; easing.type: Easing.InQuad
+            to: root.bleed + (root.slideOrigin - root.bleed) * 0.6
            duration: Theme.durFast; easing.type: Easing.InQuad
        }
        onFinished: {
            root.shown = false;
            root.pinned = false;
            contentHolder.x = root.bleed;
            contentHolder.y = root.bleed;
            PopupCoordinator.release(root);
            root.dismissedFully();
        }
    }
@@ -0,0 +1,69 @@
 import QtQuick
 import QtQuick.Shapes
 import "root:/config"
 import "root:/components"
 // A leaning block — the small-scale counterpart to P5Panel.
 //
 // Every tick, rule, meter segment and slider rail in this shell leans at
 // Theme.skew. Shearing a plain Rectangle with a Matrix4x4 does that, but Qt
 // rasterises a Rectangle's geometry with no antialiasing at all, so the slanted
 // edges come out as a hard pixel staircase — at 18px tall that staircase is
 // most of what you see, and it reads as broken rendering rather than as a
 // deliberate angle. Drawing the parallelogram as a Shape with the curve
 // renderer gets analytic coverage AA on the diagonals instead.
 //
 // Drop-in for a sheared Rectangle: set width/height as before and use `color`,
 // `borderColor` and `borderWidth` the same way.
 Shape {
    id: root
    property color color: "transparent"
    property color borderColor: "transparent"
    property real borderWidth: 0
    // Lean of the vertical edges as a fraction of height, matching P5Panel.
    property real lean: Theme.skew
    property bool leanLeft: false
    // Wide, short pieces — the rail's hairline rules — slant their horizontal
    // edges by a fraction of width instead, exactly as P5Panel does for the
    // rail slab.
    property bool vertical: false
    // NOTE ON SIZING. The lean shifts one edge by `lean * height` (or by
    // `lean * width` when vertical), and the piece that actually gets painted is
    // what is left: a Skew declared 1px wide and 20px tall does not draw a 1px
    // rule at an angle, it draws a rule |1 - 20 * 0.249| = 4px thick that hangs
    // 4px to the *left* of the box it was given. That is why the bar's and the
    // rail's hairlines came out fat and off-centre. A thin leaning rule has to be
    // declared with room for its own lean — `height * Theme.skew + weight` — and
    // the call sites that draw one now do exactly that.
    //
    // Zero-sized pieces still have a lean offset, so a collapsed hover wipe or a
    // meter at 0 drew a sub-pixel wedge of pure accent — the stray red dot under
    // the metrics. Nothing with no extent should paint at all.
    visible: root.width > 0 && root.height > 0
    preferredRendererType: Shape.CurveRenderer
    asynchronous: false
    ShapePath {
        fillColor: root.color
        strokeColor: root.borderWidth > 0 ? root.borderColor : "transparent"
        strokeWidth: root.borderWidth
        joinStyle: ShapePath.MiterJoin
        capStyle: ShapePath.FlatCap
        PathPolyline {
            path: {
                const w = root.width, h = root.height, l = root.lean;
                if (root.vertical)
                    return Geom.closed(root.leanLeft ? Geom.parallelogramVL(w, h, l)
                                                     : Geom.parallelogramV(w, h, l));
                return Geom.closed(root.leanLeft ? Geom.parallelogramL(w, h, l)
                                                 : Geom.parallelogram(w, h, l));
            }
        }
    }
 }
@@ -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();
    }
 }
@@ -3,48 +3,130 @@ pragma Singleton
 import QtQuick
 import Quickshell
-// Takemi palette: cold teal/cyan over near-black, with Persona 5 crimson as the
+// Takemi palette: crimson, black, white. Nothing else.
-// alert/accent voice. Derived from ~/.wallpapers/takemi_2.jpg.
+//
 // White does the work: text, icons, idle indicators. Crimson is the only accent
 // and it always means the same thing — active, or wrong. Black is structure,
 // used as a hard keyline rather than as a shadow. There are no gradients in
 // this shell; every fill is flat.
 //
 // The wallpaper is teal. The UI used to be teal too, and the two fought each
 // other into a murky blue-grey. Letting the UI go monochrome-plus-red is what
 // lets the wallpaper read as the colour in the composition.
 Singleton {
    id: root
    // ---------------------------------------------------------------- colors
-    readonly property color base: "#04070a"
+    readonly property color ink: "#000000"
    readonly property color mantle: "#080e14"
    readonly property color surface: "#0d1922"
    readonly property color surfaceAlt: "#14262f"
    readonly property color overlay: "#1d3a47"
    readonly property color outline: "#2b5567"
-    readonly property color text: "#e2f4f8"
+    readonly property color base: "#0a0a0c"
-    readonly property color subtext: "#93b8c4"
+    readonly property color mantle: "#0d0d10"
-    readonly property color muted: "#587c8a"
+    readonly property color surface: "#141418"
    readonly property color surfaceAlt: "#1c1c22"
    readonly property color overlay: "#26262e"
    readonly property color outline: "#3a3a44"
-    readonly property color primary: "#34d3e6"   // electric teal — the house colour
+    readonly property color text: "#ffffff"
-    readonly property color primaryDim: "#17879b"
+    readonly property color subtext: "#c8c8ce"
-    readonly property color glow: "#8ef2ff"
+    readonly property color muted: "#6b6b70"
    readonly property color blue: "#3b8fd6"
    readonly property color deep: "#0d4b5e"
-    readonly property color accent: "#ff2d40"    // P5 crimson
+    // ------------------------------------------------------------ THE KNOB
-    readonly property color accentDim: "#a8121f"
+    // The one colour in this shell. Change this line and the entire accent
-    readonly property color warn: "#ffb03a"
+    // recolours — everything below is derived from it, and nothing else in the
-    readonly property color ok: "#35e08f"
+    // palette carries hue at all.
    //
    // Keep it in step with `$accent` at the top of
    // ~/.config/hypr/modules/takemi.conf, which is what colours the Hyprland
    // window borders. Those are the only two places the colour is written.
    readonly property color accent: "#ff2d40"
-    // Chromatic aberration pair, straight off the wallpaper's RGB split.
+    readonly property color accentDim: Qt.darker(root.accent, 1.9)
-    readonly property color splitRed: "#ff2b4d"
+    readonly property color accentSoft: Qt.lighter(root.accent, 1.35)
-    readonly property color splitCyan: "#25e8ff"
+
    // `primary` is the resting voice of the UI, which is now simply white.
    // Kept under the old name so the existing call sites don't all have to move.
    readonly property color primary: root.text
    readonly property color primaryDim: "#9a9aa2"
    readonly property color deep: root.surfaceAlt
    // `glow` is the hover highlight. It used to be a brighter teal, which now
    // that everything rests at white would have made hover invisible — so it
    // 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
    // wherever something was merely notable. That reads as a faded accent, not
    // as a decision. There is no half-crimson in this palette: a thing is wrong
    // (accent) or it is not (text). `warn` now resolves to the real accent, so
    // low battery shouts properly and everything merely informational is white.
    readonly property color blue: root.primaryDim
    readonly property color ok: root.text
    readonly property color warn: root.accent
    // Display text carries a crimson and a black offset rather than an RGB
    // split. Same trick, correct palette.
    readonly property color splitRed: root.accent
    readonly property color splitCyan: root.ink
    function alpha(c: color, a: real): color {
        return Qt.rgba(c.r, c.g, c.b, a);
    }
-    // Heat ramp for load/usage readouts.
+    function mix(a: color, b: color, t: real): color {
        const k = Math.max(0, Math.min(1, t));
        return Qt.rgba(a.r + (b.r - a.r) * k,
                       a.g + (b.g - a.g) * k,
                       a.b + (b.b - a.b) * k,
                       a.a + (b.a - a.a) * k);
    }
    // Load readouts sit white until the number actually matters, then bleed to
    // crimson. Not a hue cycle — red always means the same thing.
    function heat(pct: real): color {
-        if (pct >= 90) return root.accent;
+        if (pct <= 55) return root.text;
-        if (pct >= 75) return root.warn;
+        return root.mix(root.text, root.accent, (pct - 55) / 45);
        if (pct >= 45) return root.glow;
        return root.primary;
    }
    // ----------------------------------------------------------------- fonts
@@ -68,11 +150,24 @@ Singleton {
    readonly property int barMargin: 8
    readonly property int barGap: 8
-    // Horizontal offset per unit of height. tan(14deg) — every panel leans.
+    // The right-hand rail uses the same lean and chamfer as the bar — a
    // vertical panel leans its horizontal edges by a fraction of its width,
    // which works out to the same 14 degrees.
    readonly property int railWidth: 48
    // ONE angle, everywhere. tan(14deg). Persona geometry is disciplined, not
    // random: every edge in the shell leans by exactly this much in exactly the
    // same direction, and every corner is chopped by exactly `cut`. Varying
    // these per module reads as noise, not as style.
    readonly property real skew: 0.249
-    readonly property int cut: 9          // corner chamfer, in px
+    readonly property int cut: 10
    readonly property int stroke: 2
    // Pure-black keyline and offset copy behind panels. This is the one piece of
    // layering the style needs; it is not a soft shadow and never blurs.
    readonly property real dropOffset: 3
    readonly property real keylineWidth: 2
    readonly property int padS: 6
    readonly property int padM: 12
    readonly property int padL: 20
@@ -97,5 +192,9 @@ Singleton {
    readonly property url texStripes: "root:/assets/stripes.png"
    readonly property url texScanline: "root:/assets/scanline.png"
-    readonly property url wallpaper: "file:///home/narl/.wallpapers/takemi_2.jpg"
+    // Last resort only. The live wallpaper comes from the Wallpaper singleton,
    // which asks hyprpaper what is actually on screen — a path written down
    // here goes stale the moment the wallpaper is switched, which is exactly
    // what happened to the lock screen.
    readonly property url fallbackWallpaper: "file:///home/narl/.wallpapers/takemi_1.jpg"
 }
@@ -15,10 +15,14 @@ WlSessionLock {
    locked: Actions.lockRequested
    WlSessionLockSurface {
        id: lockSurface
        color: "black"
        LockFace {
            anchors.fill: parent
            // So each screen blurs its own wallpaper rather than all of them
            // sharing whichever one hyprpaper happened to list first.
            screenName: lockSurface.screen ? lockSurface.screen.name : ""
            onUnlocked: Actions.lockRequested = false
        }
    }
@@ -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
@@ -27,10 +29,17 @@ Item {
    }
    // ------------------------------------------------------- background
    // Whatever hyprpaper is actually displaying, not a path written down once
    // and left to rot. `screenName` lets a multi-monitor lock show each screen
    // its own picture; it falls back to the first wallpaper hyprpaper reports.
    property string screenName: ""
    Image {
        id: wall
        anchors.fill: parent
-        source: Theme.wallpaper
+        source: surface.screenName !== ""
            ? Wallpaper.forMonitor(surface.screenName)
            : Wallpaper.source
        fillMode: Image.PreserveAspectCrop
        asynchronous: false
        cache: true
@@ -45,7 +54,9 @@ Item {
        }
    }
-    // Teal wash, pulling the photo toward the shell's palette.
+    // Wash pulling the photo down toward the shell's ground. Was described as
    // a teal wash back when the UI was teal; the colours it actually uses are
    // the neutral surfaces, which is what it should have been all along.
    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
@@ -55,35 +66,16 @@ Item {
        }
    }
-    Image {
+    // The same wedge-and-stripes ground the power menu stands on. The wedge
    // sits under the clock, which is where the power menu puts it under the
    // title — so the two screens land the crimson mass in the same place.
    P5Backdrop {
        id: backdrop
        anchors.fill: parent
-        source: Theme.texHalftone
+        reveal: 0
-        fillMode: Image.Tile
+        wedgeSpan: 0.30
-        opacity: 0.05
+        wedgeOpacity: 0.30
-        smooth: false
+        stripeOpacity: 0.07
        layer.enabled: true
        layer.effect: TintEffect { tintColor: Theme.primary }
    }
    // Crimson stripe band running behind the prompt — the Persona 5 title
    // treatment. Declared before the auth block so it stays underneath it.
    Item {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: authBlock.top
        anchors.topMargin: -6
        height: 42
        clip: true
        opacity: 0.5
        Image {
            anchors.fill: parent
            source: Theme.texStripes
            fillMode: Image.Tile
            smooth: false
            layer.enabled: true
            layer.effect: TintEffect { tintColor: Theme.accent }
        }
    }
    // ------------------------------------------------------------ clock
@@ -92,6 +84,20 @@ Item {
        precision: SystemClock.Minutes
    }
    // The house mark, same wordmark the bar carries far left. Small, above the
    // clock — the lock's hero is the time, not the branding.
    SplitText {
        id: mark
        anchors.left: timeBlock.left
        anchors.bottom: timeBlock.top
        anchors.bottomMargin: 6
        text: "P5"
        pixelSize: Theme.fsTitle
        split: 2
        letterSpacing: 0
        opacity: timeBlock.opacity
    }
    Column {
        id: timeBlock
        anchors.left: parent.left
@@ -133,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
@@ -177,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 }
@@ -202,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
@@ -227,17 +237,12 @@ Item {
                Repeater {
                    model: Math.min(surface.entry.length, 22)
-                    Rectangle {
+                    Skew {
                        required property int index
                        width: 10
                        height: 20
                        color: surface.failed ? Theme.accent : Theme.primary
                        transform: Matrix4x4 {
                            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 20 * Theme.skew,
                                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
                        }
                        // Each new block snaps in.
                        Component.onCompleted: pop.start()
                        NumberAnimation {
@@ -321,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
@@ -350,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);
@@ -403,6 +408,12 @@ Item {
    ParallelAnimation {
        id: intro
        // The stripes sweep in under everything, the same move the power menu
        // opens with.
        NumberAnimation {
            target: backdrop; property: "reveal"
            from: 0; to: 1; duration: Theme.durLazy; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: timeBlock; property: "opacity"
            from: 0; to: 1; duration: Theme.durLazy; easing.type: Easing.OutExpo
@@ -67,7 +67,8 @@ PanelWindow {
    readonly property color tone: {
        switch (root.kind) {
        case "mic": return Audio.micMuted ? Theme.accent : Theme.blue;
-        case "brightness": return Theme.warn;
+        // Turning the screen up is not a warning. White, like volume.
        case "brightness": return Theme.text;
        default: return Audio.muted ? Theme.accent : Theme.primary;
        }
    }
@@ -143,24 +144,40 @@ PanelWindow {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 4
-            Row {
+            // Title left, readout hard right. This used to be a Row with a
            // `parent.width - 90` spacer, which assumed the two labels never
            // needed more than 90px between them — "BRIGHTNESS" plus "100%"
            // does, and the percentage fell off the right edge. Anchoring the
            // readout to the right and letting the title elide into whatever
            // is left makes the widest case the safe one.
            Item {
                width: parent.width
                height: Math.max(titleLabel.implicitHeight, readout.implicitHeight)
                Text {
                    id: titleLabel
                    anchors.left: parent.left
                    anchors.right: readout.left
                    anchors.rightMargin: Theme.padS
                    anchors.verticalCenter: parent.verticalCenter
                    text: root.title.toUpperCase()
                    color: Theme.subtext
                    elide: Text.ElideRight
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsMicro
                    font.letterSpacing: 2
                    renderType: Text.NativeRendering
                }
                Item {
                    width: parent.width - 90
                    height: 1
                }
                SplitText {
                    id: readout
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    // Natural width, not a fixed one — SplitText offsets its
                    // ghosts with left/right anchor margins, so pinning the
                    // width and right-aligning the text would flatten the RGB
                    // split away. The title's left edge is anchored, so a
                    // widening readout only moves its own left edge.
                    text: Math.round(root.level * 100) + "%"
                    pixelSize: Theme.fsBody
                    split: 1
@@ -1,5 +1,4 @@
 import QtQuick
 import QtQuick.Shapes
 import Quickshell
 import Quickshell.Wayland
 import "root:/config"
@@ -27,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();
@@ -48,46 +71,20 @@ PanelWindow {
        }
    }
-    // Diagonal stripe field sweeping in from the left.
+    // Stripes and wedge, shared with the lock screen. The wedge used to lean at
-    Image {
+    // 0.32 here, which was its own angle and nothing else's; P5Backdrop leans
-        id: stripes
+    // it at Theme.skew like every other edge in the shell.
    P5Backdrop {
        id: ground
        anchors.fill: parent
-        source: Theme.texStripes
+        reveal: 0
-        fillMode: Image.Tile
+        stripeOpacity: 0.10
-        opacity: 0
+        wedgeOpacity: 0.35
-        smooth: false
+        wedgeSpan: 0.34
-
+        // The live desktop is still visible behind this, so a dot wash would be
-        layer.enabled: true
+        // laid over other people's windows rather than over a ground of our
-        layer.effect: TintEffect {
+        // own. The lock owns the halftone; here it just muddies things.
-            tintColor: Theme.accent
+        halftone: false
        }
        transform: Translate {
            id: stripeShift
            x: -root.width
        }
    }
    // A crimson wedge behind the buttons.
    Shape {
        id: wedge
        anchors.fill: parent
        opacity: 0
        preferredRendererType: Shape.CurveRenderer
        ShapePath {
            fillColor: Theme.alpha(Theme.accentDim, 0.35)
            strokeColor: "transparent"
            PathPolyline {
                path: [
                    Qt.point(root.width * 0.18, 0),
                    Qt.point(root.width * 0.52, 0),
                    Qt.point(root.width * 0.34, root.height),
                    Qt.point(0, root.height),
                    Qt.point(root.width * 0.18, 0)
                ]
            }
        }
    }
    // ---------------------------------------------------------------- title
@@ -141,17 +138,15 @@ PanelWindow {
        anchors.verticalCenter: parent.verticalCenter
        spacing: Theme.padM
        // The widest slab in the stack. Fixed rather than derived so the ragged
        // x offsets below cannot feed back into the Column's own width.
        readonly property int stackWidth: 312
        width: stackWidth
        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.
@@ -160,20 +155,36 @@ PanelWindow {
                required property var modelData
                required property int index
-                width: 280
+                readonly property int slabWidth: actions.stackWidth
                width: entry.slabWidth
                height: 52
                opacity: 0
-                transform: Translate { id: slide; x: 90 }
+                transform: [
                    Translate { id: slide; x: 90 },
                    Rotation {
                        id: tilt
                        angle: -3
                        origin.x: entry.slabWidth / 2
                        origin.y: 26
                    }
                ]
                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.
@@ -199,6 +210,18 @@ PanelWindow {
                            duration: Theme.durSlow
                            easing.type: Easing.OutBack
                        }
                        // Slabs land out of true and snap square. Sliding alone
                        // reads like a slide deck; the tilt is what makes it
                        // land like a card being thrown down. Same direction
                        // every time — the motion is the flourish, the geometry
                        // stays disciplined.
                        NumberAnimation {
                            target: tilt; property: "angle"
                            from: -3; to: 0
                            duration: Theme.durSlow
                            easing.type: Easing.OutBack
                            easing.overshoot: 2.2
                        }
                    }
                }
            }
@@ -210,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
@@ -233,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 {
@@ -244,18 +284,10 @@ PanelWindow {
            target: backdrop; property: "opacity"
            to: 1; duration: Theme.durBase; easing.type: Easing.OutQuad
        }
        // One number now drives the slide, the stripe opacity and the wedge.
        NumberAnimation {
-            target: stripes; property: "opacity"
+            target: ground; property: "reveal"
-            to: 0.1; duration: Theme.durSlow
+            from: 0; to: 1; duration: Theme.durLazy; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: stripeShift; property: "x"
            from: -root.width; to: 0
            duration: Theme.durLazy; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: wedge; property: "opacity"
            to: 1; duration: Theme.durSlow; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: title; property: "opacity"
@@ -270,11 +302,7 @@ PanelWindow {
            to: 0; duration: Theme.durFast
        }
        NumberAnimation {
-            target: stripes; property: "opacity"
+            target: ground; property: "reveal"
            to: 0; duration: Theme.durFast
        }
        NumberAnimation {
            target: wedge; property: "opacity"
            to: 0; duration: Theme.durFast
        }
        NumberAnimation {
@@ -82,12 +82,24 @@ PanelWindow {
                }
                // Countdown rule that drains along the bottom edge.
-                Rectangle {
+                //
                // It used to be a full-bleed rectangle across the whole toast,
                // which meant it ran straight through the card's chopped
                // bottom-left corner and out the other side — a stray bar
                // hanging off the card at the one place the silhouette is
                // supposed to be cut. It lives inside the cut now, and ends
                // where the leaning right edge does.
                readonly property real fuseSpan: Math.max(0,
                    width - card.chop - card.implicitHeight * card.lean)
                Skew {
                    id: fuse
                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
+                    anchors.bottomMargin: 1
                    x: card.chop
                    height: 2
-                    width: parent.width
+                    width: toast.fuseSpan
                    lean: card.lean
                    color: Theme.alpha(card.tone, 0.7)
                    visible: life.running
                }
@@ -96,7 +108,7 @@ PanelWindow {
                    id: life
                    target: fuse
                    property: "width"
-                    from: toast.width
+                    from: toast.fuseSpan
                    to: 0
                    running: false
                    duration: Notifs.timeoutFor(toast.modelData)
@@ -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)
        }
    }
@@ -9,7 +9,11 @@ Popout {
    id: root
    contentWidth: 310
-    contentHeight: 296
+    // Derived: the charge block is a different height from the dial it
    // replaced, and the health line comes and goes.
    contentHeight: header.height + Theme.padM + readout.height + Theme.padM
        + bar.height + Theme.padM + detailText.implicitHeight + Theme.padL
        + suspendButton.height + Theme.padM * 2
    PopoutSurface {
        anchors.fill: parent
@@ -26,27 +30,42 @@ Popout {
            subtitle: Battery.charging ? "CHARGING" : (Battery.onBattery ? "ON BATTERY" : "AC")
        }
-        Row {
+        // The dial that used to sit here duplicated the meter below it and was
        // the only curve in the shell. The charge is now simply set large, and
        // the MeterBar underneath is left to carry the level on its own.
        Item {
            id: readout
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
-            spacing: Theme.padM
+            height: Math.max(charge.height, detail.height)
-            Gauge {
+            Column {
-                width: 92; height: 92
+                id: charge
-                value: Battery.percent
+                anchors.left: parent.left
-                label: "CHARGE"
+                anchors.verticalCenter: parent.verticalCenter
-                arcColor: Battery.tint
+                // No "CHARGE" caption under the number. It landed directly on
-                readout: Math.round(Battery.percent) + "%"
+                // top of the meter, and between the header and a full-width
                // charge bar there was nothing left for it to disambiguate.
                SplitText {
                    text: Math.round(Battery.percent) + "%"
                    pixelSize: Theme.fsHuge
                    color: Battery.tint
                    split: 2.5
                    splitOpacity: 0.7
                }
            }
            Column {
                id: detail
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                spacing: Theme.padS
                SplitText {
                    anchors.right: parent.right
                    horizontalAlignment: Text.AlignRight
                    text: Battery.timeLabel
                    pixelSize: Theme.fsBody
                    split: 1.1
@@ -57,6 +76,8 @@ Popout {
                    text: Battery.changeRate > 0
                        ? Battery.changeRate.toFixed(1) + " W " + (Battery.charging ? "in" : "draw")
                        : "idle"
                    anchors.right: parent.right
                    horizontalAlignment: Text.AlignRight
                    color: Theme.subtext
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsSmall
@@ -66,6 +87,8 @@ Popout {
                Text {
                    visible: Battery.health > 0
                    text: "Health " + Math.round(Battery.health) + "%"
                    anchors.right: parent.right
                    horizontalAlignment: Text.AlignRight
                    color: Battery.health < 70 ? Theme.warn : Theme.muted
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsMicro
@@ -88,9 +111,26 @@ Popout {
            activeColor: Battery.tint
        }
        Text {
            id: detailText
            anchors.top: bar.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
            text: Battery.detail
            wrapMode: Text.WordWrap
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            renderType: Text.NativeRendering
        }
        // Follows the detail line rather than being pinned to the bottom of a
        // fixed-height panel, which is what left a dead band above it.
        P5Button {
            id: suspendButton
-            anchors.bottom: parent.bottom
+            anchors.top: detailText.bottom
            anchors.topMargin: Theme.padL
            anchors.left: parent.left
            text: "Suspend"
            icon: "󰤄"
@@ -99,21 +139,5 @@ Popout {
                Actions.suspend();
            }
        }
        Text {
            anchors.top: bar.bottom
            anchors.topMargin: Theme.padS
            anchors.bottom: suspendButton.top
            anchors.bottomMargin: Theme.padS
            anchors.left: parent.left
            anchors.right: parent.right
            text: Battery.detail
            wrapMode: Text.WordWrap
            verticalAlignment: Text.AlignTop
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            renderType: Text.NativeRendering
        }
    }
 }
@@ -127,17 +127,12 @@ Popout {
                    height: 30
                    // Today gets a leaning crimson slab.
-                    Rectangle {
+                    Skew {
                        anchors.centerIn: parent
                        width: 26
                        height: 24
                        visible: cell.modelData.today
                        color: Theme.accent
                        transform: Matrix4x4 {
                            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 24 * Theme.skew,
                                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
                        }
                    }
                    Text {
@@ -229,16 +224,11 @@ Popout {
        implicitWidth: 22
        implicitHeight: 22
-        Rectangle {
+        Skew {
            anchors.fill: parent
            color: stepHover.hovered ? Theme.alpha(Theme.accent, 0.25) : "transparent"
-            border.width: 1
+            borderWidth: 1
-            border.color: Theme.alpha(Theme.outline, 0.7)
+            borderColor: Theme.alpha(Theme.outline, 0.7)
            transform: Matrix4x4 {
                matrix: Qt.matrix4x4(1, -Theme.skew, 0, 22 * Theme.skew,
                                     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            }
        }
        Icon {
@@ -11,7 +11,11 @@ Popout {
    id: root
    contentWidth: 400
-    contentHeight: 200 + (Media.players.length > 1 ? 34 : 0)
+
    // The seek row used to sit flush against the bottom edge, where the slab's
    // chamfer cuts the corner away — the elapsed time was half outside the
    // panel. The extra height is the room that row needs to clear the cut.
    contentHeight: 224 + (Media.players.length > 1 ? 34 : 0)
    PopoutSurface {
        id: surface
@@ -42,6 +46,10 @@ Popout {
                anchors.fill: parent
                visible: false
                layer.enabled: true
                // Without this the mask texture is point-sampled, so the
                // antialiased pixels along the cuts get snapped back to hard
                // steps before MultiEffect ever sees them — see MaskedArt.
                layer.smooth: true
                preferredRendererType: Shape.CurveRenderer
                ShapePath {
                    fillColor: "white"
@@ -61,6 +69,7 @@ Popout {
                cache: true
                visible: status === Image.Ready
                layer.enabled: true
                layer.smooth: true
                layer.effect: MaskedArt { maskItem: artMask }
            }
@@ -146,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()
                }
            }
@@ -176,8 +185,10 @@ Popout {
            id: seekArea
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.leftMargin: Theme.padS
            anchors.rightMargin: Theme.padS
            anchors.bottom: picker.visible ? picker.top : parent.bottom
-            anchors.bottomMargin: Theme.padS
+            anchors.bottomMargin: picker.visible ? Theme.padS : Theme.padM
            height: 26
            visible: Media.hasPlayer
@@ -185,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
@@ -196,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
@@ -211,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)
            }
        }
@@ -227,7 +238,7 @@ Popout {
            Repeater {
                model: Media.players
-                Item {
+                FocusScope {
                    id: chip
                    required property var modelData
@@ -235,26 +246,44 @@ Popout {
                    implicitWidth: chipLabel.implicitWidth + Theme.padM
                    implicitHeight: 22
                    focusPolicy: chip.enabled ? Qt.TabFocus : Qt.NoFocus
-                    Rectangle {
+                    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
-                        border.width: 1
+                            ? Theme.treatmentFocusFill
-                        border.color: chip.current ? Theme.primary : Theme.alpha(Theme.outline, 0.7)
+                            : (chip.current
-
+                                ? Theme.alpha(Theme.primary, 0.22)
-                        transform: Matrix4x4 {
+                                : (chipHover.hovered ? Theme.alpha(Theme.primary, 0.1) : "transparent")))
-                            matrix: Qt.matrix4x4(1, -Theme.skew, 0, 22 * Theme.skew,
+                        borderWidth: chip.activeFocus ? Theme.stroke : 1
-                                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 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
@@ -262,46 +291,59 @@ 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
-        Rectangle {
+        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";
            }
-            border.width: tb.primary ? 2 : 1
+            borderWidth: tb.activeFocus ? Theme.stroke * 2 : (tb.primary ? 2 : 1)
-            border.color: 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)
            transform: Matrix4x4 {
                matrix: Qt.matrix4x4(1, -Theme.skew, 0, tb.height * Theme.skew,
                                     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            }
            Behavior on color {
                ColorAnimation { duration: Theme.durFast }
            }
@@ -312,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)
    }
 }
@@ -202,16 +202,11 @@ Popout {
        implicitHeight: 40
-        Rectangle {
+        Skew {
            anchors.fill: parent
            color: Theme.alpha(rateBlock.tone, 0.08)
-            border.width: 1
+            borderWidth: 1
-            border.color: Theme.alpha(rateBlock.tone, 0.35)
+            borderColor: Theme.alpha(rateBlock.tone, 0.35)
            transform: Matrix4x4 {
                matrix: Qt.matrix4x4(1, -Theme.skew, 0, rateBlock.height * Theme.skew,
                                     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            }
        }
        Row {
@@ -59,15 +59,12 @@ Item {
        color: Theme.alpha(root.accent, 0.8)
    }
-    Rectangle {
+    Skew {
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        width: 16
        height: 2
        color: Theme.accent
-        transform: Matrix4x4 {
+        lean: 1.4
            matrix: Qt.matrix4x4(1, -1.4, 0, 2.8,
                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }
    }
 }
@@ -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
@@ -9,7 +9,12 @@ Popout {
    id: root
    contentWidth: 420
-    contentHeight: 268
+    // Derived rather than a fixed number: the meters are taller than the dials
    // they replaced, and the GPU block disappears entirely on machines without
    // one. A hardcoded height would either clip or leave a hole.
    contentHeight: header.height + Theme.padM
        + gauges.implicitHeight + Theme.padL
        + details.implicitHeight + Theme.padM * 2
    PopoutSurface {
        anchors.fill: parent
@@ -26,37 +31,38 @@ Popout {
            subtitle: "UP " + Sys.uptime + "  ·  " + Sys.procs + " PROCS"
        }
-        Row {
+        Column {
            id: gauges
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.left: parent.left
            anchors.right: parent.right
            spacing: Theme.padM
-            Gauge {
+            MetricRow {
-                width: 88; height: 88
+                width: parent.width
                value: Sys.cpuUsage
                label: "CPU"
                sub: Math.round(Sys.cpuTemp) + "°C"
            }
-            Gauge {
+            MetricRow {
-                width: 88; height: 88
+                width: parent.width
                value: Sys.memPercent
                label: "MEM"
-                sub: Sys.gb(Sys.memUsed) + "/" + Sys.gb(Sys.memTotal)
+                sub: Sys.gb(Sys.memUsed) + " / " + Sys.gb(Sys.memTotal)
            }
-            Gauge {
+            MetricRow {
-                width: 88; height: 88
+                width: parent.width
                visible: Sys.gpuAvailable
                value: Sys.gpuUsage
                label: "GPU"
                sub: Math.round(Sys.gpuTemp) + "°C"
            }
-            Gauge {
+            MetricRow {
-                width: 88; height: 88
+                width: parent.width
                value: Sys.diskPercent
                label: "DISK"
                sub: Sys.diskFree + " free"
@@ -64,8 +70,9 @@ Popout {
        }
        Column {
            id: details
            anchors.top: gauges.bottom
-            anchors.topMargin: Theme.padM
+            anchors.topMargin: Theme.padL
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: 3
@@ -0,0 +1,167 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "root:/config"
 import "root:/components"
 // The tray's context menu, on the shell's own slab.
 //
 // Quickshell can hand a StatusNotifier menu straight to Qt's platform menu
 // implementation, but that draws a stock widget popup — square corners, system
 // palette, no lean — hanging off the corner of a shell that has none of those
 // things. This walks the menu with QsMenuOpener instead and draws it as a
 // P5Panel, so a right click on a tray icon produces the same object language as
 // everything else on the rail.
 //
 // Dismissal is a Hyprland focus grab: click anywhere outside and the compositor
 // tells us to close.
 PopupWindow {
    id: root
    required property Item anchorItem
    property var menuHandle: null
    // Room around the slab for the entry overshoot and the offset black copy.
    readonly property int bleed: 20
    readonly property int minWidth: 160
    readonly property int maxWidth: 320
    // The slab's own lean and padding, which the entries sit inside. Sizing the
    // window to the entry widths alone left every label short by that inset and
    // elided perfectly ordinary items.
    readonly property real slabLean: 0.06
    readonly property real slabPad: Theme.padS
    readonly property real contentHeight: list.implicitHeight + slabPad * 2
    readonly property real contentWidth:
        Math.max(root.minWidth, Math.min(root.maxWidth, list.menuWidth))
        + (slabPad + contentHeight * slabLean) * 2
    anchor.item: anchorItem
    anchor.edges: Edges.Left
    anchor.gravity: Edges.Left
    anchor.adjustment: PopupAdjustment.SlideY
    anchor.margins.right: Theme.popoutGap
    implicitWidth: contentWidth + bleed * 2
    implicitHeight: contentHeight + bleed * 2
    color: "transparent"
    visible: shown
    property bool shown: false
    function open() {
        if (!menuHandle) return;
        PopupCoordinator.claim(root);
        closeAnim.stop();
        shown = true;
        openAnim.restart();
    }
    function close() {
        if (!shown) return;
        openAnim.stop();
        closeAnim.restart();
    }
    function toggle() {
        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.
    Timer {
        id: grabDelay
        interval: 60
        running: root.shown
    }
    HyprlandFocusGrab {
        active: root.shown && !grabDelay.running
        windows: [root]
        onCleared: root.close()
    }
    Item {
        id: holder
        x: root.bleed
        y: root.bleed
        width: root.contentWidth
        height: root.contentHeight
        opacity: 0
        scale: 0.94
        transformOrigin: Item.Right
        PopoutSurface {
            anchors.fill: parent
            tone: Theme.accent
            padding: root.slabPad
            chop: 12
            lean: root.slabLean
            TrayMenuList {
                id: list
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                // Only walk the menu while it is on screen. Bound unconditionally,
                // every tray app would get a GetLayout the moment the shell
                // starts, for a menu nobody has asked for yet.
                menuHandle: root.shown ? root.menuHandle : null
                onActivated: root.close()
            }
        }
    }
    ParallelAnimation {
        id: openAnim
        NumberAnimation {
            target: holder; property: "opacity"
            to: 1.0; duration: Theme.durBase; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: holder; property: "scale"
            to: 1.0; duration: Theme.durSlow; easing.type: Easing.OutBack
        }
        NumberAnimation {
            target: holder; property: "x"
            from: root.bleed + 14; to: root.bleed
            duration: Theme.durSlow; easing.type: Easing.OutBack
        }
    }
    ParallelAnimation {
        id: closeAnim
        NumberAnimation {
            target: holder; property: "opacity"
            to: 0.0; duration: Theme.durFast; easing.type: Easing.InQuad
        }
        NumberAnimation {
            target: holder; property: "scale"
            to: 0.96; duration: Theme.durFast; easing.type: Easing.InQuad
        }
        onFinished: {
            root.shown = false;
            holder.x = root.bleed;
            PopupCoordinator.release(root);
        }
    }
 }
@@ -0,0 +1,273 @@
 import QtQuick
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Widgets
 import "root:/config"
 import "root:/components"
 // One level of a StatusNotifier menu, drawn in the shell's own language.
 //
 // Submenus expand inline rather than opening a second window: a tray menu is
 // two or three items deep at most, and a stack of leaning slabs chasing each
 // other across the screen would read as clutter. The type nests itself for
 // child levels, so this file is the whole menu.
 Column {
    id: root
    // A QsMenuHandle — either the item's root menu or a submenu entry.
    required property var menuHandle
    // Raised by any level when an entry is actually invoked, so the window can
    // close itself.
    signal activated()
    // What the window should size itself to. Deliberately NOT `implicitWidth`.
    //
    // A Column takes its implicit width from how wide its children ended up, and
    // the rows are stretched to the Column's own width so a hover block can span
    // the entry. Sizing the window off that closes the loop — window width feeds
    // row width feeds Column implicit width feeds window width — and it does not
    // settle: each pass adds a float epsilon, so the shell spins at 100% CPU
    // forever. Slack's menu was the first to hit it and it took the whole bar
    // down with it, past the reach of anything but SIGKILL. Measuring the
    // strings against the font instead keeps sizing entirely out of the layout.
    readonly property real menuWidth: {
        let w = 0;
        for (const e of (opener.children?.values ?? [])) {
            if (e.isSeparator) continue;
            let ew = fm.advanceWidth(root.clean(e.text)) + Theme.padM * 2 + Theme.padS * 2;
            if (e.buttonType !== QsMenuButtonType.None || e.icon !== "")
                ew += 16 + Theme.padS;
            if (e.hasChildren) ew += 18;
            w = Math.max(w, ew);
        }
        return w;
    }
    // DBus menus carry Qt's mnemonic underscores; nothing here handles
    // accelerators, so they would just be stray marks.
    function clean(s: string): string {
        return String(s ?? "").replace(/_([^_])/g, "$1");
    }
    spacing: 0
    FontMetrics {
        id: fm
        font.family: Theme.fontMono
        font.pixelSize: Theme.fsSmall
        font.weight: Theme.weightBody
    }
    QsMenuOpener {
        id: opener
        menu: root.menuHandle
    }
    Repeater {
        model: opener.children
        Item {
            id: row
            required property var modelData
            readonly property var entry: modelData
            readonly property bool interactive: entry.enabled && !entry.isSeparator
            readonly property bool hovered: rowHover.hovered && interactive
            // Submenus stay collapsed until asked for.
            property bool expanded: false
            // Height only. Width is the Column's business — see `menuWidth`.
            implicitHeight: entry.isSeparator ? 9 : 26 + sub.height
            width: root.width
            // ------------------------------------------------------ separator
            //
            // A horizontal rule slants by a fraction of its own width, so at
            // menu width the house lean turns a hairline into a 30px diagonal
            // gash straight across the entries above and below it. The rise is
            // pinned in pixels instead, matching the rail's dividers.
            Skew {
                anchors.verticalCenter: parent.verticalCenter
                visible: row.entry.isSeparator
                width: parent.width - Theme.padM * 2
                x: Theme.padM
                height: 1
                vertical: true
                lean: width > 0 ? 5 / width : 0
                color: Theme.alpha(Theme.outline, 0.9)
            }
            // ----------------------------------------------------------- item
            Item {
                id: line
                width: parent.width
                height: row.entry.isSeparator ? 0 : 26
                visible: !row.entry.isSeparator
                // Hover is a solid crimson block, the same statement the
                // workspace ticks and the rail icons make.
                Skew {
                    anchors.fill: parent
                    anchors.leftMargin: Theme.padS
                    anchors.rightMargin: Theme.padS
                    color: row.hovered ? Theme.accent : "transparent"
                    Behavior on color {
                        ColorAnimation { duration: Theme.durFast }
                    }
                }
                // Check mark / radio dot, or the entry's own icon. Both occupy
                // the same slot so the labels line up either way.
                Item {
                    id: leading
                    anchors.left: parent.left
                    anchors.leftMargin: Theme.padM
                    anchors.verticalCenter: parent.verticalCenter
                    width: row.entry.buttonType !== QsMenuButtonType.None
                        || row.entry.icon !== "" ? 16 : 0
                    height: 12
                    Skew {
                        anchors.verticalCenter: parent.verticalCenter
                        visible: row.entry.buttonType !== QsMenuButtonType.None
                        width: 10
                        height: 10
                        borderWidth: 1
                        borderColor: row.hovered ? Theme.ink : Theme.alpha(Theme.text, 0.6)
                        color: row.entry.checkState === Qt.Checked
                            ? (row.hovered ? Theme.ink : Theme.accent)
                            : "transparent"
                    }
                    IconImage {
                        anchors.verticalCenter: parent.verticalCenter
                        visible: row.entry.buttonType === QsMenuButtonType.None
                            && row.entry.icon !== ""
                        width: 14
                        height: 14
                        source: row.entry.icon
                        asynchronous: true
                        // Same flattening the tray icons get — brand colour in
                        // a two-hue palette is the one thing that breaks it.
                        layer.enabled: true
                        layer.effect: MultiEffect {
                            colorization: 1.0
                            colorizationColor: row.hovered ? Theme.ink : Theme.text
                        }
                    }
                }
                Text {
                    id: label
                    anchors.left: leading.right
                    anchors.leftMargin: leading.width > 0 ? Theme.padS : Theme.padM
                    anchors.right: arrow.left
                    anchors.rightMargin: Theme.padS
                    anchors.verticalCenter: parent.verticalCenter
                    text: root.clean(row.entry.text)
                    elide: Text.ElideRight
                    color: !row.entry.enabled
                        ? Theme.muted
                        : (row.hovered ? Theme.ink : Theme.text)
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsSmall
                    font.weight: Theme.weightBody
                    renderType: Text.NativeRendering
                }
                Text {
                    id: arrow
                    anchors.right: parent.right
                    anchors.rightMargin: Theme.padM
                    anchors.verticalCenter: parent.verticalCenter
                    width: row.entry.hasChildren ? 18 : 0
                    visible: row.entry.hasChildren
                    text: row.expanded ? "󰅀" : "󰅂"
                    color: row.hovered ? Theme.ink : Theme.subtext
                    font.family: Theme.fontIcon
                    font.pixelSize: Theme.fsMicro
                }
                HoverHandler {
                    id: rowHover
                    enabled: row.interactive
                    cursorShape: Qt.PointingHandCursor
                }
                TapHandler {
                    enabled: row.interactive
                    onTapped: {
                        if (row.entry.hasChildren) {
                            row.expanded = !row.expanded;
                        } else {
                            row.entry.triggered();
                            root.activated();
                        }
                    }
                }
            }
            // ------------------------------------------------------- submenu
            Item {
                id: sub
                anchors.top: line.bottom
                width: parent.width
                height: subLoader.item ? subLoader.item.implicitHeight : 0
                clip: true
                visible: height > 0
                Behavior on height {
                    NumberAnimation { duration: Theme.durFast; easing.type: Easing.OutExpo }
                }
                // The guide rule down the side of an expanded submenu.
                //
                // Same trap the separators hit, from the other direction: the
                // house lean is a fraction of *height*, and this rule is as tall
                // as the submenu. A Wi-Fi list of thirty networks made it 600px
                // tall, which sheared a 1px hairline into a 150px crimson wedge
                // lying across every entry in the list. The rise is pinned in
                // pixels, and it is declared before the entries so it can never
                // paint over them again.
                Skew {
                    x: Theme.padS
                    width: 1
                    height: parent.height
                    lean: height > 0 ? 5 / height : 0
                    visible: row.expanded
                    color: Theme.alpha(Theme.accent, 0.8)
                }
                // Loaded by URL rather than as an inline component: QML rejects
                // a type that instantiates itself, even lazily, and a menu tree
                // is the one place recursion is the natural shape.
                Loader {
                    id: subLoader
                    x: Theme.padM
                    width: parent.width - Theme.padM
                    onLoaded: item.activated.connect(root.activated)
                }
                Connections {
                    target: row
                    function onExpandedChanged() {
                        if (row.expanded)
                            subLoader.setSource(Qt.resolvedUrl("TrayMenuList.qml"),
                                                { menuHandle: row.entry });
                        else
                            subLoader.source = "";
                    }
                }
            }
        }
    }
 }
@@ -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) {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nvrl	9e73c1338f	fixed some bugs	2026-08-15 02:11:03 +02:00
nvrl	9cf510e93b	fix(qs,fluxo) performance fix for repaints	2026-08-12 20:18:56 +02:00
nvrl	86e90b0213	chore(hypr) migrated to lua confs	2026-08-12 18:05:43 +02:00
nvrl	a868f50ab7	improvements	2026-08-11 17:35:26 +02:00
nvrl	39f925cb58	updated design	2026-08-11 16:34:09 +02:00
nvrl	3e02c3f36a	fixed tray + media popouts	2026-08-11 11:29:04 +02:00
nvrl	ccb54f01d9	added tray menu + fixed antialising	2026-08-11 11:08:44 +02:00
nvrl	58e0ba2f99	fixed tray	2026-08-11 09:40:55 +02:00
nvrl	08146fe16f	final theme	2026-08-11 02:05:46 +02:00
nvrl	105cf6b3a8	updated theme	2026-08-11 01:53:26 +02:00
nvrl	0a439d951e	updated style	2026-08-11 00:22:59 +02:00