improvements

updated design
fixed tray + media popouts
2026-08-11 17:35:26 +02:00 · 2026-08-11 16:34:09 +02:00 · 2026-08-11 11:29:04 +02:00 · 2026-08-11 11:08:44 +02:00 · 2026-08-11 09:40:55 +02:00 · 2026-08-11 02:05:46 +02:00
97 changed files with 10262 additions and 153 deletions
@@ -8,6 +8,7 @@
 !hypr/
 !hyprpanel/
 !nvim/
 !quickshell/
 !waybar/
 !zathura/
 !mimeapps.list
@@ -17,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"
@@ -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
@@ -1,5 +1,10 @@
 # fluxo-rs configuration
 # Location: ~/.config/fluxo/config.toml
 #
 # The hardware modules below emit raw pipe-delimited values rather than display
 # 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.
 [general]
 menu_command = "fuzzel --dmenu --prompt \"$FLUXO_PROMPT\""
@@ -20,23 +25,23 @@ backlight = 12
 dnd = 13
 [network]
-format = "{interface} ({ip}):  {rx:^4.1} MB/s   {tx:^4.1} MB/s"
+format = "{interface}|{ip}|{rx:.3}|{tx:.3}"
 [cpu]
-format = "CPU: {usage:^4.1}% {temp:^4.1}C"
+format = "{usage:.1}|{temp:.1}"
 [memory]
-format = "MEM: {used:^4.1}/{total:^4.1}GB"
+format = "{used:.2}|{total:.2}"
 [sys]
-format = "UP: {uptime} LOAD: {load1:^3.1} "
+format = "{uptime}|{load1:.2}|{load5:.2}|{load15:.2}"
 [disk]
-format = "{mount} {used:^3.0}/{total:^3.0}G"
+format = "{mount}|{used:.1}|{total:.1}"
 [power]
-format = "{percentage:>3}% {icon}"
+format = "{percentage}"
 [audio]
 format_sink_unmuted = "{name} {volume:>3}% <span size='large'>{icon}</span>"
@@ -66,10 +71,10 @@ enabled = false
 format = "{used:>4.0}G / {total:>4.0}G"
 [gpu]
-enabled = false
+enabled = true
-format_amd = "AMD: {usage:>3.0}% {vram_used:>4.1}/{vram_total:>4.1}GB {temp:>4.1}C"
+format_amd = "{usage:.0}|{vram_used:.2}|{vram_total:.2}|{temp:.1}"
-format_intel = "iGPU: {usage:>3.0}%"
+format_intel = "{usage:.0}|0|0|0"
-format_nvidia = "NV: {usage:>3.0}% {vram_used:>4.1}/{vram_total:>4.1}GB {temp:>4.1}C"
+format_nvidia = "{usage:.0}|{vram_used:.2}|{vram_total:.2}|{temp:.1}"
 [keyboard]
 enabled = false
@@ -77,7 +82,7 @@ format = "{layout}"
 [backlight]
 enable = true
-format = " {icon} {percentage}"
+format = "{percentage}"
 [dnd]
 enabled = true
@@ -0,0 +1,85 @@
 # fluxo-rs configuration
 # Location: ~/.config/fluxo/config.toml
 [general]
 menu_command = "fuzzel --dmenu --prompt \"$FLUXO_PROMPT\""
 [signals]
 network = 1
 cpu = 2
 memory = 3
 gpu = 4
 sys = 5
 disk = 6
 game = 7
 audio = 8
 bt = 9
 power = 10
 mpris = 11
 backlight = 12
 dnd = 13
 [network]
 format = "{interface} ({ip}):  {rx:^4.1} MB/s   {tx:^4.1} MB/s"
 [cpu]
 format = "CPU: {usage:^4.1}% {temp:^4.1}C"
 [memory]
 format = "MEM: {used:^4.1}/{total:^4.1}GB"
 [sys]
 format = "UP: {uptime} LOAD: {load1:^3.1} "
 [disk]
 format = "{mount} {used:^3.0}/{total:^3.0}G"
 [power]
 format = "{percentage:>3}% {icon}"
 [audio]
 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]
 format_plugin = "{alias} [{left}|{right}] {anc} <span size='large'>󰂰</span>"
 format_connected = "{alias} <span size='large'>󰂰</span>"
 format_disconnected = "Disconnected <span size='large'>󰂯</span>"
 format_disabled = "<span size='large'>󰂲</span>"
 [game]
 format_active = "<span size='large'>󰊖</span>"
 format_inactive = "<span size='large'></span>"
 [mpris]
 format = "{artist} - {title}"
 max_length = 20
 scroll = true 
 scroll_speed = 500
 scroll_separator = " /// "
 [pool]
 enabled = false
 format = "{used:>4.0}G / {total:>4.0}G"
 [gpu]
 enabled = false
 format_amd = "AMD: {usage:>3.0}% {vram_used:>4.1}/{vram_total:>4.1}GB {temp:>4.1}C"
 format_intel = "iGPU: {usage:>3.0}%"
 format_nvidia = "NV: {usage:>3.0}% {vram_used:>4.1}/{vram_total:>4.1}GB {temp:>4.1}C"
 [keyboard]
 enabled = false
 format = "{layout}"
 [backlight]
 enable = true 
 format = " {icon} {percentage}"
 [dnd]
 enabled = true
 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
@@ -1,6 +1,6 @@
 wallpaper {
 	monitor =
-	path = ~/.wallpapers/takemi_2.jpg
+	path = ~/.wallpapers/takemi_1.jpg
 	fit_mode = cover
 }
@@ -2,6 +2,11 @@
 # 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
@@ -14,16 +14,21 @@ bindr = ALT, z, exec, ~/.config/hypr/scripts/replay-ctrl.sh toggle
 bindr = ALT SHIFT, c, exec, ~/.config/hypr/scripts/droidcam-ctrl.sh toggle
 # general binds
-bind = $mainMod, M, exec, pdfs-prompt
+bind = $mainMod, M, exec, pdfs-prompt --dmenu --menu 'fuzzel --dmenu --width 60'
 bind = $mainMod, B, exec, fluxo bt menu
 bind = $mainMod, RETURN, exec, $terminal
 bind = $mainMod SHIFT, Q, killactive,
-bind = $mainMod CTRL, L, exec, hyprlock
+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, ~/.config/hypr/scripts/powermenu.sh
+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
@@ -0,0 +1,39 @@
 # Takemi palette — kept in step with ~/.config/quickshell/config/Theme.qml.
 #
 # Crimson, black, white. Nothing else carries hue.
 # ----------------------------------------------------------------- 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.
 $accent     = rgb(ff2d40)
 $accentDim  = rgb(8f1826)
 $accentSoft = rgb(ff6b78)
 # ------------------------------------------------------------------ neutrals
 $ink        = rgb(000000)
 $base       = rgb(0a0a0c)
 $mantle     = rgb(0d0d10)
 $surface    = rgb(141418)
 $surfaceAlt = rgb(1c1c22)
 $overlay    = rgb(26262e)
 $outline    = rgb(3a3a44)
 $text       = rgb(ffffff)
 $subtext    = rgb(c8c8ce)
 $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.
 $primary    = $text
 $primaryDim = rgb(9a9aa2)
 $glow       = $accent
 $blue       = $primaryDim
 $deep       = $surfaceAlt
 $warn       = $accentSoft
 $ok         = $text
@@ -1,21 +1,20 @@
-# catppuccin mocha theme
+# Takemi — Persona 5 flavoured theme, matched to ~/.config/quickshell.
-source = ~/.config/hypr/catppuccin-hyprland/themes/mocha.conf
+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 = 5, 5, 5, 5
+    gaps_out = 6, 8, 8, 8
-    border_size = 3
+    border_size = 2
-    # https://wiki.hyprland.org/Configuring/Variables/#variable-types for info about colors
+    # Crimson into its own shadow, on the diagonal. The accent is the only hue
-    col.active_border = $mauve $lavender 45deg
+    # here — a gradient into a second colour is what put blue in the border.
-    col.inactive_border = rgb($surface2Alpha)
+    col.active_border = $accent $accentDim 135deg
    col.inactive_border = $outline
    # Set to true enable resizing windows by clicking and dragging on borders and gaps
    resize_on_border = false
    # Please see https://wiki.hyprland.org/Configuring/Tearing/ before you turn this on
@@ -26,58 +25,72 @@ general {
 # https://wiki.hyprland.org/Configuring/Variables/#decoration
 decoration {
-    rounding = 12
+    # Persona 5 has no rounded corners. Neither do we.
-    rounding_power = 3
+    rounding = 0
-    # Change transparency of focused and unfocused windows
+    # Fully opaque, both states. Flat ink on flat ground.
    active_opacity = 1.0
    inactive_opacity = 1.0
    shadow {
        enabled = true
-        range = 4
+        range = 18
        render_power = 3
-        color = rgba(1a1a1aee)
+        offset = 0 4
        color = rgba(000000ee)
        color_inactive = rgba(00000088)
    }
    # https://wiki.hyprland.org/Configuring/Variables/#blur
    #
    # 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 = true
+        enabled = false
        size = 3
        passes = 1
        vibrancy = 0.1696
    }
 }
-# https://wiki.hyprland.org/Configuring/Variables/#animations
+# https://wiki.hyprland.org/Configuring/Animations/
 # Quick and clean. Motion should get out of the way, not perform.
 #
 # The previous 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 no longer animates at all.
 animations {
    enabled = yes, please :)
-    # Default animations, see https://wiki.hyprland.org/Configuring/Animations/ for more
+    bezier = snap,      0.16, 1.00, 0.30, 1.00
    bezier = overshoot, 0.34, 1.12, 0.64, 1.00
    bezier = hard,      0.55, 0.00, 0.90, 0.35
    bezier = linear,    0, 0, 1, 1
-    bezier = easeOutQuint,0.23,1,0.32,1
+    animation = global,        1, 4,    snap
-    bezier = easeInOutCubic,0.65,0.05,0.36,1
+    animation = border,        1, 5,    snap
    bezier = linear,0,0,1,1
    bezier = almostLinear,0.5,0.5,0.75,1.0
    bezier = quick,0.15,0,0.1,1
-    animation = global, 1, 10, default
+    animation = windows,       1, 4,    snap
-    animation = border, 1, 5.39, easeOutQuint
+    animation = windowsIn,     1, 4,    overshoot, popin 96%
-    animation = windows, 1, 4.79, easeOutQuint
+    animation = windowsOut,    1, 2.6,  hard,      popin 97%
-    animation = windowsIn, 1, 4.1, easeOutQuint, popin 87%
+    animation = windowsMove,   1, 3.6,  snap
-    animation = windowsOut, 1, 1.49, linear, popin 87%
+
-    animation = fadeIn, 1, 1.73, almostLinear
+    animation = fade,          1, 3,    snap
-    animation = fadeOut, 1, 1.46, almostLinear
+    animation = fadeIn,        1, 2.4,  snap
-    animation = fade, 1, 3.03, quick
+    animation = fadeOut,       1, 1.8,  hard
-    animation = layers, 1, 3.81, easeOutQuint
+    animation = fadeSwitch,    1, 2,    snap
-    animation = layersIn, 1, 4, easeOutQuint, fade
+    animation = fadeShadow,    1, 3,    snap
-    animation = layersOut, 1, 1.5, linear, fade
+    animation = fadeDim,       1, 2.4,  snap
-    animation = fadeLayersIn, 1, 1.79, almostLinear
+
-    animation = fadeLayersOut, 1, 1.39, almostLinear
+    animation = layers,        1, 3,    snap
-    animation = workspaces, 1, 1.94, almostLinear, fade
+    animation = layersIn,      1, 3,    snap, slide
-    animation = workspacesIn, 1, 1.21, almostLinear, fade
+    animation = layersOut,     1, 2,    hard, slide
-    animation = workspacesOut, 1, 1.94, almostLinear, fade
+
    animation = workspaces,    1, 3,    snap, slidevert
    animation = workspacesIn,  1, 3,    snap, slidevert
    animation = workspacesOut, 1, 2.4,  hard, slidevert
    animation = specialWorkspace, 1, 3, snap, slidevert
 }
 # See https://wiki.hyprland.org/Configuring/Master-Layout/ for more
@@ -85,41 +98,40 @@ master {
    new_status = master
 }
 dwindle {
    preserve_split = true
 }
 # https://wiki.hyprland.org/Configuring/Variables/#misc
 misc {
-    force_default_wallpaper = 0 # Set to 0 or 1 to disable the anime mascot wallpapers
+    force_default_wallpaper = 0
-    disable_hyprland_logo = true # If true disables the random hyprland logo / anime girl background. :(
+    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 {
-    # The border around the grouped windows
+    col.border_active = $accent $accentDim 135deg
-    col.border_active = $mauve $lavender 45deg
+    col.border_inactive = $outline
    col.border_inactive = $surface1
    groupbar {
        font_family = JetBrainsMono Nerd Font
        font_size = 11
        # Increase the height so the text has room to breathe
        height = 24
        # Disable the default 3D gradient for a modern flat look
        gradients = false
        # --- Active Tab ---
-        # Bright background with very dark text for perfect readability
+        col.active = $accent
-        col.active = $mauve
+        text_color = $ink
        text_color = $crust 
        # --- Inactive Tab ---
-        # Dark surface background with dimmed, soft text
+        col.inactive = $surface
-        col.inactive = $surface0
+        text_color_inactive = $muted
        text_color_inactive = $subtext0
-        # Colored indicator bar, roughly half the groupbar height
+        indicator_height = 3
        indicator_height = 15
    }
 }
@@ -5,8 +5,9 @@
 LID_STATE_FILE="$HOME/.config/hypr/lid_state.conf"
 restart_ui() {
-    # Spawn in background and detach
+    # The Quickshell bar follows monitor hotplug on its own, so only the
-	systemctl restart --user waybar hyprpaper
+    # wallpaper daemon needs a kick.
 	systemctl restart --user hyprpaper
 }
 if [[ "$1" == "close" ]]; then
@@ -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.
@@ -0,0 +1,247 @@
 # Takemi
 A Persona 5 flavoured Quickshell desktop for Hyprland. Crimson, black and white,
 with no gradients anywhere. Everything leans by the same 14°, corners are
 chopped rather than rounded, and every surface is one continuous slab divided by
 hairlines rather than a cluster of floating cards.
 Replaces Waybar, dunst and hyprlock.
 ## Running
 ```sh
 qs                       # starts the shell (Hyprland does this via autostart.conf)
 qs -p lockpreview.qml    # the lock screen in an ordinary window, for styling
 ```
 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.
 ```
 ┌────────────────────────────────────────────┐
 │ ◆ │ 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 two surfaces and their 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
 ```
 `P5Panel` is the base surface everything sits on. It does not auto-size —
 callers set implicit sizes from their own layout (`row.implicitWidth +
 contentPad * 2`), which keeps the shape maths out of binding loops.
 ## Modules
 | Module | Where | Left click | Right click | Middle | Scroll | Hover |
 |---|---|---|---|---|---|---|
 | Sigil | bar | app menu | reload shell | | | |
 | Workspaces | bar | switch | | | | |
 | Clock | bar | pin calendar | | | | calendar |
 | Network | rail | pin details | | | | state + networks |
 | Bluetooth | rail | pin details | | | | state + devices |
 | Volume | rail | pin audio | | | volume | state + scroll hint + audio |
 | Mic | rail | pin audio | | | mic volume | state + scroll hint + audio |
 | Brightness | rail | | | | brightness | state + scroll hint |
 | Battery | rail | pin panel | | | | power detail |
 | Tray | rail | activate | app menu | secondary | | |
 | Bell | rail | pin history + mark read | | | | state + history |
 | Power | rail | power menu | | | | |
 | Media | bar | play/pause | next | raise player | next/prev | full player |
 | CPU/MEM/GPU | bar | btop | | | | resource dashboard |
 Popouts open on a short dwell and stay while the pointer is over the trigger or
 the panel. 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
 Set in `~/.config/hypr/modules/keybinds.conf`:
 - `Super+Ctrl+L` — lock
 - `Super+P` — power menu
 - `Super+Shift+N` — toggle do not disturb
 - `Super+Ctrl+Shift+N` — clear notifications
 - `Super+Shift+R` — reload the shell
 All of these go through Quickshell's IPC, so they work from any script:
 ```sh
 qs ipc call shell lock
 qs ipc call shell power
 qs ipc call shell toggleDnd
 qs ipc call shell clearNotifications
 qs ipc call shell reloadConfig
 ```
 ## Data sources
 Hardware telemetry comes from `fluxo`, whose hardware modules are configured to
 emit raw pipe-delimited values rather than display strings — `services/Sys.qml`
 parses them and does its own formatting. The previous human-readable Waybar
 formats are preserved in `~/.config/fluxo/config.toml.waybar-bak`.
 Everything else is native: PipeWire for audio, BlueZ for bluetooth,
 NetworkManager for Wi-Fi, UPower for battery, MPRIS for media, and Quickshell's
 own notification server. These are event-driven, so the bar and OSD react the
 instant a volume key is pressed instead of on the next poll.
 ## Lock screen
 Authenticates through `/etc/pam.d/hyprlock`, which on this box is just
 `auth include login`. The visuals live in `lock/LockFace.qml` so they can be
 styled in an ordinary window (`qs -p lockpreview.qml`) without locking the
 session.
 If the shell ever dies while the session is locked, the compositor keeps the
 session secured by protocol and there is no unlocker left to talk to — recovery
 means restarting Hyprland from a TTY.
 ## What was retired
 - `waybar.service` — disabled. Its config is still in `~/.config/waybar`.
 - `dunst.service` — masked, so it cannot be D-Bus activated and steal
  `org.freedesktop.Notifications`. Undo with
  `systemctl --user unmask dunst.service`.
 - `hyprlock` — no longer bound. `hyprlock.conf` is untouched.
 ## Optional
 `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 Archivo Black, set italic almost everywhere. 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.
@@ -0,0 +1,136 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "root:/config"
 import "root:/components"
 // Focused window title. Rapid application title churn is settled before it is
 // painted, then the stable caption lands like a misregistered print layer.
 Item {
    id: root
    required property var screenRef
    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(screenRef)
    readonly property HyprlandToplevel toplevel: Hyprland.activeToplevel
    // Only speak for the monitor this bar lives on.
    readonly property bool mine: toplevel !== null
        && (root.monitor === null || toplevel.monitor === null
            || toplevel.monitor.id === root.monitor.id)
    readonly property string incomingTitle: mine && toplevel.title ? toplevel.title : "—"
    property string displayedTitle: "—"
    // The bar shrinks this when the three clusters would otherwise collide.
    property real maxWidth: 240
    implicitWidth: Math.min(maxWidth, Math.max(70, label.implicitWidth + 4))
    implicitHeight: 20
    Behavior on implicitWidth {
        NumberAnimation { duration: Theme.durSlow; easing.type: Easing.OutExpo }
    }
    Item {
        id: titleStage
        anchors.fill: parent
        clip: true
        Text {
            id: label
            anchors.verticalCenter: parent.verticalCenter
            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
        }
    }
    function commitTitle(): void {
        if (root.displayedTitle === root.incomingTitle)
            return;
        root.displayedTitle = root.incomingTitle;
        titleLanding.restart();
    }
    // Browser tabs, terminals and editors can update titles several times in a
    // frame. Keep the old caption steady until the stream settles instead of
    // restarting an animation for every intermediate value.
    Timer {
        id: titleSettle
        interval: 120
        repeat: false
        onTriggered: root.commitTitle()
    }
    onIncomingTitleChanged: titleSettle.restart()
    Component.onCompleted: displayedTitle = incomingTitle
    // A quick crimson wipe under the title on focus change.
    Rectangle {
        id: wipe
        anchors.bottom: parent.bottom
        height: 2
        width: 0
        color: Theme.accent
        opacity: 0
    }
    SequentialAnimation {
        id: titleLanding
        ParallelAnimation {
            NumberAnimation {
                target: wipe; property: "width"
                from: 0; to: root.width
                duration: Theme.durBase; easing.type: Easing.OutExpo
            }
            NumberAnimation {
                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"
            to: 0; duration: Theme.durSlow
        }
    }
 }
@@ -0,0 +1,125 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // One bar per monitor, and one surface.
 //
 // Identity and workspaces on the left, the player, metrics and clock on the
 // right, all inside a single continuous slab and separated by hairline rules
 // rather than by gaps. Nothing floats and nothing has its own card. Status
 // lives on the rail, which is likewise one slab — two surfaces, not a dozen
 // islands.
 PanelWindow {
    id: root
    required property var modelData
    screen: modelData
    WlrLayershell.layer: WlrLayer.Top
    WlrLayershell.namespace: "takemi-bar"
    anchors {
        top: true
        left: true
        right: true
    }
    margins {
        top: Theme.barMargin
        left: Theme.barMargin
        right: Theme.barMargin
    }
    implicitHeight: Theme.barHeight
    exclusiveZone: Theme.barHeight + Theme.barMargin
    color: "transparent"
    // Calm permanent chrome: one opaque slab with no texture or offset copy.
    ChromeSurface {
        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: leftGroup
        anchors.left: parent.left
        anchors.leftMargin: root.edgeInset
        anchors.verticalCenter: parent.verticalCenter
        spacing: 0
        Sigil {
            id: sigil
            screenRef: root.modelData
        }
        Divider {}
        Workspaces {
            id: spaces
            anchors.verticalCenter: parent.verticalCenter
            screenRef: root.modelData
        }
        Divider {}
        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)
        }
    }
    // ----------------------------------------------------------------- right
    Row {
        id: rightGroup
        anchors.right: parent.right
        anchors.rightMargin: root.edgeInset
        anchors.verticalCenter: parent.verticalCenter
        spacing: 0
        MediaPill {
            screenRef: root.modelData
        }
        Divider {}
        Resources {
            screenRef: root.modelData
        }
        Divider {}
        Clock {
            screenRef: root.modelData
        }
    }
    // A hairline rule between modules, sheared to the house angle. This is what
    // divides the bar now — gaps between cards are what made it look scattered.
    component Divider: Item {
        anchors.verticalCenter: parent.verticalCenter
        implicitWidth: Theme.padM * 2
        implicitHeight: Theme.barHeight
        Skew {
            anchors.centerIn: parent
            width: 1
            height: 20
            color: Theme.alpha(Theme.outline, 0.9)
        }
    }
 }
@@ -0,0 +1,163 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // Shared chrome for every bar module.
 //
 // 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.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: standalone ? panelLoader.item?.leanInset ?? 0 : 0
    // The hover rule's own strip, reserved at the bottom of the module.
    //
    // 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.
    readonly property real ruleHeight: 2
    readonly property real ruleInset: 5
    readonly property real ruleBand: root.standalone ? 0 : root.ruleHeight + root.ruleInset
    // 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
    signal clicked()
    signal rightClicked()
    signal middleClicked()
    signal scrolled(real delta)
    implicitHeight: Theme.barHeight
    Loader {
        id: panelLoader
        anchors.fill: parent
        active: root.standalone
        sourceComponent: P5Panel {
            lean: root.lean
            leanLeft: root.leanLeft
            chop: root.chop
            chopCorners: root.chopCorners
            padding: root.padding
            halftone: root.halftone
            halftoneColor: root.accent
            fill: root.active ? Theme.surfaceAlt : Theme.surface
            fillOpacity: 1.0
            border: root.hovered || root.active
                ? root.accent
                : Theme.alpha(Theme.outline, 0.9)
            borderWidth: root.hovered || root.active ? Theme.stroke : 1
            slash: root.slash || root.active
            slashColor: root.accent
        }
    }
    Item {
        id: holder
        anchors.fill: parent
        anchors.leftMargin: root.contentPad
        anchors.rightMargin: root.contentPad
        anchors.bottomMargin: root.ruleBand
    }
    // Hover mark for in-bar modules: a crimson rule under the content, wiping
    // out from the leading edge. Sheared to match the one angle everything uses.
    Item {
        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.
        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
            Behavior on width {
                NumberAnimation { duration: 480; easing.type: Easing.OutQuad }
            }
        }
        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 }
            }
        }
    }
    HoverHandler {
        id: hover
        enabled: root.interactive
        cursorShape: Qt.PointingHandCursor
    }
    TapHandler {
        enabled: root.interactive
        acceptedButtons: Qt.LeftButton
        onTapped: root.clicked()
    }
    TapHandler {
        enabled: root.interactive
        acceptedButtons: Qt.RightButton
        onTapped: root.rightClicked()
    }
    TapHandler {
        enabled: root.interactive
        acceptedButtons: Qt.MiddleButton
        onTapped: root.middleClicked()
    }
    WheelHandler {
        enabled: root.interactive
        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
        onWheel: event => root.scrolled(event.angleDelta.y)
    }
 }
@@ -0,0 +1,87 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/popouts"
 // Centre-stage clock. Hovering drops the calendar.
 BarPill {
    id: root
    required property var screenRef
    accent: Theme.accent
    slash: true
    padding: Theme.padS
    implicitWidth: layout.implicitWidth + contentPad * 2
    SystemClock {
        id: clock
        precision: SystemClock.Minutes
    }
    onClicked: calendar.pinned = !calendar.pinned
    Row {
        id: layout
        anchors.centerIn: parent
        spacing: Theme.padM
        Column {
            anchors.verticalCenter: parent.verticalCenter
            spacing: -1
            Text {
                text: Qt.formatDateTime(clock.date, "ddd").toUpperCase()
                color: Theme.accent
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.letterSpacing: 2.5
                renderType: Text.NativeRendering
            }
            Text {
                text: Qt.formatDateTime(clock.date, "dd MMM").toUpperCase()
                color: Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.letterSpacing: 1
                renderType: Text.NativeRendering
            }
        }
        Skew {
            anchors.verticalCenter: parent.verticalCenter
            width: 2
            height: 22
            color: Theme.alpha(Theme.accent, 0.6)
        }
        SplitText {
            id: timeText
            anchors.verticalCenter: parent.verticalCenter
            text: Qt.formatDateTime(clock.date, "HH:mm")
            pixelSize: Theme.fsTitle
            split: 1.4
        }
    }
    // Glitch the time on the hour, because it should feel like something happened.
    property int lastHour: -1
    Connections {
        target: clock
        function onDateChanged() {
            const h = clock.date.getHours();
            if (root.lastHour !== -1 && h !== root.lastHour) timeText.glitch();
            root.lastHour = h;
        }
    }
    CalendarPopout {
        id: calendar
        anchorItem: root
        triggerHovered: root.hovered
        clockDate: clock.date
    }
 }
@@ -0,0 +1,186 @@
 import QtQuick
 import QtQuick.Shapes
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 import "root:/popouts"
 // Now-playing module. Collapses to nothing when no player is around.
 BarPill {
    id: root
    required property var screenRef
    accent: Theme.primary
    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
    Behavior on implicitWidth {
        NumberAnimation { duration: Theme.durSlow; easing.type: Easing.OutExpo }
    }
    clip: true
    onClicked: Media.playPause()
    onRightClicked: Media.next()
    onMiddleClicked: Media.raise()
    onScrolled: delta => delta > 0 ? Media.next() : Media.previous()
    Row {
        id: layout
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        spacing: Theme.padS
        // Album art, chopped into the house shape.
        Item {
            id: artFrame
            anchors.verticalCenter: parent.verticalCenter
            width: 24
            height: 24
            Shape {
                id: artMask
                anchors.fill: parent
                visible: false
                layer.enabled: true
                layer.smooth: true
                preferredRendererType: Shape.CurveRenderer
                ShapePath {
                    fillColor: "white"
                    strokeColor: "transparent"
                    PathPolyline {
                        path: Geom.chamfer(Geom.parallelogram(24, 24, 0.18), 5, [1, 3])
                    }
                }
            }
            Image {
                id: art
                anchors.fill: parent
                source: Media.artUrl
                fillMode: Image.PreserveAspectCrop
                cache: true
                asynchronous: true
                visible: status === Image.Ready
                layer.enabled: true
                layer.smooth: true
                layer.effect: MaskedArt { maskItem: artMask }
            }
            // Fallback: the source app's glyph.
            Icon {
                anchors.centerIn: parent
                visible: art.status !== Image.Ready
                text: Media.sourceIcon
                font.pixelSize: Theme.fsLarge
                color: Theme.primary
            }
        }
        // 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
            readonly property real cap: 150
            Text {
                width: Math.min(meta.cap, implicitWidth)
                height: 14
                text: Media.title || Media.identity
                color: Theme.text
                elide: Text.ElideRight
                font.pixelSize: Theme.fsSmall
                font.family: Theme.fontDisplay
                font.weight: Font.DemiBold
                font.italic: true
                renderType: Text.NativeRendering
            }
            Text {
                width: Math.min(meta.cap, implicitWidth)
                height: 12
                text: Media.artist || Media.album || Media.identity
                color: Theme.muted
                elide: Text.ElideRight
                font.pixelSize: Theme.fsMicro
                font.family: Theme.fontMono
                renderType: Text.NativeRendering
            }
        }
        // Compact play-state equaliser. It moves only while audio is playing
        // and freezes into three quiet bars when paused.
        Row {
            anchors.verticalCenter: parent.verticalCenter
            spacing: 2
            Repeater {
                model: 3
                Rectangle {
                    required property int index
                    width: 3
                    height: 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 }
                    }
                }
            }
        }
    }
    onVisibleChanged: if (visible) titleGlitch.restart()
    Connections {
        target: Media
        function onTrackChanged() { titleGlitch.restart(); }
    }
    SequentialAnimation {
        id: titleGlitch
        NumberAnimation {
            target: artFrame; property: "rotation"
            from: -8; to: 0; duration: Theme.durSlow; easing.type: Easing.OutBack
        }
    }
    MediaPopout {
        id: popout
        anchorItem: root
        triggerHovered: root.hovered && Media.hasPlayer
    }
 }
@@ -0,0 +1,72 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 import "root:/popouts"
 // Notification bell with an unread badge. Click opens the history, right click
 // toggles do-not-disturb.
 BarPill {
    id: root
    required property var screenRef
    accent: Notifs.dnd ? Theme.muted : Theme.primary
    padding: Theme.padS
    implicitWidth: Theme.barHeight - 4 + contentPad
    onClicked: {
        popout.pinned = !popout.pinned;
        Notifs.markRead();
    }
    onRightClicked: Notifs.toggleDnd()
    Icon {
        id: bell
        anchors.centerIn: parent
        text: Notifs.icon
        font.pixelSize: Theme.fsLarge
        color: {
            if (Notifs.dnd) return Theme.muted;
            if (Notifs.hasUnread) return Theme.accent;
            return root.hovered ? Theme.glow : Theme.primary;
        }
    }
    // Unread badge, chopped like everything else.
    Skew {
        visible: Notifs.unread > 0 && !Notifs.dnd
        anchors.right: parent.right
        anchors.rightMargin: 2
        anchors.top: parent.top
        anchors.topMargin: 4
        width: Math.max(12, badge.implicitWidth + 5)
        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
            text: Notifs.unread > 9 ? "9+" : Notifs.unread
            color: Theme.text
            font.family: Theme.fontMono
            font.pixelSize: 8
            font.weight: Font.Bold
            renderType: Text.NativeRendering
        }
    }
    Connections {
        target: Notifs
        function onPopupRequested() { bell.bump(); }
    }
    NotifPopout {
        id: popout
        anchorItem: root
        triggerHovered: root.hovered
    }
 }
@@ -0,0 +1,42 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Far right. Opens the full-screen power menu.
 BarPill {
    id: root
    required property var screenRef
    accent: Theme.accent
    slash: true
    padding: Theme.padS
    active: Actions.powerMenuOpen
    implicitWidth: Theme.barHeight - 4 + contentPad
    onClicked: Actions.togglePowerMenu()
    Icon {
        id: glyph
        anchors.centerIn: parent
        text: "󰐥"
        font.pixelSize: Theme.fsLarge
        color: root.hovered || Actions.powerMenuOpen ? Theme.accent : Theme.subtext
    }
    // A crimson halo that swells under the pointer.
    Rectangle {
        anchors.centerIn: glyph
        z: -1
        width: root.hovered ? 26 : 0
        height: width
        radius: width / 2
        color: Theme.alpha(Theme.accent, 0.18)
        Behavior on width {
            NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
        }
    }
 }
@@ -0,0 +1,236 @@
 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 + "%"
            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))
                : ""
            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
        Skew {
            anchors.centerIn: parent
            width: 22
            height: 1
            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,128 @@
 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
    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.readout !== "" ? 42 : 32
    Column {
        id: layout
        anchors.centerIn: parent
        spacing: 1
        Icon {
            id: glyph
            anchors.horizontalCenter: parent.horizontalCenter
            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 {
            anchors.horizontalCenter: parent.horizontalCenter
            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 ? layout.implicitHeight : 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
    }
 }
@@ -0,0 +1,116 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 import "root:/popouts"
 // Compact CPU / MEM / GPU readout. Each metric is a number over a segmented
 // meter; hovering opens the full gauge cluster.
 BarPill {
    id: root
    required property var screenRef
    accent: Theme.heat(Math.max(Sys.cpuUsage, Sys.memPercent))
    padding: Theme.padM
    implicitWidth: layout.implicitWidth + contentPad * 2
    onClicked: Actions.openSystemMonitor()
    Row {
        id: layout
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        spacing: Theme.padM
        Metric {
            label: "CPU"
            value: Sys.cpuUsage
            readout: Math.round(Sys.cpuUsage) + "%"
        }
        Divider {}
        Metric {
            label: "MEM"
            value: Sys.memPercent
            readout: Sys.memUsed.toFixed(1) + "G"
        }
        Divider { visible: Sys.gpuAvailable }
        Metric {
            visible: Sys.gpuAvailable
            label: "GPU"
            value: Sys.gpuUsage
            readout: Math.round(Sys.gpuUsage) + "%"
        }
    }
    component Divider: Skew {
        anchors.verticalCenter: parent.verticalCenter
        width: 1
        height: 18
        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
        property string label: ""
        property real value: 0
        property string readout: ""
        anchors.verticalCenter: parent.verticalCenter
        spacing: 2
        Row {
            spacing: 4
            Text {
                anchors.baseline: readoutText.baseline
                text: metric.label
                color: Theme.muted
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.weight: Font.Bold
                font.letterSpacing: 0.5
                renderType: Text.NativeRendering
            }
            Text {
                id: readoutText
                text: metric.readout
                color: Theme.heat(metric.value)
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsBody
                font.weight: Theme.weightDisplay
                font.italic: true
                font.letterSpacing: 0.5
                renderType: Text.NativeRendering
                Behavior on color {
                    ColorAnimation { duration: Theme.durBase }
                }
            }
        }
        MeterBar {
            value: metric.value
            segments: 9
            segmentWidth: 3
            spacing: 2
            height: 5
        }
    }
    SysPopout {
        id: popout
        anchorItem: root
        triggerHovered: root.hovered
    }
 }
@@ -0,0 +1,44 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // The house mark, far left. Click launches the app menu; right click reloads
 // the shell, which is handy while tweaking the config.
 BarPill {
    id: root
    required property var screenRef
    accent: Theme.accent
    slash: true
    padding: Theme.padS
    lean: Theme.skew
    implicitWidth: Theme.barHeight + contentPad
    onClicked: Actions.launch("fuzzel")
    onRightClicked: Actions.reloadShell()
    // 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: "P5"
        pixelSize: Theme.fsLarge
        letterSpacing: 0
        color: root.hovered ? Theme.accent : Theme.primary
    }
    // 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() { mark.glitch(); }
    }
 }
@@ -0,0 +1,117 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 import "root:/popouts"
 // Network, bluetooth, audio, mic, backlight and battery, in one slab. Each
 // glyph carries its own popout.
 BarPill {
    id: root
    required property var screenRef
    accent: Theme.primary
    padding: Theme.padS
    interactive: false
    implicitWidth: layout.implicitWidth + contentPad * 2
    Row {
        id: layout
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        spacing: Theme.padM
        StatusIcon {
            id: netIcon
            icon: Net.icon
            label: Sys.netUp ? Sys.rate(Sys.netRx + Sys.netTx) : ""
            labelWidth: 62
            tint: Theme.primary
            dim: !Sys.netUp
            onClicked: netPopout.pinned = !netPopout.pinned
            onRightClicked: Net.toggleWifi()
            onMiddleClicked: Actions.openNetworkSettings()
        }
        StatusIcon {
            id: btIcon
            icon: Bt.icon
            tint: Bt.connected.length > 0 ? Theme.blue : Theme.primary
            dim: !Bt.enabled
            onClicked: btPopout.pinned = !btPopout.pinned
            onRightClicked: Bt.toggle()
        }
        StatusIcon {
            id: volIcon
            icon: Audio.icon
            label: Audio.muted ? "" : Audio.volumePercent + "%"
            labelWidth: Audio.muted ? 0 : 34
            alert: Audio.muted
            onClicked: Audio.toggleMute()
            onRightClicked: audioPopout.pinned = !audioPopout.pinned
            onMiddleClicked: Actions.openAudioSettings()
            onScrolled: delta => Audio.changeVolume(delta > 0 ? 0.05 : -0.05)
        }
        StatusIcon {
            id: micIcon
            icon: Audio.micIcon
            alert: Audio.micMuted
            onClicked: Audio.toggleMicMute()
            onRightClicked: audioPopout.pinned = !audioPopout.pinned
            onScrolled: delta => Audio.setMicVolume(Audio.micVolume + (delta > 0 ? 0.05 : -0.05))
        }
        StatusIcon {
            id: brightIcon
            visible: Brightness.available
            icon: Brightness.icon
            label: Math.round(Brightness.percent) + "%"
            labelWidth: 34
            // 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)
        }
        StatusIcon {
            id: battIcon
            visible: Battery.available
            icon: Battery.icon
            label: Math.round(Battery.percent) + "%"
            labelWidth: 34
            tint: Battery.tint
            alert: Battery.critical
            pulsing: Battery.critical
            onClicked: battPopout.pinned = !battPopout.pinned
        }
    }
    NetPopout {
        id: netPopout
        anchorItem: netIcon
        triggerHovered: netIcon.hovered
    }
    BtPopout {
        id: btPopout
        anchorItem: btIcon
        triggerHovered: btIcon.hovered
    }
    AudioPopout {
        id: audioPopout
        anchorItem: volIcon
        triggerHovered: volIcon.hovered || micIcon.hovered
    }
    BatteryPopout {
        id: battPopout
        anchorItem: battIcon
        triggerHovered: battIcon.hovered
        visible: Battery.available && shown
    }
 }
@@ -0,0 +1,108 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // One indicator inside the status cluster: a glyph, an optional readout, and a
 // crimson underline that wipes in on hover.
 Item {
    id: root
    property string icon: ""
    property string label: ""
    property color tint: Theme.primary
    property bool alert: false
    property bool dim: false
    property bool pulsing: false
    // Fixed label width. Readouts that change width constantly (throughput,
    // percentages) would otherwise shove the whole cluster around.
    property real labelWidth: 0
    readonly property bool hovered: hover.hovered
    signal clicked()
    signal rightClicked()
    signal middleClicked()
    signal scrolled(real delta)
    implicitWidth: layout.implicitWidth
    implicitHeight: Theme.barHeight - Theme.padS * 2
    Row {
        id: layout
        anchors.centerIn: parent
        spacing: 5
        Icon {
            id: glyph
            anchors.verticalCenter: parent.verticalCenter
            text: root.icon
            pulsing: root.pulsing
            color: {
                if (root.alert) return Theme.accent;
                if (root.dim) return Theme.muted;
                if (root.hovered) return Theme.glow;
                return root.tint;
            }
        }
        Text {
            anchors.verticalCenter: parent.verticalCenter
            visible: root.label !== ""
            text: root.label
            width: root.labelWidth > 0 ? root.labelWidth : implicitWidth
            horizontalAlignment: Text.AlignRight
            elide: Text.ElideRight
            color: root.dim ? Theme.muted : Theme.subtext
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsSmall
            font.weight: Font.DemiBold
            renderType: Text.NativeRendering
            Behavior on color {
                ColorAnimation { duration: Theme.durBase }
            }
        }
    }
    Rectangle {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        height: 2
        width: root.hovered ? layout.implicitWidth : 0
        color: root.alert ? Theme.accent : root.tint
        Behavior on width {
            NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutExpo }
        }
    }
    scale: root.hovered ? 1.06 : 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()
    }
    TapHandler {
        acceptedButtons: Qt.RightButton
        onTapped: root.rightClicked()
    }
    TapHandler {
        acceptedButtons: Qt.MiddleButton
        onTapped: root.middleClicked()
    }
    WheelHandler {
        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
        onWheel: event => root.scrolled(event.angleDelta.y)
    }
 }
@@ -0,0 +1,103 @@
 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, as a vertical column for the right-hand rail. Left click
 // activates, right click opens the app's own menu, middle click is the
 // secondary action. The surrounding slab is the caller's business — this is
 // just the stack of icons.
 Column {
    id: root
    spacing: Theme.padS + 2
    visible: SystemTray.items.values.length > 0
    Repeater {
        model: SystemTray.items
        Item {
            id: entry
            required property SystemTrayItem modelData
            width: 18
            height: 18
            anchors.horizontalCenter: parent.horizontalCenter
            // App icons arrive in their own brand colours, which wrecks the
            // two-hue palette faster than anything else in the shell. Flatten
            // 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
                layer.enabled: true
                layer.effect: MultiEffect {
                    colorization: 1.0
                    colorizationColor: itemHover.hovered
                        ? Theme.accent
                        : Theme.text
                    Behavior on colorizationColor {
                        ColorAnimation { duration: Theme.durFast }
                    }
                }
                opacity: itemHover.hovered ? 1.0 : 0.82
                Behavior on opacity {
                    NumberAnimation { duration: Theme.durFast }
                }
            }
            scale: itemHover.hovered ? 1.18 : 1.0
            Behavior on scale {
                NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
            }
            HoverHandler {
                id: itemHover
                cursorShape: Qt.PointingHandCursor
            }
            TapHandler {
                acceptedButtons: Qt.LeftButton
                onTapped: {
                    if (entry.modelData.onlyMenu) {
                        menu.toggle();
                    } else {
                        entry.modelData.activate();
                    }
                }
            }
            TapHandler {
                acceptedButtons: Qt.RightButton
                onTapped: {
                    if (entry.modelData.hasMenu) menu.toggle();
                }
            }
            TapHandler {
                acceptedButtons: Qt.MiddleButton
                onTapped: entry.modelData.secondaryActivate()
            }
            // Menus open to the left, into the screen rather than off its edge.
            TrayMenu {
                id: menu
                anchorItem: entry
                menuHandle: entry.modelData.menu
            }
        }
    }
 }
@@ -0,0 +1,141 @@
 import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import "root:/config"
 import "root:/components"
 // Workspace indicator: leaning ticks that stretch open when focused. Occupied
 // workspaces glow teal, urgent ones snap to crimson.
 Item {
    id: root
    required property var screenRef
    readonly property HyprlandMonitor monitor: Hyprland.monitorFor(screenRef)
    readonly property int focusedId: monitor?.activeWorkspace?.id ?? -1
    // Live workspaces on this monitor, keyed by id, ignoring special workspaces.
    readonly property var occupancy: {
        const map = {};
        for (const w of (Hyprland.workspaces?.values ?? [])) {
            if (w.id < 1) continue;
            if (root.monitor && w.monitor && w.monitor.id !== root.monitor.id) continue;
            map[w.id] = {
                count: w.toplevels?.values?.length ?? 0,
                urgent: w.urgent,
                fullscreen: w.hasFullscreen
            };
        }
        return map;
    }
    // Always show 1..5, plus anything beyond that which is actually in use.
    readonly property var slots: {
        const ids = [1, 2, 3, 4, 5];
        for (const key in root.occupancy) {
            const id = parseInt(key);
            if (ids.indexOf(id) === -1) ids.push(id);
        }
        return ids.sort((a, b) => a - b);
    }
    implicitWidth: row.implicitWidth
    implicitHeight: 24
    Row {
        id: row
        anchors.verticalCenter: parent.verticalCenter
        spacing: 6
        Repeater {
            model: root.slots
            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
                readonly property bool urgent: info !== undefined && info.urgent
                readonly property bool focused: root.focusedId === wsId
                readonly property bool hovered: pipHover.hovered
                // 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 {
                    NumberAnimation {
                        duration: Theme.durSlow
                        easing.type: Easing.OutBack
                        easing.overshoot: 1.6
                    }
                }
                Skew {
                    id: tick
                    anchors.fill: parent
                    // Focused is a solid crimson block. Occupied is a white
                    // block at half weight. Empty is an outline. Three states,
                    // two colours, no ambiguity.
                    color: {
                        if (pip.focused || pip.urgent) return Theme.accent;
                        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 }
                    }
                }
                // The focused workspace wears its number.
                Text {
                    anchors.centerIn: parent
                    opacity: pip.focused ? 1 : 0
                    visible: opacity > 0.01
                    text: pip.wsId
                    color: Theme.ink
                    font.family: Theme.fontDisplay
                    font.pixelSize: Theme.fsBody
                    font.weight: Theme.weightDisplay
                    font.italic: true
                    renderType: Text.NativeRendering
                    Behavior on opacity {
                        NumberAnimation { duration: Theme.durBase }
                    }
                }
                // Fullscreen marker.
                Rectangle {
                    visible: pip.info !== undefined && pip.info.fullscreen && !pip.focused
                    width: 4; height: 4
                    color: Theme.accent
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.bottom
                    anchors.topMargin: 1
                }
                HoverHandler {
                    id: pipHover
                    cursorShape: Qt.PointingHandCursor
                }
                TapHandler {
                    onTapped: Hyprland.dispatch("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
 }
@@ -0,0 +1,120 @@
 import QtQuick
 import QtQuick.Shapes
 import "root:/config"
 // Radial gauge used across the resource popout. Sweeps a 270° arc with a
 // tick-marked rail behind it and the reading set in the middle.
 Item {
    id: root
    property real value: 0            // 0..100
    property string label: ""
    property string readout: Math.round(value) + "%"
    property string sub: ""
    property color arcColor: Theme.heat(value)
    property real thickness: 7
    property real startAngle: 135
    property real sweep: 270
    property int ticks: 24
    implicitWidth: 96
    implicitHeight: 96
    readonly property real _r: Math.min(width, height) / 2 - thickness / 2 - 4
    readonly property real _cx: width / 2
    readonly property real _cy: height / 2
    // Rail
    Shape {
        anchors.fill: parent
        preferredRendererType: Shape.CurveRenderer
        ShapePath {
            fillColor: "transparent"
            strokeColor: Theme.alpha(Theme.outline, 0.5)
            strokeWidth: root.thickness
            capStyle: ShapePath.FlatCap
            PathAngleArc {
                centerX: root._cx; centerY: root._cy
                radiusX: root._r; radiusY: root._r
                startAngle: root.startAngle
                sweepAngle: root.sweep
            }
        }
    }
    // Tick marks around the rail.
    Repeater {
        model: root.ticks
        Rectangle {
            required property int index
            readonly property real a: (root.startAngle + root.sweep * (index / (root.ticks - 1))) * Math.PI / 180
            readonly property real rr: root._r + root.thickness / 2 + 3
            width: 2
            height: index % 4 === 0 ? 6 : 3
            color: Theme.alpha(Theme.primary, index % 4 === 0 ? 0.55 : 0.25)
            x: root._cx + Math.cos(a) * rr - width / 2
            y: root._cy + Math.sin(a) * rr - height / 2
            rotation: (root.startAngle + root.sweep * (index / (root.ticks - 1))) + 90
        }
    }
    // Value arc
    Shape {
        anchors.fill: parent
        preferredRendererType: Shape.CurveRenderer
        ShapePath {
            fillColor: "transparent"
            strokeColor: root.arcColor
            strokeWidth: root.thickness
            capStyle: ShapePath.FlatCap
            PathAngleArc {
                id: valueArc
                centerX: root._cx; centerY: root._cy
                radiusX: root._r; radiusY: root._r
                startAngle: root.startAngle
                sweepAngle: root.sweep * Math.max(0, Math.min(100, root.value)) / 100
                Behavior on sweepAngle {
                    NumberAnimation {
                        duration: Theme.durSlow
                        easing.type: Easing.OutExpo
                    }
                }
            }
        }
    }
    Column {
        anchors.centerIn: parent
        spacing: -2
        SplitText {
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.readout
            pixelSize: Theme.fsLarge
            color: Theme.text
            split: 1.2
            splitOpacity: 0.6
        }
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.label
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.letterSpacing: 2
            renderType: Text.NativeRendering
        }
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            visible: root.sub !== ""
            text: root.sub
            color: Theme.subtext
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            renderType: Text.NativeRendering
        }
    }
 }
@@ -0,0 +1,123 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 // Polygon maths for the Persona 5 panel language: everything leans, and corners
 // get chopped rather than rounded.
 Singleton {
    id: root
    // A right-leaning parallelogram filling w x h. `lean` is the horizontal
    // offset applied to the top edge, as a fraction of height.
    function parallelogram(w: real, h: real, lean: real): var {
        const off = h * lean;
        return [
            Qt.point(off, 0),
            Qt.point(w, 0),
            Qt.point(w - off, h),
            Qt.point(0, h)
        ];
    }
    // Same, leaning the other way.
    function parallelogramL(w: real, h: real, lean: real): var {
        const off = h * lean;
        return [
            Qt.point(0, 0),
            Qt.point(w - off, 0),
            Qt.point(w, h),
            Qt.point(off, h)
        ];
    }
    // 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)];
    }
    // Move `dist` px from `p` toward `q`.
    function toward(p: point, q: point, dist: real): point {
        const dx = q.x - p.x;
        const dy = q.y - p.y;
        const len = Math.hypot(dx, dy);
        if (len < 0.0001) return p;
        const t = Math.min(dist, len / 2) / len;
        return Qt.point(p.x + dx * t, p.y + dy * t);
    }
    // Chop the listed corners of a polygon. `corners` is an array of indices;
    // pass null to chop every corner.
    function chamfer(pts: var, size: real, corners: var): var {
        if (size <= 0) return root.closed(pts);
        const n = pts.length;
        const out = [];
        for (let i = 0; i < n; i++) {
            const p = pts[i];
            if (corners !== null && corners.indexOf(i) === -1) {
                out.push(p);
                continue;
            }
            out.push(root.toward(p, pts[(i - 1 + n) % n], size));
            out.push(root.toward(p, pts[(i + 1) % n], size));
        }
        return root.closed(out);
    }
    function closed(pts: var): var {
        if (pts.length === 0) return pts;
        const out = pts.slice();
        out.push(pts[0]);
        return out;
    }
    // Shrink a polygon toward its centroid — used for inner strokes.
    function inset(pts: var, amount: real): var {
        let cx = 0, cy = 0;
        for (const p of pts) { cx += p.x; cy += p.y; }
        cx /= pts.length; cy /= pts.length;
        return pts.map(p => {
            const dx = cx - p.x, dy = cy - p.y;
            const len = Math.hypot(dx, dy);
            if (len < 0.0001) return p;
            const t = amount / len;
            return Qt.point(p.x + dx * t, p.y + dy * t);
        });
    }
    // A jagged "torn paper" edge, the Persona 5 speech-bubble signature.
    // Returns a polygon `w` x `h` whose bottom edge is serrated.
    function torn(w: real, h: real, teeth: int, depth: real): var {
        const out = [Qt.point(0, 0), Qt.point(w, 0)];
        const step = w / teeth;
        for (let i = 0; i < teeth; i++) {
            const x1 = w - i * step - step / 2;
            const x2 = w - (i + 1) * step;
            out.push(Qt.point(x1, h));
            out.push(Qt.point(x2, h - depth));
        }
        return out;
    }
 }
@@ -0,0 +1,45 @@
 import QtQuick
 import "root:/config"
 // Nerd Font glyph with an optional pulse, used for every status indicator.
 Text {
    id: root
    property bool pulsing: false
    property real pulseScale: 1.18
    font.family: Theme.fontIcon
    font.pixelSize: Theme.fsLarge
    color: Theme.primary
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    renderType: Text.NativeRendering
    Behavior on color {
        ColorAnimation { duration: Theme.durBase }
    }
    SequentialAnimation on scale {
        running: root.pulsing
        loops: Animation.Infinite
        alwaysRunToEnd: true
        NumberAnimation { to: root.pulseScale; duration: 620; easing.type: Easing.OutExpo }
        NumberAnimation { to: 1.0; duration: 620; easing.type: Easing.InOutQuad }
    }
    function bump() {
        bumpAnim.restart();
    }
    SequentialAnimation {
        id: bumpAnim
        NumberAnimation {
            target: root; property: "scale"
            to: 1.35; duration: Theme.durFast; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: root; property: "scale"
            to: 1.0; duration: Theme.durSlow; easing.type: Easing.OutBack
        }
    }
 }
@@ -0,0 +1,62 @@
 import QtQuick
 import "root:/config"
 // Horizontally scrolling text that only moves when it actually overflows, and
 // pauses at each end so titles stay readable.
 Item {
    id: root
    property string text: ""
    property int pixelSize: Theme.fsSmall
    property string family: Theme.fontDisplay
    property int weight: Theme.weightBody
    property bool italic: false
    property color color: Theme.text
    property real speed: 26          // px per second
    property int pause: 1400         // ms held at each end
    property bool running: true
    readonly property bool overflowing: label.implicitWidth > width + 1
    clip: true
    implicitHeight: label.implicitHeight
    implicitWidth: label.implicitWidth
    Text {
        id: label
        y: 0
        height: root.height
        text: root.text
        color: root.color
        verticalAlignment: Text.AlignVCenter
        font.family: root.family
        font.pixelSize: root.pixelSize
        font.weight: root.weight
        font.italic: root.italic
        renderType: Text.NativeRendering
    }
    SequentialAnimation {
        id: scroll
        running: root.running && root.overflowing && root.visible
        loops: Animation.Infinite
        PauseAnimation { duration: root.pause }
        NumberAnimation {
            target: label; property: "x"
            from: 0; to: Math.min(0, root.width - label.implicitWidth)
            duration: Math.max(1, Math.abs(root.width - label.implicitWidth) / root.speed * 1000)
            easing.type: Easing.Linear
        }
        PauseAnimation { duration: root.pause }
        NumberAnimation {
            target: label; property: "x"
            to: 0
            duration: Theme.durSlow
            easing.type: Easing.OutExpo
        }
    }
    onOverflowingChanged: if (!overflowing) label.x = 0
    onTextChanged: { label.x = 0; scroll.restart(); }
 }
@@ -0,0 +1,21 @@
 import QtQuick
 import QtQuick.Effects
 // Layer effect that clips whatever it is applied to into the silhouette of
 // `maskItem` — used to chop album art into the shell's panel shape.
 MultiEffect {
    property Item maskItem
    maskEnabled: maskItem !== null
    maskSource: maskItem
    // 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.3
 }
@@ -0,0 +1,53 @@
 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.
 Item {
    id: root
    property real value: 0            // 0..100
    property int segments: 14
    property real segmentWidth: 4
    property real spacing: 3
    property color activeColor: Theme.heat(value)
    property color idleColor: Theme.alpha(Theme.outline, 0.55)
    property real lean: Theme.skew
    readonly property int litCount: Math.round(Math.max(0, Math.min(100, value)) / 100 * segments)
    implicitWidth: segments * segmentWidth + (segments - 1) * spacing
    implicitHeight: 14
    Row {
        anchors.fill: parent
        spacing: root.spacing
        Repeater {
            model: root.segments
            Item {
                required property int index
                width: root.segmentWidth
                height: root.height
                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.
                    opacity: parent.index < root.litCount
                        ? (parent.index >= root.segments - 2 ? 1.0 : 0.9)
                        : 1.0
                    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
    }
 }
@@ -0,0 +1,193 @@
 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.
 Item {
    id: root
    required property var notif
    property bool showActions: true
    readonly property color tone: root.notif
        ? Notifs.urgencyColor(root.notif.urgency)
        : Theme.primary
    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: root.lean
        chop: root.chop
        fill: Theme.surface
        fillOpacity: 0.97
        border: Theme.alpha(root.tone, hover.hovered ? 0.95 : 0.5)
        slash: true
        slashColor: root.tone
        slashWidth: 4
        halftone: root.notif?.urgency === NotificationUrgency.Critical
        halftoneColor: Theme.accent
        halftoneOpacity: 0.12
        padding: Theme.padM
        Column {
            id: layout
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: 3
            // App line
            Row {
                spacing: Theme.padS
                Icon {
                    anchors.verticalCenter: parent.verticalCenter
                    text: Notifs.appIconFor(root.notif)
                    color: root.tone
                    font.pixelSize: Theme.fsBody
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: (root.notif?.appName || "System").toUpperCase()
                    color: root.tone
                    font.family: Theme.fontMono
                    font.pixelSize: 8
                    font.letterSpacing: 2
                    renderType: Text.NativeRendering
                }
            }
            Text {
                width: parent.width
                text: root.notif?.summary || ""
                color: Theme.text
                elide: Text.ElideRight
                maximumLineCount: 2
                wrapMode: Text.WordWrap
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsBody
                font.weight: Font.Black
                font.italic: true
                renderType: Text.NativeRendering
            }
            Text {
                width: parent.width
                visible: text !== ""
                text: root.notif?.body || ""
                color: Theme.subtext
                elide: Text.ElideRight
                maximumLineCount: 4
                wrapMode: Text.WordWrap
                textFormat: Text.StyledText
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsSmall
                renderType: Text.NativeRendering
            }
            // Inline image, when the sender supplied one.
            Image {
                visible: source != "" && status === Image.Ready
                source: root.notif?.image || ""
                sourceSize.height: 90
                fillMode: Image.PreserveAspectFit
                asynchronous: true
            }
            Row {
                visible: root.showActions && (root.notif?.actions?.length ?? 0) > 0
                spacing: Theme.padS
                topPadding: Theme.padS
                Repeater {
                    model: root.notif?.actions ?? []
                    Item {
                        id: actionChip
                        required property var modelData
                        implicitWidth: actionLabel.implicitWidth + Theme.padM
                        implicitHeight: 22
                        Skew {
                            anchors.fill: parent
                            color: actionHover.hovered
                                ? Theme.alpha(root.tone, 0.3)
                                : Theme.alpha(root.tone, 0.1)
                            borderWidth: 1
                            borderColor: Theme.alpha(root.tone, 0.6)
                        }
                        Text {
                            id: actionLabel
                            anchors.centerIn: parent
                            text: actionChip.modelData.text
                            color: Theme.text
                            font.family: Theme.fontDisplay
                            font.pixelSize: Theme.fsMicro
                            font.italic: true
                            font.weight: Font.DemiBold
                            renderType: Text.NativeRendering
                        }
                        HoverHandler {
                            id: actionHover
                            cursorShape: Qt.PointingHandCursor
                        }
                        TapHandler {
                            onTapped: {
                                actionChip.modelData.invoke();
                                root.dismissed();
                            }
                        }
                    }
                }
            }
        }
        // Close affordance.
        Icon {
            anchors.right: parent.right
            anchors.top: parent.top
            visible: hover.hovered
            text: "󰅖"
            color: closeHover.hovered ? Theme.accent : Theme.muted
            font.pixelSize: Theme.fsBody
            HoverHandler {
                id: closeHover
                cursorShape: Qt.PointingHandCursor
            }
            TapHandler {
                onTapped: root.dismissed()
            }
        }
    }
    HoverHandler {
        id: hover
    }
    // Middle click dismisses, matching the old dunst muscle memory.
    TapHandler {
        acceptedButtons: Qt.MiddleButton
        onTapped: root.dismissed()
    }
 }
@@ -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 }
    }
 }
@@ -0,0 +1,145 @@
 import QtQuick
 import "root:/config"
 // Chopped, leaning button with one activation path for pointer and keyboard.
 FocusScope {
    id: root
    property string text: ""
    property string icon: ""
    property color accent: Theme.primary
    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: 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
    P5Panel {
        id: panel
        anchors.fill: parent
        lean: root.lean
        padding: Theme.padS
        fill: {
            if (!root.enabled) return Theme.treatmentDisabledFill;
            if (root.destructive) return Theme.treatmentDestructiveFill;
            if (root.highlighted) return Theme.treatmentHoverFill;
            return Theme.treatmentRestFill;
        }
        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 {
            NumberAnimation { duration: Theme.durFast }
        }
        Row {
            id: row
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            spacing: Theme.padM
            Icon {
                anchors.verticalCenter: parent.verticalCenter
                visible: root.icon !== ""
                text: root.icon
                font.pixelSize: Theme.fsTitle
                color: {
                    if (!root.enabled) return Theme.treatmentDisabledText;
                    if (root.destructive) return Theme.treatmentDestructiveText;
                    if (root.highlighted) return Theme.treatmentHoverText;
                    return root.accent;
                }
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: root.text
                color: {
                    if (!root.enabled) return Theme.treatmentDisabledText;
                    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
                font.italic: true
                font.letterSpacing: 1.5
                font.capitalization: Font.AllUppercase
                renderType: Text.NativeRendering
                Behavior on color {
                    ColorAnimation { duration: Theme.durFast }
                }
            }
        }
    }
    transform: Translate {
        x: root.pressed ? 0 : (root.highlighted ? root.lunge : 0)
        Behavior on x {
            NumberAnimation {
                duration: Theme.durBase
                easing.type: Easing.OutBack
            }
        }
    }
    scale: root.pressed ? 0.97 : 1.0
    Behavior on scale {
        NumberAnimation { duration: Theme.durFast; easing.type: Easing.OutExpo }
    }
    HoverHandler {
        id: hover
        enabled: root.enabled
        cursorShape: Qt.PointingHandCursor
    }
    TapHandler {
        id: tap
        enabled: root.enabled
        onTapped: root.activate()
    }
    Keys.onReturnPressed: event => root.activateFromKey(event)
    Keys.onEnterPressed: event => root.activateFromKey(event)
    Keys.onSpacePressed: event => root.activateFromKey(event)
 }
@@ -0,0 +1,248 @@
 import QtQuick
 import QtQuick.Shapes
 import QtQuick.Effects
 import "root:/config"
 import "root:/components"
 // The base surface for everything in this shell: a leaning, corner-chopped slab
 // with an optional halftone wash and a crimson slash along its leading edge.
 Item {
    id: root
    property color fill: Theme.surface
    property real fillOpacity: 0.94
    property color border: Theme.outline
    property real borderWidth: Theme.stroke
    // Lean of the vertical edges, as a fraction of height. 0 = upright.
    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.
    property real chop: Theme.cut
    property var chopCorners: [1, 3]
    // Crimson slash down the leading edge — the Persona 5 tell.
    property bool slash: false
    property color slashColor: Theme.accent
    property real slashWidth: 4
    // Screen-printed dot wash.
    property bool halftone: false
    property color halftoneColor: Theme.primary
    property real halftoneOpacity: 0.07
    // 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
    // The screen-print stack. A pure-black copy of the silhouette sits behind
    // the fill, offset down-and-right, and the fill carries a black keyline
    // outside its coloured border. Together these are what stop the panel from
    // 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
    // sizes from their own layout (`row.implicitWidth + contentPad * 2`), which
    // keeps the shape maths out of every binding loop.
    default property alias content: contentHolder.data
    readonly property alias contentItem: contentHolder
    property real padding: Theme.padM
    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
            capStyle: ShapePath.FlatCap
            PathPolyline {
                path: Geom.chamfer(root.polygon, root.chop, root.chopCorners)
            }
        }
    }
    // Halftone wash, masked to the panel silhouette.
    Loader {
        anchors.fill: parent
        active: root.halftone
        asynchronous: true
        sourceComponent: 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: silhouette
            }
        }
    }
    // 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: Item {
            Shape {
                id: slashShape
                anchors.fill: parent
                visible: false
                layer.enabled: true
                layer.smooth: true
                preferredRendererType: Shape.CurveRenderer
                ShapePath {
                    fillColor: root.slashColor
                    strokeColor: "transparent"
                    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.vertical ? root.padding : root.contentPad
        anchors.rightMargin: root.vertical ? root.padding : root.contentPad
        anchors.topMargin: root.vertical ? root.contentPad : root.padding
        anchors.bottomMargin: root.vertical ? root.contentPad : root.padding
    }
 }
@@ -0,0 +1,125 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // Leaning slider with a chopped handle. Drag or click anywhere on the rail.
 Item {
    id: root
    property real value: 0        // 0..1
    property color accent: Theme.primary
    property real stepSize: 0.05
    signal moved(real value)
    implicitHeight: 18
    implicitWidth: 200
    focusPolicy: root.enabled ? Qt.StrongFocus : Qt.NoFocus
    readonly property real _lean: Theme.skew * height
    function commit(nextValue: real): void {
        if (!root.enabled)
            return;
        root.moved(Math.max(0, Math.min(1, nextValue)));
    }
    // Rail
    Skew {
        id: rail
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right
        height: root.activeFocus ? 10 : 6
        color: root.activeFocus
            ? Theme.treatmentFocusFill
            : Theme.alpha(root.enabled ? Theme.outline : Theme.treatmentDisabledMark, 0.7)
        borderColor: root.activeFocus ? Theme.treatmentFocusMark : "transparent"
        borderWidth: root.activeFocus ? Theme.stroke : 0
        Behavior on height {
            NumberAnimation { duration: Theme.durFast }
        }
    }
    // Fill
    Skew {
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        width: Math.max(0, Math.min(1, root.value)) * root.width
        height: 6
        color: root.enabled ? root.accent : Theme.treatmentDisabledText
        Behavior on width {
            enabled: !drag.active
            NumberAnimation { duration: Theme.durFast }
        }
        Behavior on color {
            ColorAnimation { duration: Theme.durBase }
        }
    }
    // Handle
    Skew {
        id: handle
        width: 6
        height: root.activeFocus || hover.hovered || drag.active ? 18 : 14
        color: root.enabled ? Theme.text : Theme.treatmentDisabledText
        anchors.verticalCenter: parent.verticalCenter
        x: Math.max(0, Math.min(1, root.value)) * root.width - width / 2
        Behavior on height {
            NumberAnimation { duration: Theme.durFast; easing.type: Easing.OutBack }
        }
        Behavior on x {
            enabled: !drag.active
            NumberAnimation { duration: Theme.durFast }
        }
    }
    HoverHandler {
        id: hover
        enabled: root.enabled
        cursorShape: Qt.PointingHandCursor
    }
    TapHandler {
        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.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
            }
        }
    }
 }
@@ -0,0 +1,262 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 // Hover-driven panel that hangs off a bar item. Opens on a short dwell, stays
 // open while the pointer is over either the trigger or the panel itself, and
 // can be pinned with a click. Slides in from behind the bar with an overshoot.
 PopupWindow {
    id: root
    required property Item anchorItem
    property bool triggerHovered: false
    property bool pinned: false
    property int showDelay: 140
    property int hideDelay: 200
    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.
    readonly property int bleed: 24
    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: 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();
            if (!pinned && !remappingPinned)
                showTimer.restart();
        } else {
            showTimer.stop();
            hideTimer.restart();
        }
    }
    Timer {
        id: showTimer
        interval: root.showDelay
        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
        onTriggered: root.dismiss()
    }
    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) {
            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: {
            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();
            }
        }
    }
    ParallelAnimation {
        id: enterAnim
        NumberAnimation {
            target: contentHolder; property: "opacity"
            to: 1.0; duration: Theme.durBase; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: contentHolder; property: "scale"
            to: 1.0; duration: Theme.durSlow; easing.type: Easing.OutBack
        }
        NumberAnimation {
            target: contentHolder; property: root.slideProperty
            from: root.slideOrigin; to: root.bleed
            duration: Theme.durSlow; easing.type: Easing.OutBack
        }
    }
    ParallelAnimation {
        id: exitAnim
        NumberAnimation {
            target: contentHolder; property: "opacity"
            to: 0.0; duration: Theme.durFast; easing.type: Easing.InQuad
        }
        NumberAnimation {
            target: contentHolder; property: "scale"
            to: 0.96; duration: Theme.durFast; easing.type: Easing.InQuad
        }
        NumberAnimation {
            target: contentHolder; property: root.slideProperty
            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,55 @@
 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
    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,96 @@
 import QtQuick
 import "root:/config"
 // Display text with the wallpaper's RGB split baked in: a crimson and a cyan
 // ghost sitting a pixel off the white body. Drives most headings in the shell.
 Item {
    id: root
    property string text: ""
    property int pixelSize: Theme.fsLarge
    property int weight: Theme.weightDisplay
    property string family: Theme.fontDisplay
    property bool italic: true
    property color color: Theme.text
    property real split: 1.6
    property real splitOpacity: 0.85
    property int elide: Text.ElideNone
    property int horizontalAlignment: Text.AlignLeft
    property real letterSpacing: 0.5
    implicitWidth: body.implicitWidth
    implicitHeight: body.implicitHeight
    Text {
        id: ghostRed
        anchors.fill: parent
        anchors.leftMargin: -root.split
        anchors.topMargin: root.split * 0.4
        text: root.text
        color: Theme.splitRed
        opacity: root.splitOpacity
        elide: root.elide
        horizontalAlignment: root.horizontalAlignment
        verticalAlignment: Text.AlignVCenter
        font.family: root.family
        font.pixelSize: root.pixelSize
        font.weight: root.weight
        font.italic: root.italic
        font.letterSpacing: root.letterSpacing
        renderType: Text.NativeRendering
    }
    Text {
        id: ghostCyan
        anchors.fill: parent
        anchors.leftMargin: root.split
        anchors.topMargin: -root.split * 0.4
        text: root.text
        color: Theme.splitCyan
        opacity: root.splitOpacity
        elide: root.elide
        horizontalAlignment: root.horizontalAlignment
        verticalAlignment: Text.AlignVCenter
        font.family: root.family
        font.pixelSize: root.pixelSize
        font.weight: root.weight
        font.italic: root.italic
        font.letterSpacing: root.letterSpacing
        renderType: Text.NativeRendering
    }
    Text {
        id: body
        anchors.fill: parent
        text: root.text
        color: root.color
        elide: root.elide
        horizontalAlignment: root.horizontalAlignment
        verticalAlignment: Text.AlignVCenter
        font.family: root.family
        font.pixelSize: root.pixelSize
        font.weight: root.weight
        font.italic: root.italic
        font.letterSpacing: root.letterSpacing
        renderType: Text.NativeRendering
    }
    // Kick the ghosts outward briefly — used on track changes, mode flips, etc.
    function glitch() {
        glitchAnim.restart();
    }
    SequentialAnimation {
        id: glitchAnim
        NumberAnimation {
            target: root; property: "split"
            to: 5.5; duration: Theme.durFast
            easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: root; property: "split"
            to: 1.6; duration: Theme.durSlow
            easing.type: Easing.OutBack
        }
    }
 }
@@ -0,0 +1,11 @@
 import QtQuick
 import QtQuick.Effects
 // Layer effect that recolours whatever it is applied to — used to tint the
 // white texture tiles without shipping a copy per colour.
 MultiEffect {
    property color tintColor: "white"
    colorization: 1.0
    colorizationColor: tintColor
 }
@@ -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();
    }
 }
@@ -0,0 +1,200 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 // Takemi palette: crimson, black, white. Nothing else.
 //
 // 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 ink: "#000000"
    readonly property color base: "#0a0a0c"
    readonly property color mantle: "#0d0d10"
    readonly property color surface: "#141418"
    readonly property color surfaceAlt: "#1c1c22"
    readonly property color overlay: "#26262e"
    readonly property color outline: "#3a3a44"
    readonly property color text: "#ffffff"
    readonly property color subtext: "#c8c8ce"
    readonly property color muted: "#6b6b70"
    // ------------------------------------------------------------ THE KNOB
    // The one colour in this shell. Change this line and the entire accent
    // recolours — everything below is derived from it, and nothing else in the
    // 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"
    readonly property color accentDim: Qt.darker(root.accent, 1.9)
    readonly property color accentSoft: Qt.lighter(root.accent, 1.35)
    // `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);
    }
    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 <= 55) return root.text;
        return root.mix(root.text, root.accent, (pct - 55) / 45);
    }
    // ----------------------------------------------------------------- fonts
    readonly property string fontDisplay: "Archivo Black"
    readonly property string fontMono: "JetBrainsMono Nerd Font"
    readonly property string fontIcon: "JetBrainsMono Nerd Font"
    readonly property int weightDisplay: Font.Black
    readonly property int weightBody: Font.Medium
    readonly property int fsMicro: 9
    readonly property int fsSmall: 11
    readonly property int fsBody: 12
    readonly property int fsLarge: 15
    readonly property int fsTitle: 20
    readonly property int fsHuge: 34
    readonly property int fsMega: 92
    // -------------------------------------------------------------- geometry
    readonly property int barHeight: 40
    readonly property int barMargin: 8
    readonly property int barGap: 8
    // 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: 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
    readonly property int padXL: 32
    readonly property int popoutWidth: 380
    readonly property int popoutGap: 10
    // ------------------------------------------------------------ animation
    // P5 motion is snappy and slightly overshooting — never soft.
    readonly property int durFast: 110
    readonly property int durBase: 190
    readonly property int durSlow: 340
    readonly property int durLazy: 620
    readonly property var easeSnap: [0.16, 1.0, 0.3, 1.0, 1, 1]        // outExpo-ish
    readonly property var easeBack: [0.34, 1.56, 0.64, 1.0, 1, 1]      // overshoot
    readonly property var easeIn: [0.55, 0.0, 0.9, 0.35, 1, 1]
    // -------------------------------------------------------------- textures
    readonly property url texHalftone: "root:/assets/halftone.png"
    readonly property url texStripes: "root:/assets/stripes.png"
    readonly property url texScanline: "root:/assets/scanline.png"
    // 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"
 }
@@ -0,0 +1,29 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import "root:/services"
 import "root:/lock"
 // Session lock. Replaces hyprlock; authenticates through the existing
 // /etc/pam.d/hyprlock stack, which is just `auth include login`.
 //
 // The visuals live in LockFace so they can be exercised in an ordinary window
 // (see lockpreview.qml) without locking the session to test a colour.
 WlSessionLock {
    id: lock
    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
        }
    }
 }
@@ -0,0 +1,430 @@
 import QtQuick
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Services.Pam
 import "root:/config"
 import "root:/components"
 import "root:/services"
 import "root:/lock"
 // The lock screen's whole face, kept separate from WlSessionLockSurface so it
 // can be instantiated in an ordinary window for development without actually
 // locking the session.
 Item {
    id: surface
    // Emitted once PAM has accepted the password.
    signal unlocked()
    property string entry: ""
    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
        color: Theme.base
    }
    // ------------------------------------------------------- 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: surface.screenName !== ""
            ? Wallpaper.forMonitor(surface.screenName)
            : Wallpaper.source
        fillMode: Image.PreserveAspectCrop
        asynchronous: false
        cache: true
        layer.enabled: true
        layer.effect: MultiEffect {
            blurEnabled: true
            blur: 0.55
            blurMax: 48
            saturation: -0.15
            brightness: -0.35
        }
    }
    // 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 {
            GradientStop { position: 0.0; color: Theme.alpha(Theme.deep, 0.55) }
            GradientStop { position: 0.6; color: Theme.alpha(Theme.base, 0.75) }
            GradientStop { position: 1.0; color: Theme.alpha(Theme.base, 0.92) }
        }
    }
    // 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
        reveal: 0
        wedgeSpan: 0.30
        wedgeOpacity: 0.30
        stripeOpacity: 0.07
    }
    // ------------------------------------------------------------ clock
    SystemClock {
        id: clock
        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
        anchors.leftMargin: parent.width * 0.1
        anchors.top: parent.top
        anchors.topMargin: parent.height * 0.18
        spacing: -18
        SplitText {
            text: Qt.formatDateTime(clock.date, "HH")
            pixelSize: Theme.fsMega * 1.7
            split: 5
            splitOpacity: 0.85
        }
        SplitText {
            text: Qt.formatDateTime(clock.date, "mm")
            pixelSize: Theme.fsMega * 1.7
            color: Theme.primary
            split: 5
            splitOpacity: 0.6
        }
        Text {
            text: Qt.formatDateTime(clock.date, "dddd, dd MMMM").toUpperCase()
            color: Theme.subtext
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsBody
            font.letterSpacing: 6
            topPadding: 34
            renderType: Text.NativeRendering
        }
    }
    // ------------------------------------------------------ status rail
    Column {
        anchors.right: parent.right
        anchors.rightMargin: parent.width * 0.1
        anchors.top: parent.top
        anchors.topMargin: parent.height * 0.2
        spacing: Theme.padM
        width: Math.min(300, parent.width * 0.28)
        scale: surface.uiScale
        transformOrigin: Item.TopRight
        RailRow {
            width: parent.width
            visible: Battery.available
            glyph: Battery.icon
            label: Math.round(Battery.percent) + "%"
            detail: Battery.timeLabel
            tone: Battery.tint
        }
        RailRow {
            width: parent.width
            glyph: Net.icon
            label: Net.label
            detail: Sys.netUp ? Sys.netIp : "no link"
            tone: Sys.netUp ? Theme.primary : Theme.muted
        }
        RailRow {
            width: parent.width
            visible: Media.hasPlayer
            glyph: Media.playing ? "󰝚" : "󰏤"
            label: Media.title
            detail: Media.artist
            tone: Theme.primary
        }
        RailRow {
            width: parent.width
            visible: Notifs.count > 0
            glyph: "󱅫"
            label: Notifs.count + " notification" + (Notifs.count === 1 ? "" : "s")
            detail: Notifs.history.length > 0 ? Notifs.history[0].summary : ""
            tone: Theme.accent
        }
    }
    // ------------------------------------------------------- auth panel
    Item {
        id: authBlock
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: parent.height * 0.14
        width: Math.min(460, parent.width - Theme.padXL * 2)
        height: 150
        scale: surface.uiScale
        transformOrigin: Item.Bottom
        transform: Translate { id: shakeShift }
        SplitText {
            id: prompt
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            text: surface.failed
                ? (surface.status || "WRONG").toUpperCase()
                : (surface.busy ? "CHECKING…" : "WHO GOES THERE")
            color: surface.failed ? Theme.accent : Theme.text
            pixelSize: Theme.fsTitle
            letterSpacing: 4
            horizontalAlignment: Text.AlignHCenter
            split: surface.failed ? 4 : 1.6
        }
        // Password field: one chopped block per character.
        P5Panel {
            id: field
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: prompt.bottom
            anchors.topMargin: Theme.padL
            width: Math.min(380, authBlock.width - Theme.padL * 2)
            height: 56
            lean: 0.12
            chop: 16
            fill: Theme.mantle
            fillOpacity: 0.94
            border: surface.failed
                ? Theme.accent
                : (input.activeFocus ? Theme.primary : Theme.outline)
            borderWidth: 2
            slash: true
            slashColor: surface.failed ? Theme.accent : Theme.primary
            slashWidth: 6
            halftone: true
            halftoneColor: surface.failed ? Theme.accent : Theme.primary
            halftoneOpacity: 0.08
            Row {
                anchors.centerIn: parent
                spacing: 6
                visible: surface.entry.length > 0
                Repeater {
                    model: Math.min(surface.entry.length, 22)
                    Skew {
                        required property int index
                        width: 10
                        height: 20
                        color: surface.failed ? Theme.accent : Theme.primary
                        // Each new block snaps in.
                        Component.onCompleted: pop.start()
                        NumberAnimation {
                            id: pop
                            target: parent
                            property: "scale"
                            from: 0.2; to: 1
                            duration: Theme.durBase
                            easing.type: Easing.OutBack
                        }
                    }
                }
            }
            Text {
                anchors.centerIn: parent
                visible: surface.entry.length === 0 && !surface.busy
                text: "PASSWORD"
                color: Theme.muted
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsSmall
                font.letterSpacing: 5
                renderType: Text.NativeRendering
            }
            // Busy sweep.
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 6
                width: 60
                height: 3
                color: Theme.primary
                visible: surface.busy
                XAnimator on x {
                    running: surface.busy
                    loops: Animation.Infinite
                    from: 20
                    to: field.width - 80
                    duration: 700
                    easing.type: Easing.InOutQuad
                }
            }
            // The real input, invisible but focused.
            TextInput {
                id: input
                anchors.fill: parent
                opacity: 0
                focus: true
                echoMode: TextInput.Password
                enabled: !surface.busy
                activeFocusOnTab: true
                onTextChanged: {
                    surface.entry = text;
                    if (surface.failed && text.length === 0) surface.failed = false;
                }
                onAccepted: surface.submit()
                Keys.onEscapePressed: {
                    input.text = "";
                    surface.failed = false;
                }
            }
        }
        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: field.bottom
            anchors.topMargin: Theme.padM
            spacing: Theme.padS
            Icon {
                anchors.verticalCenter: parent.verticalCenter
                text: "󰌾"
                color: Theme.muted
                font.pixelSize: Theme.fsBody
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: Quickshell.env("USER") || "USER"
                color: Theme.muted
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsSmall
                font.letterSpacing: 3
                renderType: Text.NativeRendering
            }
        }
    }
    // Keep focus on the field no matter what.
    Timer {
        interval: 250
        running: true
        repeat: true
        onTriggered: if (!input.activeFocus && !surface.busy) input.forceActiveFocus()
    }
    function submit() {
        if (surface.busy || surface.entry.length === 0) return;
        surface.failed = false;
        surface.status = "";
        pam.start();
    }
    PamContext {
        id: pam
        config: "hyprlock"
        user: Quickshell.env("USER") || "USER"
        onPamMessage: {
            if (pam.responseRequired) pam.respond(surface.entry);
            else if (pam.message) surface.status = pam.message;
        }
        onCompleted: result => {
            if (result === PamResult.Success) {
                surface.unlocked();
                input.text = "";
                surface.entry = "";
                surface.failed = false;
            } else {
                surface.failed = true;
                if (surface.status === "") surface.status = "Access denied";
                input.text = "";
                surface.entry = "";
                shake.restart();
            }
        }
        onError: err => {
            surface.failed = true;
            surface.status = "PAM error";
            input.text = "";
            surface.entry = "";
            shake.restart();
        }
    }
    SequentialAnimation {
        id: shake
        loops: 2
        NumberAnimation {
            target: shakeShift; property: "x"
            to: -16; duration: 55; easing.type: Easing.OutQuad
        }
        NumberAnimation {
            target: shakeShift; property: "x"
            to: 16; duration: 55; easing.type: Easing.OutQuad
        }
        NumberAnimation {
            target: shakeShift; property: "x"
            to: 0; duration: 90; easing.type: Easing.OutBack
        }
    }
    // Entry flourish when the lock comes up.
    Component.onCompleted: intro.start()
    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
        }
        NumberAnimation {
            target: authBlock; property: "opacity"
            from: 0; to: 1; duration: Theme.durLazy; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: shakeShift; property: "y"
            from: 40; to: 0; duration: Theme.durLazy; easing.type: Easing.OutBack
        }
    }
 }
@@ -0,0 +1,64 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // One line of the lock screen's status rail.
 Item {
    id: rail
    property string glyph: ""
    property string label: ""
    property string detail: ""
    property color tone: Theme.primary
    implicitHeight: visible ? 38 : 0
    Rectangle {
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: 3
        height: 26
        color: rail.tone
    }
    Row {
        anchors.left: parent.left
        anchors.leftMargin: Theme.padM
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        spacing: Theme.padS
        Icon {
            anchors.verticalCenter: parent.verticalCenter
            text: rail.glyph
            color: rail.tone
            font.pixelSize: Theme.fsLarge
        }
        Column {
            anchors.verticalCenter: parent.verticalCenter
            spacing: -2
            Text {
                text: rail.label
                color: Theme.text
                elide: Text.ElideRight
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsSmall
                font.italic: true
                font.weight: Font.DemiBold
                renderType: Text.NativeRendering
            }
            Text {
                visible: rail.detail !== ""
                text: rail.detail
                color: Theme.muted
                elide: Text.ElideRight
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                renderType: Text.NativeRendering
            }
        }
    }
 }
@@ -0,0 +1,23 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/lock"
 // Development harness: renders the lock screen in an ordinary window so it can
 // be styled and screenshotted without locking the session.
 //
 //   qs -p lockpreview.qml
 //
 // PAM still runs for real here, so a correct password simply closes the window.
 ShellRoot {
    FloatingWindow {
        implicitWidth: 1600
        implicitHeight: 900
        color: Theme.base
        LockFace {
            anchors.fill: parent
            onUnlocked: console.log("PAM accepted — the real lock would release here")
        }
    }
 }
@@ -0,0 +1,199 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Volume / mic / brightness heads-up, bottom centre. Appears on change and
 // fades out on its own.
 PanelWindow {
    id: root
    required property var modelData
    screen: modelData
    readonly property bool primaryScreen: Quickshell.screens.length === 0
        || Quickshell.screens[0] === modelData
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.namespace: "takemi-osd"
    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
    anchors { bottom: true }
    margins.bottom: 90
    implicitWidth: 300
    implicitHeight: 78
    color: "transparent"
    exclusionMode: ExclusionMode.Ignore
    visible: primaryScreen && (shown || fade.running)
    property bool shown: false
    property string kind: "volume"
    // Suppress the burst of change signals that fires while services warm up.
    property bool armed: false
    Timer {
        interval: 1500
        running: true
        onTriggered: root.armed = true
    }
    readonly property string glyph: {
        switch (root.kind) {
        case "mic": return Audio.micIcon;
        case "brightness": return Brightness.icon;
        default: return Audio.icon;
        }
    }
    readonly property string title: {
        switch (root.kind) {
        case "mic": return Audio.micMuted ? "Mic muted" : "Microphone";
        case "brightness": return "Brightness";
        default: return Audio.muted ? "Muted" : "Volume";
        }
    }
    readonly property real level: {
        switch (root.kind) {
        case "mic": return Audio.micMuted ? 0 : Audio.micVolume;
        case "brightness": return Brightness.percent / 100;
        default: return Audio.muted ? 0 : Audio.volume;
        }
    }
    readonly property color tone: {
        switch (root.kind) {
        case "mic": return Audio.micMuted ? Theme.accent : Theme.blue;
        // Turning the screen up is not a warning. White, like volume.
        case "brightness": return Theme.text;
        default: return Audio.muted ? Theme.accent : Theme.primary;
        }
    }
    function flash(k: string) {
        if (!root.armed) return;
        root.kind = k;
        root.shown = true;
        glyphIcon.bump();
        hold.restart();
    }
    Timer {
        id: hold
        interval: 1600
        onTriggered: root.shown = false
    }
    Connections {
        target: Audio
        function onVolumeBumped() { root.flash("volume"); }
        function onMicBumped() { root.flash("mic"); }
    }
    Connections {
        target: Brightness
        function onBumped() { root.flash("brightness"); }
    }
    P5Panel {
        id: panel
        anchors.fill: parent
        anchors.margins: 4
        fill: Theme.mantle
        fillOpacity: 0.97
        border: Theme.alpha(root.tone, 0.85)
        borderWidth: Theme.stroke
        slash: true
        slashColor: root.tone
        slashWidth: 5
        halftone: true
        halftoneColor: root.tone
        halftoneOpacity: 0.08
        sheen: true
        lean: 0.09
        chop: 14
        padding: Theme.padM
        opacity: root.shown ? 1 : 0
        scale: root.shown ? 1 : 0.9
        Behavior on opacity {
            NumberAnimation { id: fade; duration: Theme.durBase }
        }
        Behavior on scale {
            NumberAnimation { duration: Theme.durSlow; easing.type: Easing.OutBack }
        }
        Icon {
            id: glyphIcon
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            text: root.glyph
            color: root.tone
            font.pixelSize: 30
            width: 36
        }
        Column {
            anchors.left: glyphIcon.right
            anchors.leftMargin: Theme.padM
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: 4
            // 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
                }
                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
                    splitOpacity: 0.5
                }
            }
            MeterBar {
                width: parent.width
                height: 10
                segments: 20
                segmentWidth: (width - 19 * 3) / 20
                spacing: 3
                value: root.level * 100
                activeColor: root.tone
            }
        }
    }
 }
@@ -0,0 +1,313 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Full-screen power menu. Crimson stripes sweep in behind a stack of leaning
 // buttons; Escape or a click on the backdrop dismisses it.
 PanelWindow {
    id: root
    required property var modelData
    screen: modelData
    visible: Actions.powerMenuOpen || closeAnim.running
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.namespace: "takemi-power"
    WlrLayershell.keyboardFocus: Actions.powerMenuOpen
        ? WlrKeyboardFocus.Exclusive
        : WlrKeyboardFocus.None
    anchors { top: true; bottom: true; left: true; right: true }
    color: "transparent"
    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();
        }
    }
    // ------------------------------------------------------------- backdrop
    Rectangle {
        id: backdrop
        anchors.fill: parent
        color: Theme.alpha(Theme.base, 0.82)
        opacity: 0
        TapHandler {
            onTapped: Actions.closePowerMenu()
        }
    }
    // Stripes and wedge, shared with the lock screen. The wedge used to lean at
    // 0.32 here, which was its own angle and nothing else's; P5Backdrop leans
    // it at Theme.skew like every other edge in the shell.
    P5Backdrop {
        id: ground
        anchors.fill: parent
        reveal: 0
        stripeOpacity: 0.10
        wedgeOpacity: 0.35
        wedgeSpan: 0.34
        // The live desktop is still visible behind this, so a dot wash would be
        // laid over other people's windows rather than over a ground of our
        // own. The lock owns the halftone; here it just muddies things.
        halftone: false
    }
    // ---------------------------------------------------------------- title
    Column {
        id: title
        anchors.left: parent.left
        anchors.leftMargin: root.width * 0.12
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: -60
        spacing: -14
        opacity: 0
        SplitText {
            text: "TAKE"
            pixelSize: Theme.fsMega
            split: 4
            splitOpacity: 0.9
        }
        SplitText {
            text: "YOUR"
            pixelSize: Theme.fsMega
            color: Theme.accent
            split: 4
            splitOpacity: 0.5
        }
        SplitText {
            text: "TIME."
            pixelSize: Theme.fsMega
            split: 4
            splitOpacity: 0.9
        }
        Text {
            text: "— TAE TAKEMI"
            color: Theme.primary
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsSmall
            font.letterSpacing: 5
            topPadding: 24
            renderType: Text.NativeRendering
        }
    }
    // -------------------------------------------------------------- actions
    Column {
        id: actions
        anchors.right: parent.right
        anchors.rightMargin: root.width * 0.12
        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: root.actionModel
            // A carrier item owns the staggered slide so the button keeps its
            // own hover transform.
            Item {
                id: entry
                required property var modelData
                required property int index
                readonly property int slabWidth: actions.stackWidth
                width: entry.slabWidth
                height: 52
                opacity: 0
                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.
                Connections {
                    target: root
                    function onOpenChanged() {
                        if (root.open) entryAnim.restart();
                        else entry.opacity = 0;
                    }
                }
                SequentialAnimation {
                    id: entryAnim
                    PauseAnimation { duration: 40 + entry.index * 55 }
                    ParallelAnimation {
                        NumberAnimation {
                            target: entry; property: "opacity"
                            to: 1; duration: Theme.durBase
                        }
                        NumberAnimation {
                            target: slide; property: "x"
                            from: 90; to: 0
                            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
                        }
                    }
                }
            }
        }
    }
    // Hint line.
    Text {
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 40
        anchors.horizontalCenter: parent.horizontalCenter
        text: "↑ ↓  SELECT     ENTER  CONFIRM     ESC  CANCEL"
        color: Theme.muted
        font.family: Theme.fontMono
        font.pixelSize: Theme.fsMicro
        font.letterSpacing: 4
        opacity: backdrop.opacity
        renderType: Text.NativeRendering
    }
    function invoke(what: string) {
        Actions.closePowerMenu();
        switch (what) {
        case "lock": Actions.lock(); break;
        case "suspend": Actions.suspend(); break;
        case "hibernate": Actions.hibernate(); break;
        case "logout": Actions.logout(); break;
        case "reboot": Actions.reboot(); break;
        case "shutdown": Actions.shutdown(); break;
        }
    }
    // 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 {
        id: openAnim
        NumberAnimation {
            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: ground; property: "reveal"
            from: 0; to: 1; duration: Theme.durLazy; easing.type: Easing.OutExpo
        }
        NumberAnimation {
            target: title; property: "opacity"
            to: 1; duration: Theme.durSlow
        }
    }
    ParallelAnimation {
        id: closeAnim
        NumberAnimation {
            target: backdrop; property: "opacity"
            to: 0; duration: Theme.durFast
        }
        NumberAnimation {
            target: ground; property: "reveal"
            to: 0; duration: Theme.durFast
        }
        NumberAnimation {
            target: title; property: "opacity"
            to: 0; duration: Theme.durFast
        }
    }
 }
@@ -0,0 +1,160 @@
 import QtQuick
 import Quickshell
 import Quickshell.Wayland
 import Quickshell.Services.Notifications
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Floating notification stack under the bar, top right. Replaces dunst.
 PanelWindow {
    id: root
    required property var modelData
    screen: modelData
    // Only the primary bar screen shows toasts, to avoid duplicates.
    readonly property bool primaryScreen: Quickshell.screens.length === 0
        || Quickshell.screens[0] === modelData
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.namespace: "takemi-toasts"
    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
    anchors { top: true; right: true }
    margins {
        top: Theme.barHeight + Theme.barMargin * 2
        right: Theme.barMargin
    }
    implicitWidth: 400
    implicitHeight: Math.max(1, stack.implicitHeight)
    color: "transparent"
    exclusionMode: ExclusionMode.Ignore
    visible: primaryScreen && stack.children.length > 0
    // Toasts currently on screen, newest first.
    property list<Notification> live: []
    property int maxLive: 5
    Connections {
        target: Notifs
        enabled: root.primaryScreen
        function onPopupRequested(notif) {
            root.live = [notif, ...root.live].slice(0, root.maxLive);
        }
    }
    function retire(notif) {
        const idx = root.live.indexOf(notif);
        if (idx === -1) return;
        const next = root.live.slice();
        next.splice(idx, 1);
        root.live = next;
    }
    Column {
        id: stack
        anchors.right: parent.right
        anchors.top: parent.top
        width: parent.width
        spacing: Theme.padS
        Repeater {
            model: root.live
            Item {
                id: toast
                required property var modelData
                width: stack.width
                height: card.implicitHeight
                NotifCard {
                    id: card
                    width: parent.width
                    notif: toast.modelData
                    onDismissed: {
                        Notifs.dismiss(toast.modelData);
                        root.retire(toast.modelData);
                    }
                }
                // Countdown rule that drains along the bottom edge.
                //
                // 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.bottomMargin: 1
                    x: card.chop
                    height: 2
                    width: toast.fuseSpan
                    lean: card.lean
                    color: Theme.alpha(card.tone, 0.7)
                    visible: life.running
                }
                NumberAnimation {
                    id: life
                    target: fuse
                    property: "width"
                    from: toast.fuseSpan
                    to: 0
                    running: false
                    duration: Notifs.timeoutFor(toast.modelData)
                    easing.type: Easing.Linear
                    onFinished: root.retire(toast.modelData)
                }
                // Slide in from the right, Persona-style.
                opacity: 0
                transform: Translate { id: shove; x: 60 }
                Component.onCompleted: {
                    enter.start();
                    const ms = Notifs.timeoutFor(toast.modelData);
                    if (ms > 0) life.start();
                }
                ParallelAnimation {
                    id: enter
                    NumberAnimation {
                        target: toast; property: "opacity"
                        to: 1; duration: Theme.durBase
                    }
                    NumberAnimation {
                        target: shove; property: "x"
                        from: 60; to: 0
                        duration: Theme.durSlow
                        easing.type: Easing.OutBack
                    }
                }
                // Hovering a toast pauses its fuse.
                HoverHandler {
                    id: toastHover
                    onHoveredChanged: {
                        if (!life.duration) return;
                        if (hovered) life.pause();
                        else if (life.paused) life.resume();
                    }
                }
                TapHandler {
                    acceptedButtons: Qt.LeftButton
                    onTapped: root.retire(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)
    }
 }
@@ -0,0 +1,282 @@
 import QtQuick
 import Quickshell
 import Quickshell.Services.Pipewire
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // 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: 400
    contentHeight: surface.implicitContentHeight + Theme.padM * 2
    initialFocusItem: outputMuteButton
    PopoutSurface {
        id: surface
        anchors.fill: parent
        tone: Theme.primary
        readonly property real implicitContentHeight: header.height + column.implicitHeight + Theme.padM * 2
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "Audio"
            icon: Audio.icon
            accent: Theme.primary
            subtitle: Audio.sinkName
        }
        Column {
            id: column
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: Theme.padM
            // ------------------------------------------------------- output
            AudioOutputHero {
                width: parent.width
            }
            Column {
                width: parent.width
                spacing: Theme.padS
                P5Button {
                    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
            SectionRule {
                width: parent.width
                text: "Input"
            }
            AudioInputBand {
                width: parent.width
            }
            SectionRule {
                width: parent.width
                text: "Outputs"
                visible: Audio.sinks.length > 1
            }
            Repeater {
                model: Audio.sinks.length > 1 ? Audio.sinks : []
                PickRow {
                    required property var modelData
                    width: column.width
                    label: modelData.nickname || modelData.description || modelData.name
                    icon: "󰓃"
                    selected: Audio.sink === modelData
                    onClicked: Audio.setSink(modelData)
                }
            }
            SectionRule {
                width: parent.width
                text: "Applications"
                visible: Audio.streams.length > 0
            }
            Repeater {
                model: Audio.streams
                LevelRow {
                    required property var modelData
                    width: column.width
                    icon: "󰝚"
                    label: Audio.streamName(modelData)
                    readout: modelData.audio ? Math.round(modelData.audio.volume * 100) + "%" : ""
                    value: modelData.audio ? modelData.audio.volume : 0
                    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; }
                }
            }
        }
    }
    // ------------------------------------------------------------- pieces
    component LevelRow: Item {
        id: levelRow
        property string icon: ""
        property string label: ""
        property string readout: ""
        property real value: 0
        property bool muted: false
        property color accent: Theme.primary
        signal moved(real value)
        signal toggled()
        implicitHeight: 42
        Row {
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: Theme.padS
            Icon {
                id: levelIcon
                anchors.verticalCenter: parent.verticalCenter
                text: levelRow.icon
                color: levelRow.muted ? Theme.accent : levelRow.accent
                font.pixelSize: Theme.fsLarge
                TapHandler { onTapped: levelRow.toggled() }
                HoverHandler { cursorShape: Qt.PointingHandCursor }
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                width: levelRow.width - levelIcon.width - readoutText.width - Theme.padS * 3
                text: levelRow.label
                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 {
                id: readoutText
                anchors.verticalCenter: parent.verticalCenter
                text: levelRow.readout
                color: levelRow.muted ? Theme.accent : Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                font.weight: Font.Bold
                renderType: Text.NativeRendering
            }
        }
        P5Slider {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            value: levelRow.value
            accent: levelRow.accent
            enabled: !levelRow.muted
            onMoved: v => levelRow.moved(v)
        }
    }
    component SectionRule: Item {
        property string text: ""
        implicitHeight: visible ? 18 : 0
        Text {
            id: sectionLabel
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            text: parent.text.toUpperCase()
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.letterSpacing: 2
            renderType: Text.NativeRendering
        }
        Rectangle {
            anchors.left: sectionLabel.right
            anchors.leftMargin: Theme.padS
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            height: 1
            color: Theme.alpha(Theme.outline, 0.6)
        }
    }
    component PickRow: Item {
        id: pickRow
        property string label: ""
        property string icon: ""
        property bool selected: false
        signal clicked()
        implicitHeight: 26
        Rectangle {
            anchors.fill: parent
            color: pickHover.hovered
                ? Theme.alpha(Theme.primary, 0.14)
                : (pickRow.selected ? Theme.alpha(Theme.primary, 0.07) : "transparent")
        }
        Rectangle {
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            width: 3
            height: pickRow.selected ? 18 : 0
            color: Theme.accent
            Behavior on height {
                NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
            }
        }
        Row {
            anchors.left: parent.left
            anchors.leftMargin: Theme.padM
            anchors.verticalCenter: parent.verticalCenter
            spacing: Theme.padS
            Icon {
                anchors.verticalCenter: parent.verticalCenter
                text: pickRow.icon
                color: pickRow.selected ? Theme.primary : Theme.muted
                font.pixelSize: Theme.fsBody
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: pickRow.label
                color: pickRow.selected ? Theme.text : Theme.subtext
                font.family: Theme.fontDisplay
                font.pixelSize: Theme.fsSmall
                font.italic: true
                renderType: Text.NativeRendering
            }
        }
        HoverHandler {
            id: pickHover
            cursorShape: Qt.PointingHandCursor
        }
        TapHandler {
            onTapped: pickRow.clicked()
        }
    }
 }
@@ -0,0 +1,143 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Charge level, time estimate, draw rate and health.
 Popout {
    id: root
    contentWidth: 310
    // 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
        tone: Battery.tint
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "Power"
            icon: Battery.icon
            accent: Battery.tint
            subtitle: Battery.charging ? "CHARGING" : (Battery.onBattery ? "ON BATTERY" : "AC")
        }
        // 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
            height: Math.max(charge.height, detail.height)
            Column {
                id: charge
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                // No "CHARGE" caption under the number. It landed directly on
                // 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
                    splitOpacity: 0.55
                }
                Text {
                    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
                    renderType: Text.NativeRendering
                }
                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
                    renderType: Text.NativeRendering
                }
            }
        }
        MeterBar {
            id: bar
            anchors.top: readout.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
            height: 12
            segments: 20
            segmentWidth: (width - 19 * 3) / 20
            spacing: 3
            value: Battery.percent
            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.top: detailText.bottom
            anchors.topMargin: Theme.padL
            anchors.left: parent.left
            text: "Suspend"
            icon: "󰤄"
            onClicked: {
                root.pinned = false;
                Actions.suspend();
            }
        }
    }
 }
@@ -0,0 +1,192 @@
 import QtQuick
 import Quickshell
 import Quickshell.Bluetooth
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Adapter toggle, scan, and the device list with battery levels where BlueZ
 // reports them.
 Popout {
    id: root
    contentWidth: 340
    contentHeight: 280
    // Discovery is expensive; run it only while the panel is open.
    onShownChanged: {
        if (!shown && Bt.discovering && Bt.adapter) Bt.adapter.discovering = false;
    }
    PopoutSurface {
        anchors.fill: parent
        tone: Bt.enabled ? Theme.blue : Theme.muted
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "Bluetooth"
            icon: Bt.icon
            accent: Theme.blue
            subtitle: Bt.adapter ? Bt.adapter.name : "NO ADAPTER"
        }
        Row {
            id: controls
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            spacing: Theme.padS
            P5Button {
                text: Bt.enabled ? "On" : "Off"
                icon: Bt.enabled ? "󰂯" : "󰂲"
                accent: Bt.enabled ? Theme.blue : Theme.muted
                onClicked: Bt.toggle()
            }
            P5Button {
                text: Bt.discovering ? "Scanning" : "Scan"
                icon: "󰐷"
                accent: Bt.discovering ? Theme.accent : Theme.primary
                onClicked: Bt.toggleScan()
            }
        }
        Text {
            id: listLabel
            anchors.top: controls.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            text: Bt.devices.length > 0 ? "DEVICES" : "NO DEVICES"
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.letterSpacing: 2
            renderType: Text.NativeRendering
        }
        ListView {
            anchors.top: listLabel.bottom
            anchors.topMargin: Theme.padS
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            clip: true
            spacing: 2
            model: Bt.devices
            delegate: Item {
                id: devRow
                required property BluetoothDevice modelData
                width: ListView.view.width
                height: 34
                Rectangle {
                    anchors.fill: parent
                    color: devHover.hovered
                        ? Theme.alpha(Theme.blue, 0.16)
                        : (devRow.modelData.connected ? Theme.alpha(Theme.blue, 0.08) : "transparent")
                }
                Rectangle {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    width: 3
                    height: devRow.modelData.connected ? 22 : 0
                    color: Theme.accent
                    Behavior on height {
                        NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
                    }
                }
                Row {
                    anchors.left: parent.left
                    anchors.leftMargin: Theme.padM
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: Theme.padS
                    Icon {
                        anchors.verticalCenter: parent.verticalCenter
                        text: Bt.deviceIcon(devRow.modelData)
                        color: devRow.modelData.connected ? Theme.blue : Theme.subtext
                        font.pixelSize: Theme.fsLarge
                    }
                    Column {
                        anchors.verticalCenter: parent.verticalCenter
                        spacing: -2
                        Text {
                            text: Bt.deviceLabel(devRow.modelData)
                            color: devRow.modelData.connected ? Theme.text : Theme.subtext
                            font.family: Theme.fontDisplay
                            font.pixelSize: Theme.fsSmall
                            font.italic: true
                            font.weight: devRow.modelData.connected ? Font.Black : Font.Medium
                            renderType: Text.NativeRendering
                        }
                        Text {
                            text: {
                                if (devRow.modelData.pairing) return "pairing…";
                                if (devRow.modelData.connected) return "connected";
                                if (devRow.modelData.paired || devRow.modelData.bonded) return "paired";
                                return devRow.modelData.address;
                            }
                            color: Theme.muted
                            font.family: Theme.fontMono
                            font.pixelSize: 8
                            renderType: Text.NativeRendering
                        }
                    }
                }
                // Device battery, where BlueZ exposes it.
                Row {
                    anchors.right: parent.right
                    anchors.rightMargin: Theme.padS
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 3
                    visible: devRow.modelData.batteryAvailable
                    Icon {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "󰥉"
                        color: devRow.modelData.battery > 0.25 ? Theme.ok : Theme.warn
                        font.pixelSize: Theme.fsSmall
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: Math.round(devRow.modelData.battery * 100) + "%"
                        color: Theme.subtext
                        font.family: Theme.fontMono
                        font.pixelSize: Theme.fsMicro
                        renderType: Text.NativeRendering
                    }
                }
                HoverHandler {
                    id: devHover
                    cursorShape: Qt.PointingHandCursor
                }
                TapHandler {
                    acceptedButtons: Qt.LeftButton
                    onTapped: Bt.toggleDevice(devRow.modelData)
                }
                TapHandler {
                    acceptedButtons: Qt.RightButton
                    onTapped: if (devRow.modelData.paired) devRow.modelData.forget()
                }
            }
        }
    }
 }
@@ -0,0 +1,250 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Month grid with the current day slashed in crimson, plus uptime and a couple
 // of world clocks.
 Popout {
    id: root
    property date clockDate: new Date()
    contentWidth: 320
    contentHeight: 352
    // Month currently on display, as an offset from the real one.
    property int monthOffset: 0
    onShownChanged: if (!shown) monthOffset = 0
    readonly property date viewDate: {
        const d = new Date(root.clockDate);
        d.setDate(1);
        d.setMonth(d.getMonth() + root.monthOffset);
        return d;
    }
    readonly property int viewYear: viewDate.getFullYear()
    readonly property int viewMonth: viewDate.getMonth()
    // Monday-first grid, 6 rows of 7.
    readonly property var cells: {
        const first = new Date(root.viewYear, root.viewMonth, 1);
        const lead = (first.getDay() + 6) % 7;
        const start = new Date(root.viewYear, root.viewMonth, 1 - lead);
        const out = [];
        for (let i = 0; i < 42; i++) {
            const d = new Date(start);
            d.setDate(start.getDate() + i);
            out.push({
                day: d.getDate(),
                inMonth: d.getMonth() === root.viewMonth,
                today: d.toDateString() === root.clockDate.toDateString()
            });
        }
        return out;
    }
    PopoutSurface {
        anchors.fill: parent
        tone: Theme.accent
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: Qt.formatDateTime(root.viewDate, "MMMM")
            icon: "󰃭"
            accent: Theme.accent
            subtitle: Qt.formatDateTime(root.viewDate, "yyyy")
        }
        // Month stepper.
        Row {
            anchors.top: header.bottom
            anchors.topMargin: Theme.padS
            anchors.right: parent.right
            spacing: Theme.padS
            z: 2
            StepButton {
                glyph: "󰅁"
                onClicked: root.monthOffset--
            }
            StepButton {
                glyph: "󰅂"
                onClicked: root.monthOffset++
            }
        }
        // Weekday header, clear of the month stepper above it.
        Row {
            id: dayNames
            anchors.top: header.bottom
            anchors.topMargin: 36
            anchors.left: parent.left
            anchors.right: parent.right
            Repeater {
                model: ["MO", "TU", "WE", "TH", "FR", "SA", "SU"]
                Text {
                    required property var modelData
                    required property int index
                    width: dayNames.width / 7
                    horizontalAlignment: Text.AlignHCenter
                    text: modelData
                    color: index >= 5 ? Theme.alpha(Theme.accent, 0.8) : Theme.muted
                    font.family: Theme.fontMono
                    font.pixelSize: 8
                    font.letterSpacing: 1
                    renderType: Text.NativeRendering
                }
            }
        }
        Grid {
            id: grid
            anchors.top: dayNames.bottom
            anchors.topMargin: Theme.padS
            anchors.left: parent.left
            anchors.right: parent.right
            columns: 7
            Repeater {
                model: root.cells
                Item {
                    id: cell
                    required property var modelData
                    width: grid.width / 7
                    height: 30
                    // Today gets a leaning crimson slab.
                    Skew {
                        anchors.centerIn: parent
                        width: 26
                        height: 24
                        visible: cell.modelData.today
                        color: Theme.accent
                    }
                    Text {
                        anchors.centerIn: parent
                        text: cell.modelData.day
                        color: {
                            if (cell.modelData.today) return Theme.text;
                            if (!cell.modelData.inMonth) return Theme.alpha(Theme.muted, 0.45);
                            return Theme.subtext;
                        }
                        font.family: Theme.fontDisplay
                        font.pixelSize: Theme.fsSmall
                        font.italic: true
                        font.weight: cell.modelData.today ? Font.Black : Font.Medium
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
        // Footer: uptime and a second time zone.
        Row {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            Column {
                width: parent.width / 2
                spacing: -2
                Text {
                    text: "UPTIME"
                    color: Theme.muted
                    font.family: Theme.fontMono
                    font.pixelSize: 8
                    font.letterSpacing: 1.5
                    renderType: Text.NativeRendering
                }
                Text {
                    text: Sys.uptime
                    color: Theme.text
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsSmall
                    font.weight: Font.DemiBold
                    renderType: Text.NativeRendering
                }
            }
            Column {
                width: parent.width / 2
                spacing: -2
                Text {
                    anchors.right: parent.right
                    text: "TOKYO"
                    color: Theme.muted
                    font.family: Theme.fontMono
                    font.pixelSize: 8
                    font.letterSpacing: 1.5
                    renderType: Text.NativeRendering
                }
                Text {
                    anchors.right: parent.right
                    text: {
                        // Tokyo is UTC+9 year-round.
                        const utc = root.clockDate.getTime()
                            + root.clockDate.getTimezoneOffset() * 60000;
                        const tokyo = new Date(utc + 9 * 3600000);
                        return Qt.formatDateTime(tokyo, "HH:mm");
                    }
                    color: Theme.primary
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsSmall
                    font.weight: Font.DemiBold
                    renderType: Text.NativeRendering
                }
            }
        }
    }
    component StepButton: Item {
        id: step
        property string glyph: ""
        signal clicked()
        implicitWidth: 22
        implicitHeight: 22
        Skew {
            anchors.fill: parent
            color: stepHover.hovered ? Theme.alpha(Theme.accent, 0.25) : "transparent"
            borderWidth: 1
            borderColor: Theme.alpha(Theme.outline, 0.7)
        }
        Icon {
            anchors.centerIn: parent
            text: step.glyph
            color: stepHover.hovered ? Theme.text : Theme.subtext
            font.pixelSize: Theme.fsBody
        }
        HoverHandler {
            id: stepHover
            cursorShape: Qt.PointingHandCursor
        }
        TapHandler {
            onTapped: step.clicked()
        }
    }
 }
@@ -0,0 +1,384 @@
 import QtQuick
 import QtQuick.Shapes
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Full player: cover art, transport, seek bar, and a picker when more than one
 // player is running.
 Popout {
    id: root
    contentWidth: 400
    // 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
        anchors.fill: parent
        tone: Theme.primary
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "Now Playing"
            icon: Media.sourceIcon
            subtitle: Media.identity
        }
        // Cover art, chopped.
        Item {
            id: artFrame
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            width: 108
            height: 108
            Shape {
                id: artMask
                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"
                    strokeColor: "transparent"
                    PathPolyline {
                        path: Geom.chamfer(Geom.parallelogram(108, 108, 0.1), 18, [1, 3])
                    }
                }
            }
            Image {
                id: art
                anchors.fill: parent
                source: Media.artUrl
                fillMode: Image.PreserveAspectCrop
                asynchronous: true
                cache: true
                visible: status === Image.Ready
                layer.enabled: true
                layer.smooth: true
                layer.effect: MaskedArt { maskItem: artMask }
            }
            // Placeholder when the player exposes no artwork.
            Shape {
                anchors.fill: parent
                visible: art.status !== Image.Ready
                preferredRendererType: Shape.CurveRenderer
                ShapePath {
                    fillColor: Theme.surface
                    strokeColor: Theme.alpha(Theme.primary, 0.5)
                    strokeWidth: 2
                    PathPolyline {
                        path: Geom.chamfer(Geom.parallelogram(108, 108, 0.1), 18, [1, 3])
                    }
                }
            }
            Icon {
                anchors.centerIn: parent
                visible: art.status !== Image.Ready
                text: Media.sourceIcon
                font.pixelSize: 42
                color: Theme.alpha(Theme.primary, 0.7)
            }
            // Spinning rule around the art while playing.
            Rectangle {
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                width: 30
                height: 3
                color: Theme.accent
                visible: Media.playing
            }
        }
        Column {
            id: info
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: artFrame.right
            anchors.leftMargin: Theme.padM
            anchors.right: parent.right
            spacing: 2
            Marquee {
                width: parent.width
                height: 24
                text: Media.title || "Nothing playing"
                color: Theme.text
                pixelSize: Theme.fsLarge
                family: Theme.fontDisplay
                weight: Font.Black
                italic: true
            }
            Marquee {
                width: parent.width
                height: 16
                text: Media.artist
                color: Theme.primary
                pixelSize: Theme.fsSmall
                family: Theme.fontDisplay
                italic: true
                weight: Font.DemiBold
            }
            Marquee {
                width: parent.width
                height: 14
                text: Media.album
                color: Theme.muted
                pixelSize: Theme.fsMicro
                family: Theme.fontMono
            }
            Item { width: 1; height: Theme.padS }
            // Transport
            Row {
                spacing: Theme.padM
                TransportButton {
                    glyph: "󰒮"
                    enabled: Media.canGoPrevious
                    onClicked: Media.previous()
                }
                TransportButton {
                    glyph: Media.playing ? "󰏤" : "󰐊"
                    primary: true
                    enabled: Media.hasPlayer
                    onClicked: Media.playPause()
                }
                TransportButton {
                    glyph: "󰒭"
                    enabled: Media.canGoNext
                    onClicked: Media.next()
                }
                TransportButton {
                    glyph: "󰐒"
                    enabled: Media.hasPlayer
                    onClicked: Media.raise()
                }
            }
        }
        // Seek bar across the bottom.
        Item {
            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: picker.visible ? Theme.padS : Theme.padM
            height: 26
            visible: Media.hasPlayer
            Text {
                id: elapsed
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                text: Media.positionSupported ? Media.timeString(Media.position) : "--:--"
                color: Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                renderType: Text.NativeRendering
            }
            Text {
                id: total
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                text: Media.lengthSupported ? Media.timeString(Media.length) : "LIVE"
                color: Theme.subtext
                font.family: Theme.fontMono
                font.pixelSize: Theme.fsMicro
                renderType: Text.NativeRendering
            }
            P5Slider {
                anchors.left: elapsed.right
                anchors.right: total.left
                anchors.leftMargin: Theme.padS
                anchors.rightMargin: Theme.padS
                anchors.verticalCenter: parent.verticalCenter
                value: Media.progress
                accent: Theme.accent
                enabled: Media.canSeek
                onMoved: v => Media.seekTo(v)
            }
        }
        // Player picker, only when it matters.
        Row {
            id: picker
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            spacing: Theme.padS
            visible: Media.players.length > 1
            Repeater {
                model: Media.players
                FocusScope {
                    id: chip
                    required property var modelData
                    readonly property bool current: Media.active === modelData
                    implicitWidth: chipLabel.implicitWidth + Theme.padM
                    implicitHeight: 22
                    focusPolicy: chip.enabled ? Qt.TabFocus : Qt.NoFocus
                    function activate(): void {
                        if (chip.enabled)
                            Media.select(chip.modelData);
                    }
                    function activateFromKey(event): void {
                        if (!event.isAutoRepeat)
                            chip.activate();
                    }
                    Skew {
                        anchors.fill: parent
                        color: !chip.enabled
                            ? Theme.treatmentDisabledFill
                            : (chip.activeFocus
                            ? Theme.treatmentFocusFill
                            : (chip.current
                                ? Theme.alpha(Theme.primary, 0.22)
                                : (chipHover.hovered ? Theme.alpha(Theme.primary, 0.1) : "transparent")))
                        borderWidth: chip.activeFocus ? Theme.stroke : 1
                        borderColor: !chip.enabled
                            ? Theme.treatmentDisabledMark
                            : (chip.activeFocus
                            ? Theme.treatmentFocusMark
                            : (chip.current ? Theme.primary : Theme.alpha(Theme.outline, 0.7)))
                    }
                    Text {
                        id: chipLabel
                        anchors.centerIn: parent
                        text: chip.modelData.identity
                        color: !chip.enabled
                            ? Theme.treatmentDisabledText
                            : (chip.activeFocus
                            ? Theme.treatmentFocusText
                            : (chip.current ? Theme.text : Theme.muted))
                        font.family: Theme.fontMono
                        font.pixelSize: Theme.fsMicro
                        renderType: Text.NativeRendering
                    }
                    HoverHandler {
                        id: chipHover
                        enabled: chip.enabled
                        cursorShape: Qt.PointingHandCursor
                    }
                    TapHandler {
                        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: FocusScope {
        id: tb
        property string glyph: ""
        property bool primary: false
        signal clicked()
        implicitWidth: primary ? 38 : 30
        implicitHeight: primary ? 38 : 30
        focusPolicy: tb.enabled ? Qt.TabFocus : Qt.NoFocus
        function activate(): void {
            if (tb.enabled)
                tb.clicked();
        }
        function activateFromKey(event): void {
            if (!event.isAutoRepeat)
                tb.activate();
        }
        Skew {
            anchors.fill: parent
            color: {
                if (!tb.enabled) return "transparent";
                if (tb.activeFocus) return Theme.treatmentFocusFill;
                if (tbHover.hovered) return tb.primary ? Theme.accent : Theme.alpha(Theme.primary, 0.22);
                return tb.primary ? Theme.alpha(Theme.primary, 0.18) : "transparent";
            }
            borderWidth: tb.activeFocus ? Theme.stroke * 2 : (tb.primary ? 2 : 1)
            borderColor: tb.enabled
                ? (tb.activeFocus
                    ? Theme.treatmentFocusMark
                    : (tbHover.hovered ? Theme.text : Theme.alpha(Theme.primary, 0.6)))
                : Theme.alpha(Theme.outline, 0.4)
            Behavior on color {
                ColorAnimation { duration: Theme.durFast }
            }
        }
        Icon {
            anchors.centerIn: parent
            text: tb.glyph
            font.pixelSize: tb.primary ? Theme.fsTitle : Theme.fsLarge
            color: {
                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.enabled ? 1.12 : 1.0
        Behavior on scale {
            NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
        }
        HoverHandler {
            id: tbHover
            enabled: tb.enabled
            cursorShape: Qt.PointingHandCursor
        }
        TapHandler {
            enabled: tb.enabled
            onTapped: tb.activate()
        }
        Keys.onReturnPressed: event => tb.activateFromKey(event)
        Keys.onEnterPressed: event => tb.activateFromKey(event)
        Keys.onSpacePressed: event => tb.activateFromKey(event)
    }
 }
@@ -0,0 +1,247 @@
 import QtQuick
 import Quickshell
 import Quickshell.Networking
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Link state, throughput, and the Wi-Fi picker.
 Popout {
    id: root
    contentWidth: 360
    contentHeight: 300
    // Scan only while the popout is actually on screen.
    onShownChanged: Net.setScanning(shown)
    PopoutSurface {
        anchors.fill: parent
        tone: Sys.netUp ? Theme.primary : Theme.muted
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "Network"
            icon: Net.icon
            subtitle: Sys.netUp ? Sys.netIp : "OFFLINE"
        }
        // Throughput
        Row {
            id: rates
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: Theme.padM
            RateBlock {
                width: (parent.width - Theme.padM) / 2
                glyph: "󰇚"
                label: "Down"
                value: Sys.rate(Sys.netRx)
                tone: Theme.primary
            }
            RateBlock {
                width: (parent.width - Theme.padM) / 2
                glyph: "󰕒"
                label: "Up"
                value: Sys.rate(Sys.netTx)
                tone: Theme.accent
            }
        }
        Row {
            id: controls
            anchors.top: rates.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            spacing: Theme.padS
            P5Button {
                text: Net.wifiEnabled ? "Wi-Fi On" : "Wi-Fi Off"
                icon: Net.wifiEnabled ? "󰖩" : "󰖪"
                accent: Net.wifiEnabled ? Theme.primary : Theme.muted
                onClicked: Net.toggleWifi()
            }
            P5Button {
                text: "Settings"
                icon: "󰒓"
                onClicked: Actions.openNetworkSettings()
            }
        }
        Text {
            id: apsLabel
            anchors.top: controls.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            text: Net.scanning ? "SCANNING…" : "NETWORKS"
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.letterSpacing: 2
            renderType: Text.NativeRendering
        }
        ListView {
            anchors.top: apsLabel.bottom
            anchors.topMargin: Theme.padS
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            clip: true
            spacing: 2
            model: Net.wifiNetworks
            delegate: Item {
                id: apRow
                required property var modelData
                width: ListView.view.width
                height: 30
                Rectangle {
                    anchors.fill: parent
                    color: apHover.hovered
                        ? Theme.alpha(Theme.primary, 0.14)
                        : (apRow.modelData.connected ? Theme.alpha(Theme.primary, 0.07) : "transparent")
                }
                Rectangle {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    width: 3
                    height: apRow.modelData.connected ? 20 : 0
                    color: Theme.accent
                    Behavior on height {
                        NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
                    }
                }
                Row {
                    anchors.left: parent.left
                    anchors.leftMargin: Theme.padM
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: Theme.padS
                    Icon {
                        anchors.verticalCenter: parent.verticalCenter
                        text: Net.signalIcon(apRow.modelData.signalStrength ?? 0)
                        color: apRow.modelData.connected ? Theme.primary : Theme.subtext
                        font.pixelSize: Theme.fsBody
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: apRow.modelData.name
                        color: apRow.modelData.connected ? Theme.text : Theme.subtext
                        font.family: Theme.fontDisplay
                        font.pixelSize: Theme.fsSmall
                        font.italic: true
                        font.weight: apRow.modelData.connected ? Font.Black : Font.Medium
                        renderType: Text.NativeRendering
                    }
                    Icon {
                        anchors.verticalCenter: parent.verticalCenter
                        visible: Net.secured(apRow.modelData)
                        text: "󰌾"
                        color: Theme.muted
                        font.pixelSize: Theme.fsMicro
                    }
                }
                Text {
                    anchors.right: parent.right
                    anchors.rightMargin: Theme.padS
                    anchors.verticalCenter: parent.verticalCenter
                    text: apRow.modelData.known ? "SAVED" : ""
                    color: Theme.muted
                    font.family: Theme.fontMono
                    font.pixelSize: 8
                    font.letterSpacing: 1
                    renderType: Text.NativeRendering
                }
                HoverHandler {
                    id: apHover
                    cursorShape: Qt.PointingHandCursor
                }
                TapHandler {
                    onTapped: {
                        if (apRow.modelData.connected) {
                            apRow.modelData.disconnect();
                        } else {
                            // Saved networks connect directly; new secured ones
                            // need a passphrase, which NetworkManager's own
                            // agent will prompt for.
                            apRow.modelData.connect();
                        }
                    }
                }
            }
        }
    }
    component RateBlock: Item {
        id: rateBlock
        property string glyph: ""
        property string label: ""
        property string value: ""
        property color tone: Theme.primary
        implicitHeight: 40
        Skew {
            anchors.fill: parent
            color: Theme.alpha(rateBlock.tone, 0.08)
            borderWidth: 1
            borderColor: Theme.alpha(rateBlock.tone, 0.35)
        }
        Row {
            anchors.centerIn: parent
            spacing: Theme.padS
            Icon {
                anchors.verticalCenter: parent.verticalCenter
                text: rateBlock.glyph
                color: rateBlock.tone
                font.pixelSize: Theme.fsLarge
            }
            Column {
                anchors.verticalCenter: parent.verticalCenter
                spacing: -1
                Text {
                    text: rateBlock.label.toUpperCase()
                    color: Theme.muted
                    font.family: Theme.fontMono
                    font.pixelSize: 8
                    font.letterSpacing: 1.5
                    renderType: Text.NativeRendering
                }
                Text {
                    text: rateBlock.value
                    color: Theme.text
                    font.family: Theme.fontMono
                    font.pixelSize: Theme.fsSmall
                    font.weight: Font.DemiBold
                    renderType: Text.NativeRendering
                }
            }
        }
    }
 }
@@ -0,0 +1,113 @@
 import QtQuick
 import Quickshell
 import Quickshell.Services.Notifications
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // Notification history and the do-not-disturb switch.
 Popout {
    id: root
    contentWidth: 400
    contentHeight: 380
    PopoutSurface {
        anchors.fill: parent
        tone: Notifs.dnd ? Theme.muted : Theme.primary
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "Notifications"
            icon: Notifs.icon
            accent: Notifs.dnd ? Theme.muted : Theme.primary
            subtitle: Notifs.count + " HELD"
        }
        Row {
            id: controls
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            spacing: Theme.padS
            P5Button {
                text: Notifs.dnd ? "Silenced" : "Silence"
                icon: Notifs.dnd ? "󰂛" : "󰂚"
                accent: Notifs.dnd ? Theme.accent : Theme.primary
                onClicked: Notifs.toggleDnd()
            }
            P5Button {
                text: "Clear"
                icon: "󰎟"
                destructive: true
                onClicked: Notifs.clearAll()
            }
        }
        Text {
            anchors.centerIn: parent
            visible: Notifs.count === 0
            text: "NOTHING TO REPORT"
            color: Theme.muted
            font.family: Theme.fontDisplay
            font.pixelSize: Theme.fsBody
            font.italic: true
            font.weight: Font.Black
            font.letterSpacing: 3
            renderType: Text.NativeRendering
        }
        ListView {
            anchors.top: controls.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            clip: true
            spacing: Theme.padS
            model: Notifs.history
            delegate: NotifCard {
                required property var modelData
                width: ListView.view.width
                notif: modelData
                onDismissed: Notifs.dismiss(modelData)
            }
            add: Transition {
                NumberAnimation {
                    properties: "x"
                    from: 40
                    duration: Theme.durSlow
                    easing.type: Easing.OutBack
                }
                NumberAnimation {
                    property: "opacity"
                    from: 0; to: 1
                    duration: Theme.durBase
                }
            }
            remove: Transition {
                NumberAnimation {
                    property: "opacity"
                    to: 0
                    duration: Theme.durFast
                }
            }
            displaced: Transition {
                NumberAnimation {
                    properties: "y"
                    duration: Theme.durBase
                    easing.type: Easing.OutExpo
                }
            }
        }
    }
 }
@@ -0,0 +1,70 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // Title bar for a popout: glyph, split-ink heading, right-aligned status text,
 // and a crimson rule with a chopped tail.
 Item {
    id: root
    property string title: ""
    property string subtitle: ""
    property string icon: ""
    property color accent: Theme.primary
    implicitHeight: 34
    Row {
        anchors.left: parent.left
        anchors.top: parent.top
        spacing: Theme.padS
        Icon {
            anchors.verticalCenter: parent.verticalCenter
            visible: root.icon !== ""
            text: root.icon
            color: root.accent
            font.pixelSize: Theme.fsTitle
        }
        SplitText {
            anchors.verticalCenter: parent.verticalCenter
            text: root.title.toUpperCase()
            pixelSize: Theme.fsLarge
            letterSpacing: 1.5
            split: 1.3
            splitOpacity: 0.7
        }
    }
    Text {
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 6
        visible: root.subtitle !== ""
        text: root.subtitle
        color: Theme.muted
        font.family: Theme.fontMono
        font.pixelSize: Theme.fsMicro
        font.letterSpacing: 1
        renderType: Text.NativeRendering
    }
    Rectangle {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.rightMargin: 22
        height: 2
        color: Theme.alpha(root.accent, 0.8)
    }
    Skew {
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        width: 16
        height: 2
        color: Theme.accent
        lean: 1.4
    }
 }
@@ -0,0 +1,25 @@
 import QtQuick
 import "root:/config"
 import "root:/components"
 // The slab every popout sits on. Pure preset — it declares no children of its
 // 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: textured
    halftoneColor: tone
    halftoneOpacity: 0.06
    sheen: true
    slash: true
    slashColor: tone
    slashWidth: 5
    lean: 0.06
    chop: 16
    padding: Theme.padM
 }
@@ -0,0 +1,149 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/components"
 import "root:/services"
 // The resource dashboard: four gauges, then the details that do not fit on one.
 Popout {
    id: root
    contentWidth: 420
    // 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
        tone: Theme.heat(Math.max(Sys.cpuUsage, Sys.memPercent))
        PopoutHeader {
            id: header
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            title: "System"
            icon: "󰍛"
            accent: Theme.primary
            subtitle: "UP " + Sys.uptime + "  ·  " + Sys.procs + " PROCS"
        }
        Column {
            id: gauges
            anchors.top: header.bottom
            anchors.topMargin: Theme.padM
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: Theme.padM
            MetricRow {
                width: parent.width
                value: Sys.cpuUsage
                label: "CPU"
                sub: Math.round(Sys.cpuTemp) + "°C"
            }
            MetricRow {
                width: parent.width
                value: Sys.memPercent
                label: "MEM"
                sub: Sys.gb(Sys.memUsed) + " / " + Sys.gb(Sys.memTotal)
            }
            MetricRow {
                width: parent.width
                visible: Sys.gpuAvailable
                value: Sys.gpuUsage
                label: "GPU"
                sub: Math.round(Sys.gpuTemp) + "°C"
            }
            MetricRow {
                width: parent.width
                value: Sys.diskPercent
                label: "DISK"
                sub: Sys.diskFree + " free"
            }
        }
        Column {
            id: details
            anchors.top: gauges.bottom
            anchors.topMargin: Theme.padL
            anchors.left: parent.left
            anchors.right: parent.right
            spacing: 3
            InfoRow {
                width: parent.width
                key: "Processor"
                value: Sys.cpuModel
            }
            InfoRow {
                width: parent.width
                key: "Load"
                value: Sys.load1.toFixed(2) + "  " + Sys.load5.toFixed(2) + "  " + Sys.load15.toFixed(2)
            }
            InfoRow {
                width: parent.width
                visible: Sys.gpuAvailable
                key: "VRAM"
                value: Sys.gb(Sys.gpuVramUsed) + " / " + Sys.gb(Sys.gpuVramTotal)
            }
            InfoRow {
                width: parent.width
                key: "Root"
                value: Sys.gb(Sys.diskUsed) + " of " + Sys.gb(Sys.diskTotal) + " used"
            }
            InfoRow {
                width: parent.width
                key: "Network"
                value: Sys.netUp
                    ? Sys.netInterface + "  ↓ " + Sys.rate(Sys.netRx) + "  ↑ " + Sys.rate(Sys.netTx)
                    : "offline"
            }
        }
    }
    component InfoRow: Item {
        id: infoRow
        property string key: ""
        property string value: ""
        implicitHeight: visible ? 17 : 0
        Text {
            id: keyLabel
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            text: infoRow.key.toUpperCase()
            color: Theme.muted
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            font.letterSpacing: 1.5
            renderType: Text.NativeRendering
        }
        Text {
            anchors.right: parent.right
            anchors.left: keyLabel.right
            anchors.leftMargin: Theme.padM
            anchors.verticalCenter: parent.verticalCenter
            text: infoRow.value
            horizontalAlignment: Text.AlignRight
            elide: Text.ElideRight
            color: Theme.subtext
            font.family: Theme.fontMono
            font.pixelSize: Theme.fsMicro
            renderType: Text.NativeRendering
        }
    }
 }
@@ -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 = "";
                    }
                }
            }
        }
    }
 }
@@ -0,0 +1,69 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import "root:/services"
 // Shell-wide UI state and the handful of external commands the shell fires.
 // Also exposes an IPC surface so Hyprland keybinds can drive the same actions
 // (`qs ipc call shell lock`, `qs ipc call shell power`, ...).
 Singleton {
    id: root
    // ------------------------------------------------------------- UI state
    property bool powerMenuOpen: false
    property bool lockRequested: false
    property bool sidebarOpen: false
    signal osdRequested(string kind)
    function togglePowerMenu() { root.powerMenuOpen = !root.powerMenuOpen; }
    function closePowerMenu() { root.powerMenuOpen = false; }
    function lock() { root.powerMenuOpen = false; root.lockRequested = true; }
    // ------------------------------------------------------------- commands
    // Each slot gets its own Process so a slow one cannot cancel another.
    Process { id: slotA }
    Process { id: slotB }
    Process { id: slotC }
    property int _slot: 0
    function run(argv: var) {
        const slots = [slotA, slotB, slotC];
        const p = slots[root._slot % slots.length];
        root._slot++;
        p.running = false;
        p.command = argv;
        p.running = true;
    }
    function launch(app: string) {
        root.run(["uwsm", "app", "--", app]);
    }
    // --------------------------------------------------------------- power
    function logout() { root.run(["uwsm", "stop"]); }
    function reboot() { root.run(["systemctl", "reboot"]); }
    function shutdown() { root.run(["systemctl", "poweroff"]); }
    function suspend() { root.lock(); root.run(["systemctl", "suspend"]); }
    function hibernate() { root.lock(); root.run(["systemctl", "hibernate"]); }
    function reloadShell() { Quickshell.reload(true); }
    // ------------------------------------------------------------- helpers
    function openAudioSettings() { root.launch("pavucontrol"); }
    function openSystemMonitor() { root.run(["alacritty", "-e", "btop"]); }
    function openNetworkSettings() { root.run(["nm-connection-editor"]); }
    function copyText(s: string) { root.run(["wl-copy", "--", s]); }
    IpcHandler {
        target: "shell"
        function lock(): void { root.lock(); }
        function power(): void { root.togglePowerMenu(); }
        function reloadConfig(): void { root.reloadShell(); }
        function toggleDnd(): void { Notifs.toggleDnd(); }
        function clearNotifications(): void { Notifs.clearAll(); }
    }
 }
@@ -0,0 +1,99 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Services.Pipewire
 // Live audio state straight from PipeWire, so the bar and OSD react the instant
 // a volume key is pressed rather than on the next poll.
 Singleton {
    id: root
    readonly property PwNode sink: Pipewire.defaultAudioSink
    readonly property PwNode source: Pipewire.defaultAudioSource
    // Binding node.audio.* only works while the node is tracked.
    PwObjectTracker {
        objects: [root.sink, root.source].filter(n => n !== null)
    }
    readonly property bool ready: sink !== null && sink.audio !== null
    readonly property real volume: sink?.audio?.volume ?? 0
    readonly property bool muted: sink?.audio?.muted ?? true
    readonly property int volumePercent: Math.round(volume * 100)
    readonly property string sinkName: sink?.nickname || sink?.description || sink?.name || "No output"
    readonly property real micVolume: source?.audio?.volume ?? 0
    readonly property bool micMuted: source?.audio?.muted ?? true
    readonly property int micPercent: Math.round(micVolume * 100)
    readonly property string sourceName: source?.nickname || source?.description || source?.name || "No input"
    // Every sink on the box, for the output picker in the audio popout.
    readonly property var sinks: Pipewire.nodes.values.filter(n =>
        n.isSink && !n.isStream && n.audio !== null)
    // Application streams, for the per-app mixer.
    readonly property var streams: Pipewire.nodes.values.filter(n =>
        n.isStream && n.audio !== null && n.isSink === false)
    PwObjectTracker {
        objects: root.streams
    }
    signal volumeBumped()
    signal micBumped()
    onVolumePercentChanged: volumeBumped()
    onMutedChanged: volumeBumped()
    onMicPercentChanged: micBumped()
    onMicMutedChanged: micBumped()
    function setVolume(v: real) {
        if (!sink?.audio) return;
        sink.audio.volume = Math.max(0, Math.min(1.5, v));
    }
    function changeVolume(delta: real) {
        setVolume(volume + delta);
    }
    function toggleMute() {
        if (!sink?.audio) return;
        sink.audio.muted = !sink.audio.muted;
    }
    function setMicVolume(v: real) {
        if (!source?.audio) return;
        source.audio.volume = Math.max(0, Math.min(1.5, v));
    }
    function toggleMicMute() {
        if (!source?.audio) return;
        source.audio.muted = !source.audio.muted;
    }
    function setSink(node: PwNode) {
        Pipewire.preferredDefaultAudioSink = node;
    }
    function streamName(node: PwNode): string {
        if (!node) return "";
        return node.properties?.["application.name"]
            || node.properties?.["media.name"]
            || node.nickname
            || node.description
            || node.name;
    }
    // Nerd Font glyph for the current output level.
    readonly property string icon: {
        if (muted) return "󰝟";
        if (volumePercent === 0) return "󰕿";
        if (volumePercent < 34) return "󰕿";
        if (volumePercent < 67) return "󰖀";
        return "󰕾";
    }
    readonly property string micIcon: micMuted ? "󰍭" : "󰍬"
 }
@@ -0,0 +1,101 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Services.UPower
 import "root:/config"
 import "root:/services"
 // Battery and power-profile state. UPower gives live percentage and time
 // estimates; Sys.powerDetail adds the TLP/AC line fluxo reports.
 Singleton {
    id: root
    readonly property UPowerDevice device: UPower.displayDevice
    readonly property bool available: device !== null && device.isLaptopBattery && device.isPresent
    readonly property bool onBattery: UPower.onBattery
    readonly property real percent: device?.percentage !== undefined ? device.percentage * 100 : 0
    readonly property int state: device?.state ?? UPowerDeviceState.Unknown
    readonly property bool charging: state === UPowerDeviceState.Charging
        || state === UPowerDeviceState.PendingCharge
    readonly property bool full: state === UPowerDeviceState.FullyCharged
    readonly property real changeRate: device?.changeRate ?? 0     // watts
    readonly property real health: device?.healthSupported ? (device?.healthPercentage ?? 0) : 0
    readonly property bool low: available && !charging && percent <= 20
    readonly property bool critical: available && !charging && percent <= 10
    readonly property real secondsLeft: charging
        ? (device?.timeToFull ?? 0)
        : (device?.timeToEmpty ?? 0)
    readonly property string timeLabel: {
        if (root.full) return "Full";
        if (!(root.secondsLeft > 0)) return charging ? "Charging" : "Estimating…";
        const mins = Math.round(root.secondsLeft / 60);
        const h = Math.floor(mins / 60);
        const m = mins % 60;
        const dur = h > 0 ? h + "h " + m + "m" : m + "m";
        return root.charging ? dur + " to full" : dur + " left";
    }
    readonly property string detail: Sys.powerDetail
    // Ten-step battery glyph ramp, plus the charging variants.
    readonly property string icon: {
        if (!root.available) return "󰚥";
        const p = Math.max(0, Math.min(100, root.percent));
        const step = Math.min(10, Math.floor(p / 10));
        if (root.charging) {
            const charge = ["󰢜", "󰂆", "󰂇", "󰂈", "󰢝", "󰂉", "󰢞", "󰂊", "󰂋", "󰂅", "󰂅"];
            return charge[step];
        }
        const drain = ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹", "󰁹"];
        return drain[step];
    }
    readonly property color tint: {
        if (root.charging || root.full) return Theme.ok;
        if (root.critical) return Theme.accent;
        if (root.low) return Theme.warn;
        return Theme.primary;
    }
    // ------------------------------------------------------- power profiles
    readonly property bool hasPerformance: PowerProfiles.hasPerformanceProfile
    readonly property int profile: PowerProfiles.profile
    readonly property string profileLabel: {
        switch (root.profile) {
        case PowerProfile.PowerSaver: return "Power Saver";
        case PowerProfile.Performance: return "Performance";
        default: return "Balanced";
        }
    }
    readonly property string profileIcon: {
        switch (root.profile) {
        case PowerProfile.PowerSaver: return "󰌪";
        case PowerProfile.Performance: return "󰓅";
        default: return "󰾅";
        }
    }
    function setProfile(p: int) {
        PowerProfiles.profile = p;
    }
    function cycleProfile() {
        if (root.profile === PowerProfile.PowerSaver) {
            root.setProfile(PowerProfile.Balanced);
        } else if (root.profile === PowerProfile.Balanced
                   && PowerProfiles.hasPerformanceProfile) {
            root.setProfile(PowerProfile.Performance);
        } else {
            root.setProfile(PowerProfile.PowerSaver);
        }
    }
 }
@@ -0,0 +1,75 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
 // Backlight control. Reads the sysfs value directly so the OSD is exact, and
 // writes through brightnessctl, which already owns the udev permissions here.
 Singleton {
    id: root
    readonly property string device: "amdgpu_bl1"
    property int raw: 0
    property int maxRaw: 65535
    readonly property real percent: maxRaw > 0 ? raw / maxRaw * 100 : 0
    readonly property bool available: maxRaw > 0
    signal bumped()
    FileView {
        id: maxFile
        path: "/sys/class/backlight/" + root.device + "/max_brightness"
        watchChanges: false
        onLoaded: {
            const v = parseInt(text().trim());
            if (v > 0) root.maxRaw = v;
        }
    }
    FileView {
        id: currentFile
        path: "/sys/class/backlight/" + root.device + "/brightness"
        watchChanges: true
        onFileChanged: reload()
        onLoaded: {
            const v = parseInt(text().trim());
            if (!isNaN(v) && v !== root.raw) {
                root.raw = v;
                root.bumped();
            }
        }
    }
    // sysfs writes do not always fire inotify for backlight, so poll gently too.
    Timer {
        interval: 1000
        running: true
        repeat: true
        onTriggered: currentFile.reload()
    }
    Process {
        id: setter
    }
    function setPercent(p: real) {
        const clamped = Math.max(1, Math.min(100, Math.round(p)));
        setter.running = false;
        setter.command = ["brightnessctl", "-d", root.device, "-q", "set", clamped + "%"];
        setter.running = true;
    }
    function change(delta: real) {
        setPercent(percent + delta);
    }
    readonly property string icon: {
        const p = root.percent;
        if (p >= 80) return "󰃠";
        if (p >= 55) return "󰃝";
        if (p >= 30) return "󰃟";
        return "󰃞";
    }
 }
@@ -0,0 +1,80 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Bluetooth
 // Bluetooth via BlueZ. Connection and pairing are driven directly from the
 // popout; `fluxo bt` stays available as a CLI for the existing keybind.
 Singleton {
    id: root
    readonly property BluetoothAdapter adapter: Bluetooth.defaultAdapter
    readonly property bool available: adapter !== null
    readonly property bool enabled: adapter?.enabled ?? false
    readonly property bool discovering: adapter?.discovering ?? false
    readonly property var devices: adapter
        ? adapter.devices.values.slice().sort((a, b) => {
            if (a.connected !== b.connected) return a.connected ? -1 : 1;
            if (a.paired !== b.paired) return a.paired ? -1 : 1;
            return (a.deviceName || a.name || "").localeCompare(b.deviceName || b.name || "");
        })
        : []
    readonly property var connected: devices.filter(d => d.connected)
    readonly property BluetoothDevice primary: connected.length > 0 ? connected[0] : null
    readonly property string label: {
        if (!available) return "No adapter";
        if (!enabled) return "Off";
        if (connected.length === 0) return "Disconnected";
        if (connected.length === 1) return root.deviceLabel(primary);
        return connected.length + " devices";
    }
    readonly property string icon: {
        if (!available || !enabled) return "󰂲";
        if (connected.length > 0) return "󰂱";
        return "󰂯";
    }
    function deviceLabel(d: BluetoothDevice): string {
        if (!d) return "";
        return d.deviceName || d.name || d.address;
    }
    // Nerd Font glyph matching BlueZ's icon hint.
    function deviceIcon(d: BluetoothDevice): string {
        const i = d?.icon || "";
        if (i.includes("headset") || i.includes("headphone")) return "󰋋";
        if (i.includes("audio")) return "󰓃";
        if (i.includes("phone")) return "󰄜";
        if (i.includes("mouse")) return "󰍽";
        if (i.includes("keyboard")) return "󰌌";
        if (i.includes("computer")) return "󰟀";
        if (i.includes("watch")) return "󰖉";
        if (i.includes("input-gaming")) return "󰊗";
        if (i.includes("printer")) return "󰐪";
        return "󰂯";
    }
    function toggle() {
        if (adapter) adapter.enabled = !adapter.enabled;
    }
    function toggleScan() {
        if (adapter) adapter.discovering = !adapter.discovering;
    }
    function toggleDevice(d: BluetoothDevice) {
        if (!d) return;
        if (d.connected) {
            d.disconnect();
        } else if (d.paired || d.bonded) {
            d.connect();
        } else {
            d.pair();
        }
    }
 }
@@ -0,0 +1,104 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Services.Mpris
 // MPRIS. Prefers whichever player is actually playing, falling back to the last
 // one that was, so the bar does not flip between Spotify and a stray browser tab.
 Singleton {
    id: root
    property string preferredId: ""
    readonly property var players: Mpris.players?.values ?? []
    readonly property bool hasPlayer: active !== null
    readonly property MprisPlayer active: {
        if (players.length === 0) return null;
        // An explicit pick wins, while it still exists.
        if (root.preferredId !== "") {
            for (const p of players) if (p.dbusName === root.preferredId) return p;
        }
        for (const p of players) if (p.isPlaying) return p;
        return players[0];
    }
    readonly property string title: active?.trackTitle || ""
    readonly property string artist: active?.trackArtist || ""
    readonly property string album: active?.trackAlbum || ""
    readonly property string artUrl: active?.trackArtUrl || ""
    readonly property string identity: active?.identity || ""
    readonly property bool playing: active?.isPlaying ?? false
    readonly property bool canGoNext: active?.canGoNext ?? false
    readonly property bool canGoPrevious: active?.canGoPrevious ?? 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: lengthSupported ? (active?.length ?? 0) : 0
    readonly property real position: positionSupported ? (active?.position ?? 0) : 0
    readonly property real progress: hasTimeline ? Math.min(1, position / length) : 0
    readonly property string label: {
        if (!hasPlayer) return "Nothing playing";
        if (title === "") return identity || "Unknown track";
        if (artist === "") return title;
        return artist + " — " + title;
    }
    signal trackChanged()
    onTitleChanged: trackChanged()
    // MPRIS position is pull-only; tick it so the seek bar moves.
    Timer {
        interval: 1000
        running: root.playing && root.positionSupported
        repeat: true
        onTriggered: if (root.active) root.active.positionChanged()
    }
    function playPause() { if (active?.canTogglePlaying) active.togglePlaying(); }
    function next() { if (canGoNext) active.next(); }
    function previous() { if (canGoPrevious) active.previous(); }
    function seekTo(fraction: real) {
        if (!canSeek || length <= 0) return;
        active.position = Math.max(0, Math.min(length, fraction * length));
    }
    function raise() { if (active?.canRaise) active.raise(); }
    function select(player: MprisPlayer) {
        root.preferredId = player ? player.dbusName : "";
    }
    // Nerd Font glyph for the source app, so the bar reads at a glance.
    readonly property string sourceIcon: {
        const id = (identity || "").toLowerCase();
        if (id.includes("spotify")) return "";
        if (id.includes("firefox")) return "";
        if (id.includes("chrom") || id.includes("brave")) return "";
        if (id.includes("mpv")) return "";
        if (id.includes("vlc")) return "󰕼";
        if (id.includes("jellyfin")) return "󰋩";
        if (id.includes("youtube")) return "";
        return "󰝚";
    }
    // Quickshell exposes MPRIS position/length in seconds (with millisecond
    // precision), not the protocol's raw microseconds.
    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) {
            const h = Math.floor(m / 60);
            return h + ":" + String(m % 60).padStart(2, "0") + ":" + String(s).padStart(2, "0");
        }
        return m + ":" + String(s).padStart(2, "0");
    }
 }
@@ -0,0 +1,96 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Networking
 // NetworkManager state for the network popout. Throughput and the active IP
 // come from Sys (fluxo); this covers device topology and the Wi-Fi picker.
 Singleton {
    id: root
    readonly property bool wifiEnabled: Networking.wifiEnabled
    readonly property bool wifiHardwareEnabled: Networking.wifiHardwareEnabled
    readonly property int connectivity: Networking.connectivity
    readonly property var devices: Networking.devices?.values ?? []
    readonly property var wifiDevices: devices.filter(d => d.type === DeviceType.Wifi)
    readonly property var wiredDevices: devices.filter(d => d.type === DeviceType.Wired)
    readonly property WifiDevice wifi: wifiDevices.length > 0 ? wifiDevices[0] : null
    readonly property WiredDevice wired: wiredDevices.length > 0 ? wiredDevices[0] : null
    readonly property bool wiredUp: wired?.connected ?? false
    readonly property Network activeWifi: {
        if (!wifi) return null;
        const nets = wifi.networks?.values ?? [];
        for (const n of nets) if (n.connected) return n;
        return null;
    }
    // Strongest-first, one entry per SSID, current network pinned to the top.
    readonly property var wifiNetworks: {
        if (!wifi) return [];
        const seen = {};
        const out = [];
        const nets = (wifi.networks?.values ?? []).slice().sort((a, b) =>
            (b.signalStrength ?? 0) - (a.signalStrength ?? 0));
        for (const n of nets) {
            if (!n.name || seen[n.name]) continue;
            seen[n.name] = true;
            out.push(n);
        }
        return out.sort((a, b) => {
            if (a.connected !== b.connected) return a.connected ? -1 : 1;
            return (b.signalStrength ?? 0) - (a.signalStrength ?? 0);
        });
    }
    readonly property bool scanning: wifi?.scannerEnabled ?? false
    readonly property string icon: {
        if (root.wiredUp) return "󰈀";
        if (!root.wifiEnabled) return "󰤭";
        if (!root.activeWifi) return "󰤯";
        const s = root.activeWifi.signalStrength ?? 0;
        // Strength is only sampled while a scan is running, which the shell
        // does on demand. Connected-but-unsampled should read as full, not dead.
        if (s <= 0) return "󰤨";
        if (s >= 80) return "󰤨";
        if (s >= 60) return "󰤥";
        if (s >= 40) return "󰤢";
        if (s >= 20) return "󰤟";
        return "󰤯";
    }
    readonly property string label: {
        if (root.wiredUp) return "Ethernet";
        if (!root.wifiEnabled) return "Wi-Fi off";
        if (root.activeWifi) return root.activeWifi.name;
        return "Offline";
    }
    function signalIcon(strength: int): string {
        if (strength >= 80) return "󰤨";
        if (strength >= 60) return "󰤥";
        if (strength >= 40) return "󰤢";
        if (strength >= 20) return "󰤟";
        return "󰤯";
    }
    function secured(n): bool {
        return n && n.security !== undefined
            && n.security !== WifiSecurityType.Open
            && n.security !== WifiSecurityType.Unknown;
    }
    function toggleWifi() {
        Networking.wifiEnabled = !Networking.wifiEnabled;
    }
    function setScanning(on: bool) {
        if (wifi) wifi.scannerEnabled = on;
    }
 }
@@ -0,0 +1,111 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Services.Notifications
 import "root:/config"
 // Notification server. Replaces dunst: the shell owns the org.freedesktop
 // .Notifications name and renders popups and the history list itself.
 Singleton {
    id: root
    property bool dnd: false
    // Newest first. Popups read the head of this list.
    property list<Notification> history: []
    property int maxHistory: 60
    readonly property int count: history.length
    readonly property bool hasUnread: unread > 0
    property int unread: 0
    NotificationServer {
        id: server
        keepOnReload: true
        bodySupported: true
        bodyMarkupSupported: true
        bodyImagesSupported: true
        actionsSupported: true
        actionIconsSupported: true
        imageSupported: true
        inlineReplySupported: true
        persistenceSupported: true
        onNotification: notif => {
            // Hold the notification open until we drop it ourselves.
            notif.tracked = true;
            root.history = [notif, ...root.history].slice(0, root.maxHistory);
            root.unread++;
            if (!root.dnd) root.popupRequested(notif);
        }
    }
    signal popupRequested(Notification notif)
    function dismiss(notif: Notification) {
        if (!notif) return;
        const idx = root.history.indexOf(notif);
        if (idx !== -1) {
            const next = root.history.slice();
            next.splice(idx, 1);
            root.history = next;
        }
        notif.dismiss();
    }
    function clearAll() {
        const all = root.history.slice();
        root.history = [];
        root.unread = 0;
        for (const n of all) n.dismiss();
    }
    function markRead() {
        root.unread = 0;
    }
    function toggleDnd() {
        root.dnd = !root.dnd;
    }
    readonly property string icon: {
        if (root.dnd) return "󰂛";
        if (root.hasUnread) return "󱅫";
        return "󰂚";
    }
    // Urgency-driven accents for the popup chrome.
    function urgencyColor(u: int): color {
        switch (u) {
        case NotificationUrgency.Critical: return Theme.accent;
        case NotificationUrgency.Low: return Theme.muted;
        default: return Theme.primary;
        }
    }
    function appIconFor(notif: Notification): string {
        if (!notif) return "󰂚";
        const app = (notif.appName || "").toLowerCase();
        if (app.includes("spotify")) return "";
        if (app.includes("discord")) return "󰙯";
        if (app.includes("slack")) return "󰒱";
        if (app.includes("thunderbird") || app.includes("mail")) return "󰇮";
        if (app.includes("firefox")) return "";
        if (app.includes("volume") || app.includes("audio")) return "󰕾";
        if (app.includes("screenshot") || app.includes("grim")) return "󰄄";
        return "󰂚";
    }
    // How long a popup stays up, in ms.
    function timeoutFor(notif: Notification): int {
        if (!notif) return 5000;
        if (notif.urgency === NotificationUrgency.Critical) return 0;   // sticky
        if (notif.expireTimeout > 0) return notif.expireTimeout;
        if (notif.urgency === NotificationUrgency.Low) return 3500;
        return 6000;
    }
 }
@@ -0,0 +1,223 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
 // Hardware telemetry, sourced from the user's `fluxo` daemon. fluxo's hardware
 // modules are configured to emit raw pipe-delimited values (see
 // ~/.config/fluxo/config.toml); everything here is parsing and formatting.
 Singleton {
    id: root
    // Poll interval. The bar reads these continuously, so keep it modest.
    property int interval: 2000
    // ------------------------------------------------------------------ cpu
    property real cpuUsage: 0
    property real cpuTemp: 0
    property string cpuModel: ""
    // ------------------------------------------------------------------ mem
    property real memUsed: 0        // GB
    property real memTotal: 0       // GB
    readonly property real memPercent: memTotal > 0 ? memUsed / memTotal * 100 : 0
    // ------------------------------------------------------------------ gpu
    property bool gpuAvailable: false
    property real gpuUsage: 0
    property real gpuVramUsed: 0
    property real gpuVramTotal: 0
    property real gpuTemp: 0
    property string gpuModel: ""
    // ----------------------------------------------------------------- disk
    property real diskUsed: 0       // GB
    property real diskTotal: 0      // GB
    property real diskPercent: 0
    property string diskFree: ""
    // ------------------------------------------------------------------ sys
    property string uptime: ""
    property real load1: 0
    property real load5: 0
    property real load15: 0
    property int procs: 0
    // ------------------------------------------------------------------ net
    property string netInterface: ""
    property string netIp: ""
    property real netRx: 0          // MB/s
    property real netTx: 0          // MB/s
    readonly property bool netUp: netInterface !== "" && netInterface !== "none"
    readonly property bool netWireless: netInterface.startsWith("wl")
    // -------------------------------------------------------------- battery
    // UPower drives the battery UI; fluxo supplies the TLP/AC detail line.
    property string powerDetail: ""
    // fluxo wraps values in zero-width spaces for Waybar's benefit.
    function _clean(s: string): string {
        return (s || "").replace(//g, "").trim();
    }
    function _fields(json: string): var {
        try {
            const o = JSON.parse(json);
            return { parts: root._clean(o.text).split("|"), obj: o };
        } catch (e) {
            return null;
        }
    }
    function _num(v): real {
        const n = parseFloat(v);
        return isNaN(n) ? 0 : n;
    }
    Timer {
        interval: root.interval
        running: true
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            cpuReader.running = true;
            memReader.running = true;
            gpuReader.running = true;
            netReader.running = true;
            sysReader.running = true;
        }
    }
    // Disk and battery move slowly; poll them a tenth as often.
    Timer {
        interval: root.interval * 10
        running: true
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            diskReader.running = true;
            powerReader.running = true;
        }
    }
    Process {
        id: cpuReader
        command: ["fluxo", "cpu"]
        stdout: StdioCollector {
            onStreamFinished: {
                const f = root._fields(text);
                if (!f) return;
                root.cpuUsage = root._num(f.parts[0]);
                root.cpuTemp = root._num(f.parts[1]);
                root.cpuModel = f.obj.tooltip || "";
            }
        }
    }
    Process {
        id: memReader
        command: ["fluxo", "mem"]
        stdout: StdioCollector {
            onStreamFinished: {
                const f = root._fields(text);
                if (!f) return;
                root.memUsed = root._num(f.parts[0]);
                root.memTotal = root._num(f.parts[1]);
            }
        }
    }
    Process {
        id: gpuReader
        command: ["fluxo", "gpu"]
        stdout: StdioCollector {
            onStreamFinished: {
                const f = root._fields(text);
                if (!f || f.parts.length < 4) {
                    root.gpuAvailable = false;
                    return;
                }
                root.gpuAvailable = true;
                root.gpuUsage = root._num(f.parts[0]);
                root.gpuVramUsed = root._num(f.parts[1]);
                root.gpuVramTotal = root._num(f.parts[2]);
                root.gpuTemp = root._num(f.parts[3]);
                const m = /Model:\s*(.+)/.exec(f.obj.tooltip || "");
                if (m) root.gpuModel = m[1];
            }
        }
    }
    Process {
        id: diskReader
        command: ["fluxo", "disk", "/"]
        stdout: StdioCollector {
            onStreamFinished: {
                const f = root._fields(text);
                if (!f) return;
                root.diskUsed = root._num(f.parts[1]);
                root.diskTotal = root._num(f.parts[2]);
                root.diskPercent = f.obj.percentage || 0;
                const m = /Free:\s*(\S+)/.exec(f.obj.tooltip || "");
                root.diskFree = m ? m[1] : "";
            }
        }
    }
    Process {
        id: netReader
        command: ["fluxo", "net"]
        stdout: StdioCollector {
            onStreamFinished: {
                const f = root._fields(text);
                if (!f) return;
                root.netInterface = f.parts[0] || "";
                root.netIp = f.parts[1] || "";
                root.netRx = root._num(f.parts[2]);
                root.netTx = root._num(f.parts[3]);
            }
        }
    }
    Process {
        id: sysReader
        command: ["fluxo", "sys"]
        stdout: StdioCollector {
            onStreamFinished: {
                const f = root._fields(text);
                if (!f) return;
                root.uptime = f.parts[0] || "";
                root.load1 = root._num(f.parts[1]);
                root.load5 = root._num(f.parts[2]);
                root.load15 = root._num(f.parts[3]);
                const m = /Processes:\s*(\d+)/.exec(f.obj.tooltip || "");
                if (m) root.procs = parseInt(m[1]);
            }
        }
    }
    Process {
        id: powerReader
        command: ["fluxo", "power"]
        stdout: StdioCollector {
            onStreamFinished: {
                try {
                    root.powerDetail = JSON.parse(text).tooltip || "";
                } catch (e) {}
            }
        }
    }
    // ------------------------------------------------------------ formatting
    function rate(mbps: real): string {
        if (mbps >= 1) return mbps.toFixed(1) + " MB/s";
        const kb = mbps * 1024;
        if (kb >= 1) return Math.round(kb) + " KB/s";
        return "idle";
    }
    function gb(v: real): string {
        return v >= 100 ? Math.round(v) + "G" : v.toFixed(1) + "G";
    }
 }
@@ -0,0 +1,120 @@
 pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
 import "root:/config"
 // The wallpaper currently on screen, per monitor.
 //
 // The lock screen used to point at a hardcoded path in Theme.qml, which meant
 // it showed whatever picture was correct on the day that line was written —
 // takemi_2 while hyprpaper had been switched to takemi_1. Anything that puts
 // the wallpaper on screen should ask hyprpaper what it is actually displaying,
 // which is what this does.
 //
 // hyprpaper is the source of truth at runtime; hyprpaper.conf is the fallback
 // for the window between the shell starting and hyprpaper answering, and for
 // the case where hyprpaper is not running at all.
 Singleton {
    id: root
    // monitor name -> file path. Monitors hyprpaper set with a blank `monitor =`
    // come back under the empty-string key.
    property var byMonitor: ({})
    // The wallpaper to use when no particular monitor is being asked about.
    property string path: ""
    readonly property url source: root.path !== ""
        ? Qt.resolvedUrl("file://" + root.path)
        : Theme.fallbackWallpaper
    // Path set from hyprpaper.conf, used until (and unless) hyprctl answers.
    property string configPath: ""
    signal changed()
    function forMonitor(name: string): url {
        const p = root.byMonitor[name];
        return p ? Qt.resolvedUrl("file://" + p) : root.source;
    }
    function refresh() {
        reader.running = true;
    }
    function _expand(p: string): string {
        const s = p.trim();
        if (s.startsWith("~/")) return Quickshell.env("HOME") + s.slice(1);
        return s;
    }
    function _adopt(map: var, fallback: string) {
        root.byMonitor = map;
        // Prefer the focused monitor's wallpaper, then any monitor's, then the
        // config. Object.values order is insertion order here, which is the
        // order hyprpaper listed them in.
        const vals = Object.keys(map).map(k => map[k]).filter(v => v !== "");
        const next = vals.length > 0 ? vals[0] : fallback;
        if (next !== root.path) {
            root.path = next;
            root.changed();
        }
    }
    Process {
        id: reader
        command: ["hyprctl", "hyprpaper", "listactive"]
        stdout: StdioCollector {
            onStreamFinished: {
                const map = {};
                for (const line of text.split("\n")) {
                    // "eDP-1: /home/narl/.wallpapers/takemi_1.jpg". Split on the
                    // first colon only — the path may contain one.
                    const at = line.indexOf(":");
                    if (at === -1) continue;
                    const mon = line.slice(0, at).trim();
                    const file = line.slice(at + 1).trim();
                    if (file === "" || file.startsWith("invalid")) continue;
                    map[mon] = file;
                }
                root._adopt(map, root.configPath);
            }
        }
        // hyprpaper down, or hyprctl missing. Fall back to the config file.
        onExited: code => {
            if (code !== 0 && root.path === "") root._adopt({}, root.configPath);
        }
    }
    // hyprpaper has no change signal to subscribe to, so poll — but slowly. A
    // wallpaper changes when a person decides to change it, not continuously.
    Timer {
        interval: 10000
        running: true
        repeat: true
        triggeredOnStart: true
        onTriggered: root.refresh()
    }
    // Editing the config is the other way the wallpaper changes here, and that
    // one we can watch properly.
    FileView {
        id: conf
        path: Quickshell.env("HOME") + "/.config/hypr/hyprpaper.conf"
        watchChanges: true
        onFileChanged: reload()
        onLoaded: {
            const m = /^\s*path\s*=\s*(.+)$/m.exec(text());
            if (m) root.configPath = root._expand(m[1]);
            // A config edit is usually followed by a hyprpaper reload, so go
            // ask what actually took effect rather than trusting the file.
            root.refresh();
        }
    }
 }
@@ -0,0 +1,64 @@
 import QtQuick
 import Quickshell
 import "root:/config"
 import "root:/services"
 import "root:/bar"
 import "root:/overlays"
 import "root:/lock"
 // Takemi — a Persona 5 flavoured Quickshell desktop.
 //
 //   bar/       the top bar and its modules
 //   popouts/   hover panels hanging off bar modules
 //   overlays/  power menu, notification toasts, OSD
 //   lock/      session lock
 //   services/  data sources (fluxo, pipewire, bluez, upower, mpris, …)
 //   config/    palette, type, geometry, motion
 ShellRoot {
    // Services are lazily constructed on first use. The shell wants several of
    // them warm from the start — polling, the notification server, the audio
    // OSD — so touch them here rather than waiting for a hover.
    Component.onCompleted: {
        void Sys.cpuUsage;
        void Audio.ready;
        void Battery.available;
        void Brightness.percent;
        void Notifs.count;
        void Media.hasPlayer;
        void Net.wifiEnabled;
        void Bt.available;
        void Actions.powerMenuOpen;
    }
    Variants {
        model: Quickshell.screens
        Bar {}
    }
    Variants {
        model: Quickshell.screens
        Rail {}
    }
    Variants {
        model: Quickshell.screens
        PowerMenu {}
    }
    Variants {
        model: Quickshell.screens
        Toasts {}
    }
    Variants {
        model: Quickshell.screens
        Osd {}
    }
    Lock {}
 }
@@ -0,0 +1 @@
 /dev/null
@@ -1 +0,0 @@
 /usr/lib/systemd/user/waybar.service
Author	SHA1	Message	Date
nvrl	a868f50ab7	improvements	2026-08-11 17:35:26 +02:00
nvrl	39f925cb58	updated design	2026-08-11 16:34:09 +02:00
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
nvrl	47ff5233bd	added quickshell	2026-08-10 23:57:26 +02:00