improvements

.gitignore

@@ -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
@@ -25,3 +28,4 @@
 !systemd/
 fish/fish_variables
 waybar/fluxo-rs
+!fluxo/

DESIGN-IS-2026-08-11/00-scope.md

@@ -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.

DESIGN-IS-2026-08-11/01-evidence.md

@@ -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.

DESIGN-IS-2026-08-11/02-scorecard.md

@@ -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**

DESIGN-IS-2026-08-11/03-verdict.md

@@ -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.

DESIGN-IS-2026-08-11/04-handoff-prompt.md

@@ -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.
+```

alacritty/alacritty.toml

@@ -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,4 +107,9 @@ 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"
+mods = "Shift"
+chars = "\u001B\r"

alacritty/takemi.toml

@@ -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"

btop/btop.conf

@@ -1,4 +1,4 @@
-#? Config file for btop v.1.4.6
+#? Config file for btop v.1.4.7
 
 #* Name of a btop++/bpytop/bashtop formatted ".theme" file, "Default" and "TTY" for builtin themes.
 #* Themes should be placed in "../share/btop/themes" relative to binary or "$HOME/.config/btop/themes"
@@ -14,6 +14,11 @@ truecolor = true
 #* Will force 16-color mode and TTY theme, set all graph symbols to "tty" and swap out other non tty friendly symbols.
 force_tty = false
 
+#* Option to disable presets. Either the default preset, custom presets, or all presets.
+#* "Off" All presets are enabled.
+#* "Default" preset is disabled.#* "Custom" presets are disabled.#* "All" presets are disabled.
+disable_presets = "Off"
+
 #* Define presets for the layout of the boxes. Preset 0 is always all boxes shown with default settings. Max 9 presets.
 #* Format: "box_name:P:G,box_name:P:G" P=(0 or 1) for alternate positions, G=graph symbol to use for box.
 #* Use whitespace " " as separator between different presets.
@@ -24,6 +29,9 @@ presets = "cpu:1:default,proc:0:default cpu:0:default,mem:0:default,net:0:defaul
 #* Conflicting keys for h:"help" and k:"kill" is accessible while holding shift.
 vim_keys = true
 
+#* Disable all mouse events.
+disable_mouse = false
+
 #* Rounded corners on boxes, is ignored if TTY mode is ON.
 rounded_corners = true
 
@@ -60,7 +68,7 @@ update_ms = 1000
 
 #* Processes sorting, "pid" "program" "arguments" "threads" "user" "memory" "cpu lazy" "cpu direct",
 #* "cpu lazy" sorts top process over time (easier to follow), "cpu direct" updates top process directly.
-proc_sorting = "cpu lazy"
+proc_sorting = "memory"
 
 #* Reverse sorting order, True or False.
 proc_reversed = false
@@ -92,6 +100,9 @@ proc_left = false
 #* (Linux) Filter processes tied to the Linux kernel(similar behavior to htop).
 proc_filter_kernel = false
 
+#* Should the process list follow the selected process when detailed view is open.
+proc_follow_detailed = true
+
 #* In tree-view, always accumulate child process resources in the parent process.
 proc_aggregate = false
 
@@ -208,6 +219,9 @@ io_graph_combined = false
 #* Example: "/mnt/media:100 /:20 /boot:1".
 io_graph_speeds = ""
 
+#* Swap the positions of the upload and download speed graphs. When true, upload will be on top.
+swap_upload_download = false
+
 #* Set fixed values for network graphs in Mebibits. Is only used if net_auto is also set to False.
 net_download = 100
 
@@ -250,11 +264,11 @@ rsmi_measure_pcie_speeds = true
 #* Horizontally mirror the GPU graph.
 gpu_mirror_graph = true
 
-#* Set which GPU vendors to show. Available values are "nvidia amd intel"
+#* Set which GPU vendors to show. Available values are "nvidia amd intel apple"
 shown_gpus = "nvidia amd intel"
 
 #* Custom gpu0 model name, empty string to disable.
-custom_gpu_name0 = ""
+custom_gpu_name0 = "Radeon Vega"
 
 #* Custom gpu1 model name, empty string to disable.
 custom_gpu_name1 = ""

dunst/dunstrc

@@ -1,10 +1,10 @@
 [global]
 corner_radius = 4
 transparency = 90
-frame_color = "#94e2d5"
+frame_color = "#f38ba8"
 frame_width = 1
 separator_color= frame
-highlight = "#89b4fa"
+highlight = "#89dceb"
 
 [urgency_low]
 background = "#1e1e2e"

fish/conf.d/fish_frozen_theme.fish

@@ -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

fish/conf.d/takemi_theme.fish

@@ -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

fish/config.fish

@@ -37,3 +37,7 @@ if status is-login && test -z "$DISPLAY" -a -z "$WAYLAND_DISPLAY"
         exec uwsm start default
     end
 end
+
+# Claude environments
+alias claude="CLAUDE_CONFIG_DIR=~/.claude command claude"
+alias claude-work="CLAUDE_CONFIG_DIR=~/.claude-work command claude"

fish/functions/feh.fish

@@ -0,0 +1,3 @@
+function feh --description 'alias feh=feh -.'
+    command feh -. $argv
+end

fish/functions/fish_prompt.fish

@@ -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.

fish/functions/ls.fish

@@ -1,3 +1,3 @@
 function ls --wraps='exa --long --color=auto' --description 'alias ls=exa --long --color=auto'
-  exa --long --color=auto $argv; 
+  exa -l --color=auto $argv; 
 end

fish/themes/Takemi.theme

@@ -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

fluxo/config.toml

@@ -0,0 +1,90 @@
+# 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\""
+
+[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:.3}|{tx:.3}"
+
+[cpu]
+format = "{usage:.1}|{temp:.1}"
+
+[memory]
+format = "{used:.2}|{total:.2}"
+
+[sys]
+format = "{uptime}|{load1:.2}|{load5:.2}|{load15:.2}"
+
+[disk]
+format = "{mount}|{used:.1}|{total:.1}"
+
+
+[power]
+format = "{percentage}"
+
+[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 = true
+format_amd = "{usage:.0}|{vram_used:.2}|{vram_total:.2}|{temp:.1}"
+format_intel = "{usage:.0}|0|0|0"
+format_nvidia = "{usage:.0}|{vram_used:.2}|{vram_total:.2}|{temp:.1}"
+
+[keyboard]
+enabled = false
+format = "{layout}"
+
+[backlight]
+enable = true
+format = "{percentage}"
+
+[dnd]
+enabled = true
+format_dnd = "<span size='large'>󰂛</span>"
+format_normal = "<span size='large'>󰂚</span>"

fluxo/config.toml.waybar-bak

@@ -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>"

fuzzel/fuzzel.ini

@@ -1,13 +1,19 @@
-include=~/.config/fuzzel/catppuccin-fuzzel/themes/catppuccin-mocha/mauve.ini
+include=~/.config/fuzzel/takemi.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
-prompt="> "
-icon-theme=Papirus-Dark
-show-actions=yes
 
-[border]
+width=45
-radius=4
+lines=8
-width=2
+horizontal-pad=20
+vertical-pad=20
+inner-pad=10
+
+prompt="   "
+
+show-actions=no
+layer=overlay

fuzzel/takemi.ini

@@ -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

hypr/README.md

@@ -0,0 +1,83 @@
+<div align="center">
+    <h1>✦ Google-ish Hyprlock Theme ✦</h1>
+    <h3></h3>
+</div>
+
+## ▶️ Preview
+<details>
+	<summary><b>Without Profile & User Info</b></summary>
+	<img src="https://github.com/user-attachments/assets/7bbacd47-b0d7-4132-9951-53dc0ead604c" alt="Hyprlock-Without-Profile" width="1280">
+</details>
+<details>
+	<summary><b>With Profile & User Info</b></summary>
+	<img src="https://github.com/user-attachments/assets/9a58a6e2-a71f-4b28-998a-8a45c8950aaf" alt="Hyprlock-With-Profile" width="1280">
+</details>
+<details>
+	<summary><b>With Profile & User Info [12H Format]</b></summary>
+	<img src="https://github.com/user-attachments/assets/e0049860-7511-432e-8814-8d17d448182b" alt="Hyprlock-With-Profile" width="1280">
+</details>
+
+## 📦 Installation
+><i><b>❗ This configuration is based on a 1080p display, if you are using a higher screen resolution,</br>you may need to reconfigure the sizes and recoordinate all the components.</b></i>
+
+<b>Auto-Installation :</b>
+```bash
+sh -c "$(curl -fsSL https://raw.githubusercontent.com/Tamarindtype/googlish-hyprlock-theme/main/install.sh)"
+```
+</br><b>Manual Installation :</b>
+```bash
+# Backup your current Hyprlock config first!
+# Clone the repository
+git clone https://github.com/Tamarindtype/googlish-hyprlock-theme.git
+
+# Move all the files to the hyprland config folder
+mv ./googlish-hyprlock-theme/* ~/.config/hypr/
+
+# Go to script folder
+cd $HOME/.config/hypr/hyprlock/
+
+# Change all the scripts permission to make them executable
+chmod +x *.sh
+
+# Run the Hyprlock
+hyprlock
+```
+
+## 🗄️ Directory Structure
+```md
+$HOME
+└── .config
+    └── hypr
+        ├── hyprlock
+        │  ├── assets
+        │  ├── battery.sh
+        │  ├── bluetooth.sh
+        │  ├── change_wallpaper.sh
+        │  ├── greeting.sh
+        │  ├── network.sh
+        │  ├── medianotif.sh
+        │  └── weatherinfo.sh
+        └── hyprlock.conf
+```
+
+## 🗨️ FAQ
+| Question | Answer |
+| --- | --- |
+| Profile & User info does not appear? | By default, it set without profile and user info. You can enable it by uncomment the `image` @PROFILE PICTURE and `label` @USER INFO in `hyprlock.conf` |
+| Battery percentage number does not appear? | Change your battery module in `battery.sh`. The default is `BAT0`, you can check it by running this command `ls /sys/class/power_supply/` |
+| How to change the 24H Format to 12H Format? | Comment the 24H format and uncomment the 12H format. also uncomment the AM/PM `label` & `shape` in `hyprlock.conf` |
+| null location or Unable to determine your location? | Change the IP Geolocation provider in `weatherinfo.sh` |
+
+## 🏅 Recommendations
+| Type | Name | Links |
+| --- | --- | --- |
+| Regular | PP Neue Machina | [Pangram Pangram](https://pangrampangram.com/products/neue-machina) |
+| Nerd Font | Geist & Space Mono | [Nerd Fonts](https://github.com/ryanoasis/nerd-fonts/releases) |
+| Emoji | Apple Emoji | [apple-emoji-linux](https://github.com/samuelngs/apple-emoji-linux) |
+
+## ✨ Special Thanks & Credits
+
+| Details | Credit |
+| --- | --- |
+| Battery & Playerctl Widget Scripts | @ashish-kus [minimal Hyprlock](https://gist.github.com/ashish-kus/dd562b0bf5e8488a09e0b9c289f4574c) |
+| Helped Me Create Dynamic WiFi, Bluetooth, Weathercast and Greeting Widget | @OPENAI [ChatGPT](https://chatgpt.com/)|

hypr/hyprlock.conf

@@ -1,100 +1,545 @@
-source = $HOME/.config/hypr/catppuccin-hyprland/themes/mocha.conf
+# For more information visit https://wiki.hyprland.org/Hypr-Ecosystem/hyprlock/
+
+source = ~/.config/hypr/catppuccin-hyprland/themes/mocha.conf
+
+$scrPath      = ~/.config/hypr/hyprlock/
+$imgPath      = ~/.config/hypr/hyprlock/assets/
+
+$USER         = narl    # Your Alias
+$host         = uname -n #Your Alias
+$wifi-mode    = false # Change the WiFi output. true = show SSID, false = Connected.
+$bt-mode      = false # Change the Bluetooth output. true = show Device name, false = Connected.
+
+# Default geolocation provider is IP-API.COM, hardcode it if the location does not match the current location.
+# Hardcode your location (If hardcode does not recognize your City, change it to IP Geolocation provider in weatherinfo.sh)
+$CITY         = 
+$COUNTRY      = 
+
+# WALLPAPER
+# Just comment and uncomment to select
+$wallpaper    = screenshot
+#$wallpaper    = ~/your/wallpaper-path.png
+$blur  = 2
+
+# ADJUST HERE
+$rounding     = 12
+$shape-rd     = -1
+$font-text    = GeistMono Nerd Font Bold
+$font-text0   = GeistMono Nerd Font
+$font-display = PP Neue Machina Ultra-Bold
+$font-symbol  = JetBrainsMono Nerd Font Mono
+# Input Var
+$weight       = 2
+$inner-color  = rgba($baseAlpha80)
+$border-color = rgba($mauveAlpha80)
+
+# Colors
+$clock-color  = $text
+$fg0          = $text
+$fg1          = $base
+$shape-col0   = $mauve
+$shape-col1   = rgba($surface0Alpha80)
+$shape-col2   = rgba($surface1Alpha80)
+$shadow-pass  = 2
+$shadow-size  = 3
+$shadow-color = $crust
+$shadow-boost = 1.2
+$text-shadow-pass   = 1
+$text-shadow-boost  = 0.5
+
 
-$accent = $mauve
-$accentAlpha = $mauveAlpha
-$font = JetBrainsMono Nerd Font
 
 # GENERAL
 general {
-  hide_cursor = true
+    no_fade_in          = true
+    grace               = 1
+    disable_loading_bar = false
+    hide_cursor         = true
+    ignore_empty_input  = true
+    text_trim           = true
 }
 
-# BACKGROUND
+#BACKGROUND
 background {
-  monitor =
+    monitor     = 
-  path = $HOME/Pictures/mandelbrot.png
+    path        = $wallpaper
-  blur_passes = 0
+
-  color = $base
+    blur_passes         = $blur
+    contrast            = 0.8916
+    brightness          = 0.7172
+    vibrancy            = 0.1696
+    vibrancy_darkness   = 0
 }
 
-# LAYOUT
+# PROFILE PICTURE
-label {
-  monitor =
-  text = Layout: $LAYOUT
-  color = $text
-  font_size = 25
-  font_family = $font
-  position = 30, -30
-  halign = left
-  valign = top
-}
-
-# TIME
-label {
-  monitor =
-  text = $TIME
-  color = $text
-  font_size = 90
-  font_family = $font
-  position = -30, 0
-  halign = right
-  valign = top
-}
-
-# DATE
-label {
-  monitor =
-  text = cmd[update:43200000] date +"%A, %d %B %Y"
-  color = $text
-  font_size = 25
-  font_family = $font
-  position = -30, -150
-  halign = right
-  valign = top
-}
-
-# FINGERPRINT
-{
-  monitor = "";
-  text = "$FPRINTPROMPT";
-  color = "$text";
-  font_size = 14;
-  font_family = $font;
-  position = "0, -107";
-  halign = "center";
-  valign = "center";
-}
-
-# USER AVATAR
 image {
-  monitor =
+    monitor     =
-  path = $HOME/.face
+    path        = $imgPath/profile.jpg 
-  size = 100
+    size        = 120 # lesser side if not 1:1 ratio
-  border_color = $accent
+    opacity     = 0.25
-  position = 0, 75
+
-  halign = center
+    shadow_pass         = $shadow-pass
-  valign = center
+    shadow_size         = $shadow-size
+    shadow_color        = $shadow-color
+    shadow_boost        = $shadow-boost
+
+    rounding            = $rounding # negative values mean circle
+    border_size         = 4
+    border_color        = $mauve
+    rotate              = 0 # degrees, counter-clockwise
+    
+    position            = 20, -20
+    halign              = left
+    valign              = top
+    zindex              = 1
+}
+
+# USER INFO
+label {
+    monitor     =
+    text        = cmd[update:1000] echo -e "$USER\n󰁥 $($host)\n\n$(uname -r)\nPackages: $(pacman -Q | wc -l) pacman"
+    
+    shadow_passes       = 1
+    shadow_boost        = 0.5
+    
+    color               = $fg0
+    font_size           = 11
+    font_family         = $font-text
+
+    position            = 170, -35
+    halign              = left
+    valign              = top
+}
+
+# WEATHERCAST & LOCATION
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$(bash $scrPath/weatherinfo.sh)"
+    
+    shadow_passes       = 1
+    shadow_boost        = 0.5
+    
+    color               = $fg0
+    font_size           = 11
+    font_family         = $font-text
+
+    position            = 0, -20
+    halign              = center
+    valign              = top
 }
 
 # INPUT FIELD
 input-field {
-  monitor =
+    monitor     =
-  size = 300, 60
+    size        = 275, 55
-  outline_thickness = 4
+    rounding    = $rounding
-  dots_size = 0.2
+    
-  dots_spacing = 0.2
+    outline_thickness   = $weight
-  dots_center = true
+    outer_color         = $border-color
-  outer_color = $accent
+    dots_size           = 0.1 # Scale of input-field height, 0.2 - 0.8
-  inner_color = $surface0
+    dots_spacing        = 1 # Scale of dots' absolute size, 0.0 - 1.0
-  font_color = $text
+    dots_center         = true
-  fade_on_empty = false
+    
-  placeholder_text = <span foreground="##$textAlpha"><i>󰌾 Logged in as </i><span foreground="##$accentAlpha">$USER</span></span>
+    inner_color         = $inner-color
-  hide_input = false
+    font_color          = $fg0
-  check_color = $accent
+    fade_on_empty       = false
-  fail_color = $red
+    
-  fail_text = <i>$FAIL <b>($ATTEMPTS)</b></i>
+    font_family         = $font-text
-  capslock_color = $yellow
+    placeholder_text    = <span foreground="##$textAlpha">󰢏 $USER</span>
-  position = 0, -47
+    hide_input          = false
-  halign = center
+    check_color         = $mauve
-  valign = center
+    fail_color          = $red
+    fail_text           = <i>$FAIL <b>($ATTEMPTS)</b></i>
+    capslock_color      = $yellow
+    
+    position            = 0, -240
+    halign              = center
+    valign              = center
+    zindex              = 10
 }
+
+# TIME HR
+label {
+    monitor     =
+    text        = cmd[update:1000] echo -e "$(date +"%H")" # 24-Hour Format
+   #text        = cmd[update:1000] echo -e "$(date +"%I")" # 12-Hour Format
+    color       = $clock-color
+    
+    shadow_pass         = $shadow-pass
+    shadow_size         = $shadow-size
+    shadow_color        = $shadow-color
+    shadow_boost        = $shadow-boost
+    
+    font_size           = 150
+    font_family         = $font-display 
+    
+    position            = 0, -155
+    halign              = center
+    valign              = top
+}
+
+# TIME MM
+label {
+    monitor     =
+    text        = cmd[update:1000] echo -e "$(date +"%M")"
+    color       = $clock-color
+    
+    shadow_pass         = $shadow-pass
+    shadow_size         = $shadow-size
+    shadow_color        = $shadow-color
+    shadow_boost        = $shadow-boost
+
+    font_size           = 150
+    font_family         = $font-display
+    
+    position            = 0, -325
+    halign              = center
+    valign              = top
+}
+
+# AM/PM for 12-Hour Format
+#label {
+    monitor     =
+    text = cmd[update:1000] echo -e "$(date +"%p")"
+    color       = $clock-color
+    
+    shadow_pass         = $shadow-pass
+    shadow_size         = $shadow-size
+    shadow_color        = $shadow-color
+    shadow_boost        = $shadow-boost
+
+    font_size           = 16
+    font_family         = $font-display
+    
+    position            = 0, 17
+    halign              = center
+    valign              = center
+    zindex		= 5
+}
+
+# AM/PM BG
+#shape {
+    monitor     =
+    size        = 70, 40
+    
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $shape-col2
+    rounding            = $rounding
+    border_size         = 
+    border_color        =
+
+    position            = 0, 20
+    halign              = center
+    valign              = center
+    zindex              = 1
+}
+
+# GREETING
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$(bash $scrPath/greeting.sh)"
+    
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+    
+    color               = $fg0
+    font_size           = 11
+    font_family         = $font-text
+
+    position            = 0, -55
+    halign              = center
+    valign              = center
+}
+
+# TODAY IS
+label {
+    monitor     =
+    text        = cmd[update:1000] bash -c 'day=$(date +%A); echo "Today is $day"'
+
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $fg0
+    font_size           = 11
+    font_family         = $font-text
+
+    position            = 0, -75
+    halign              = center
+    valign              = center
+}
+
+# DATE
+label {
+    monitor     =
+    text        = cmd[update:1000] bash -c 'day=$(date +%d); case "$day" in 1) suffix="st";; 2) suffix="nd";; 3) suffix="rd";; *) suffix="th";; esac; echo -e "$(date +"%B %e")'$day'$suffix, $(date +%Y)"'
+
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $fg0
+    font_size           = 14
+    font_family         = $font-text
+
+    position            = 0, -115
+    halign              = center
+    valign              = center
+}
+
+# BATTERY
+label {
+    monitor     =
+    text        = cmd[update:1000] echo -e "$($scrPath/battery.sh)"
+    
+    color               = $fg1
+    font_size           = 12
+    font_family         = $font-text
+    
+    position            = -37, 29
+    halign              = right
+    valign              = bottom
+    zindex              = 5
+}
+
+# NETWORK
+label {
+    monitor     =
+    text        = cmd[update:1000] echo -e "$($scrPath/network.sh)"
+    
+    color               = $fg1
+    font_size           = 12
+    font_family         = $font-text
+    
+    position            = 37, 29
+    halign              = left
+    valign              = bottom
+    zindex              = 5
+}
+
+# BLUETOOTH
+label {
+    monitor     = 
+    text        = cmd[update:1000] echo -e "$(~/.config/hypr/hyprlock/bluetooth.sh)"
+    
+    color               = $fg1
+    font_size           = 12
+    font_family         = $font-text
+    
+    position            = 37, 85
+    halign 		= left
+    valign 		= bottom
+    zindex 		= 5
+}
+
+# BATTERY BG
+shape {
+    monitor     =
+    size        = 90, 40
+    
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $shape-col0
+    rounding            = $shape-rd
+    border_size         = 
+    border_color        =
+
+    position            = -20, 20
+    halign              = right
+    valign              = bottom
+    zindex              = 1
+}
+
+# NETWORK BG
+shape {
+    monitor     =
+    size        = 150, 40
+
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $shape-col0
+    rounding            = $shape-rd
+    border_size         = 
+    border_color        =
+
+    position            = 20, 20
+    halign              = left
+    valign              = bottom
+    zindex              = 1
+}
+
+# BLUETOOTH BG
+shape {
+    monitor     =
+    size        = 150, 40
+
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $shape-col0
+    rounding            = $shape-rd
+    border_size         = 
+    border_color        =
+
+    position            = 20, 75
+    halign              = left
+    valign              = bottom
+    zindex              = 1
+}
+
+# MEDIA BG
+image {
+    monitor     =
+    path        = $imgPath/media-bg-dark-25.png
+    size        = 8% 
+    opacity     = 0.25
+
+    rounding            = 5
+    border_size         = 0
+    rotate              = 0
+
+    position            = 0, -10% 
+    halign              = center
+    valign              = center
+    zindex              = 1
+}
+
+shape {
+    monitor     =
+    size        = 35%, 8% 
+
+    shadow_passes       = $text-shadow-pass
+    shadow_boost        = $text-shadow-boost
+
+    color               = $shape-col1
+    rounding            = $rounding
+    border_size         =
+    border_color        =
+
+    position            = 0, 5%
+    halign              = center
+    valign              = bottom
+    zindex              = 1
+}
+
+# PLAYER TITLE
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --title)"
+
+    color               = $fg0
+    font_size           = 14
+    font_family         = $font-text
+
+    position            = 0, -40%
+    halign              = center
+    valign              = center
+    zindex              = 5
+}
+
+# PLAYER ARTIST
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --artist)"
+
+    color               = $fg0
+    font_size           = 11
+    font_family         = $font-text
+
+    position            = 0, -42%
+    halign              = center
+    valign              = center
+    zindex              = 5
+}
+
+# PLAYER ALBUM
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --album)"
+
+    color               = $fg0
+    font_size           = 11
+    font_family         = $font-text0
+
+    position            = 0, -44%
+    halign              = center
+    valign              = center
+    zindex              = 5
+}
+
+# PLAYER STATUS SYMBOL
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --status-symbol)"
+
+    color               = $fg0
+    font_size           = 16
+    font_family         = $font-symbol
+
+    position            = 33.5%, -38%
+    halign              = left
+    valign              = center
+    zindex              = 5
+}
+
+# PLAYER STATUS
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --status)"
+
+    color               = $fg0
+    font_size           = 10
+    font_family         = $font-text
+
+    position            = 35%, -38%
+    halign              = left
+    valign              = center
+    zindex              = 5
+}
+
+# PLAYER SOURCE SYMBOL
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --source-symbol)"
+
+    color               = rgba($subtext0Alpha99)
+    font_size           = 16
+    font_family         = $font-symbol
+
+    position            = -33.5%, -38%
+    halign              = right
+    valign              = center
+    zindex              = 5
+}
+
+# PLAYER SOURCE
+label {
+    monitor     =
+    text        = cmd[update:1000] echo "$($scrPath/playerctl.sh --source)"
+
+    color               = rgba($subtext0Alpha99)
+    font_size           = 10
+    font_family         = $font-text
+
+    position            = -35%, -38%
+    halign              = right
+    valign              = center
+    zindex              = 5
+}
+
+label {
+    monitor     =
+    text        =
+
+    color               = $fg0
+    font_size           = 24
+    font_family         = $font-symbol
+
+    position            = 0, 1%
+    halign              = center
+    valign              = bottom
+}
+
+

hypr/hyprlock.conf.bak

@@ -0,0 +1,155 @@
+source = $HOME/.config/hypr/catppuccin-hyprland/themes/mocha.conf
+
+$accent = $mauve
+$accentAlpha = $mauveAlpha
+$font = JetBrainsMono Nerd Font
+
+# GENERAL
+general {
+  hide_cursor = true
+  no_fade_in = false
+  grace = 0
+  disable_loading_bar = true
+}
+
+# BACKGROUND
+background {
+  monitor =
+  path = $HOME/Pictures/reze/reze.png
+  blur_passes = 3
+  blur_size = 7
+  noise = 0.0117
+  contrast = 0.8916
+  brightness = 0.8172
+  vibrancy = 0.1696
+  vibrancy_darkness = 0.0
+  color = $base
+}
+
+# TIME
+label {
+  monitor =
+  text = $TIME
+  color = $text
+  font_size = 120
+  font_family = $font
+  position = 0, 300
+  halign = center
+  valign = center
+}
+
+# DATE
+label {
+  monitor =
+  text = cmd[update:43200000] date +"%A, %d %B %Y"
+  color = $text
+  font_size = 30
+  font_family = $font
+  position = 0, 200
+  halign = center
+  valign = center
+}
+
+# USER AVATAR (Center)
+image {
+  monitor =
+  path = $HOME/.face
+  size = 120
+  border_color = rgba(255, 255, 255, 0.1)
+  position = 0, 50
+  halign = center
+  valign = center
+}
+
+# INPUT FIELD (Center)
+input-field {
+  monitor =
+  size = 300, 60
+  outline_thickness = 2
+  dots_size = 0.2
+  dots_spacing = 0.2
+  dots_center = true
+  outer_color = rgba(255, 255, 255, 0.1)
+  inner_color = rgba(0, 0, 0, 0.2)
+  font_color = $text
+  fade_on_empty = false
+  placeholder_text = <span foreground="##$textAlpha"><i>󰌾 Logged in as </i><span foreground="##$accentAlpha">$USER</span></span>
+  hide_input = false
+  check_color = $accent
+  fail_color = $red
+  fail_text = <i>$FAIL <b>($ATTEMPTS)</b></i>
+  capslock_color = $yellow
+  position = 0, -60
+  halign = center
+  valign = center
+}
+
+# --- MUSIC DASHBOARD (TOP RIGHT) ---
+
+# ALBUM ART (At the very top right, 80px high, adjusted -3px for perfect alignment)
+image {
+    monitor =
+    path = /tmp/hyprlock_art.png
+    size = 80
+    rounding = 15
+    border_color = rgba(255, 255, 255, 0.1)
+    reload_time = 2
+    reload_cmd = ~/.config/hypr/scripts/album_art.sh
+    position = -20, -17
+    halign = right
+    valign = top
+}
+
+# MUSIC TEXT BOX (To the left of the image, same height)
+shape {
+    monitor =
+    size = 300, 80
+    color = rgba(0, 0, 0, 0.3)
+    rounding = 15
+    border_size = 1
+    border_color = rgba(255, 255, 255, 0.1)
+    position = -110, -20
+    halign = right
+    valign = top
+}
+
+# MUSIC TEXT (Right aligned and vertically centered inside the 80px box)
+label {
+    monitor =
+    text = cmd[update:1000] ~/.config/hypr/scripts/songdetail.sh
+    color = $text
+    font_size = 14
+    font_family = $font
+    position = -125, -37
+    halign = right
+    valign = top
+    text_align = right
+}
+
+# --- STATUS DASHBOARD (BOTTOM RIGHT) ---
+
+# SYSTEM INFO BOX (Vertical stack container)
+shape {
+    monitor =
+    size = 300, 100
+    color = rgba(0, 0, 0, 0.3)
+    rounding = 15
+    border_size = 1
+    border_color = rgba(255, 255, 255, 0.1)
+    position = -20, 20
+    halign = right
+    valign = bottom
+}
+
+# SYSTEM INFO TEXT (3 lines, top of each other, right aligned)
+label {
+    monitor =
+    text = cmd[update:5000] ~/.config/hypr/scripts/status_info.sh
+    color = $text
+    font_size = 14
+    font_family = $font
+    position = -35, 35
+    halign = right
+    valign = bottom
+    text_align = right
+}

hypr/hyprlock/battery.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# Get the current battery percentage
+battery_percentage=$(cat /sys/class/power_supply/BAT0/capacity)
+
+# Get the battery status (Charging or Discharging)
+battery_status=$(cat /sys/class/power_supply/BAT0/status)
+
+# Define the battery icons for each 10% segment
+battery_icons=("󰂃" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰁹")
+
+# Define the charging icon
+charging_icon="󰂄"
+
+# Calculate the index for the icon array
+# Ensure the index is within bounds (0 to 9) for battery percentages 0 to 100
+icon_index=$((battery_percentage / 10))
+
+# If the battery is 100%, use the last icon (index 9)
+if [ "$battery_percentage" -eq 100 ]; then
+    icon_index=9
+fi
+
+# Get the corresponding icon
+battery_icon=${battery_icons[$icon_index]}
+
+# Check if the battery is charging
+if [ "$battery_status" = "Charging" ]; then
+    battery_icon="$charging_icon"
+fi
+
+# Output the battery percentage and icon
+echo "$battery_percentage% $battery_icon"

hypr/hyprlock/bluetooth.sh

@@ -0,0 +1,47 @@
+#!/bin/bash
+
+# Path to the Hyprland configuration file
+config_file="$HOME/.config/hypr/hyprlock.conf"
+
+# Read the bt-mode value from the configuration file
+bt_mode=$(grep -oP '^\$bt-mode\s*=\s*\K\S+' ~/.config/hypr/hyprlock.conf)
+
+# Get Bluetooth power status
+bluetooth_status=$(bluetoothctl show | grep "Powered:" | awk '{print $2}')
+
+# Check if Bluetooth is powered on
+if [ "$bluetooth_status" != "yes" ]; then
+    echo "󰂯 Bluetooth Off"
+    exit 0
+fi
+
+# Initialize connected devices
+connected_devices=$(echo "$connected_devices" | sed 's/[[:space:]]*$//')
+
+# Process Bluetooth devices
+while read -r line; do
+    echo "Processing line: $line" >&2
+    device_mac=$(echo "$line" | awk '{print $2}')
+    device_name=$(echo "$line" | cut -d' ' -f3-)
+    echo "Device MAC: $device_mac" >&2
+    echo "Device Name: $device_name" >&2
+    if bluetoothctl info "$device_mac" | grep -q "Connected: yes"; then
+        connected_devices+="$device_name "
+    fi
+    echo "Finished processing $device_mac" >&2
+    echo "---" >&2
+done < <(bluetoothctl devices)
+
+# If no connected devices, show "No Devices"
+if [ -z "$connected_devices" ]; then
+    echo "󰂲 No Devices"
+    exit 0
+fi
+
+# Display output based on bt-mode
+if [ "$bt_mode" = "true" ]; then
+    echo "󰂯 $connected_devices"
+else
+    echo "󰂯 Connected"
+fi
+

hypr/hyprlock/change_wallpaper.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Only works if you use SWWW for your wallpapers
+
+SWWW_DIR="$HOME/.cache/swww/"
+HYPRLOCK="$HOME/.config/hypr/hyprlock.conf"
+
+# Get a Monitor Cache File
+FIRST_FILE=$(find "$SWWW_DIR" -type f | head -n 1)
+
+# Check if SWWW file exists
+if [ -n "$FIRST_FILE" ] && [ -f "$FIRST_FILE" ]; then
+    WALLPAPER=$(sed -n '2p' "$FIRST_FILE")
+
+    sed -i "s|^\(\$wallpaper[[:space:]]*=[[:space:]]*\).*|\1$WALLPAPER # (screenshot or /path/to/your/wallpaper.jpg)|" "$HYPRLOCK"
+    echo "Wallpaper path updated to $WALLPAPER"
+    exit 0
+fi
+
+# Error
+echo "Fehler: kein Wallpaper gefunden."
+exit 1

hypr/hyprlock/greeting.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# Set your Username
+# username="TamarindX"
+
+# Read the username alias from hyprlock.conf
+username=$(grep -oP '^\$USER\s*=\s*\K\S+' ~/.config/hypr/hyprlock.conf)
+
+# Check if the username was successfully extracted
+if [ -z "$username" ]; then
+  echo "Username not found in hyprlock.conf."
+  exit 1
+fi
+
+# Get the current hour
+hour=$(date +%H)
+
+# Determine the greeting based on the time
+if   [ "$hour" -ge 5  ] && [ "$hour" -lt 12 ]; then
+    greeting="Good Morning"
+elif [ "$hour" -ge 12 ] && [ "$hour" -lt 17 ]; then
+    greeting="Good Afternoon"
+elif [ "$hour" -ge 17 ] && [ "$hour" -lt 21 ]; then
+    greeting="Good Evening"
+elif [ "$hour" -ge 21 ] && [ "$hour" -lt 24 ]; then
+    greeting="Good Night"
+else
+    greeting="GO TO SLEEP!"
+fi
+
+# Output the combined text
+echo -e "Hello, $username! $greeting"

hypr/hyprlock/network.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+# Set this variable to control the output
+# Set to "true" to show SSID, "false" to show "Connected"
+# show_ssid=false
+
+# Read the wifi-mode alias from hyprlock.conf
+show_ssid=$(grep -oP '^\$wifi-mode\s*=\s*\K\S+' ~/.config/hypr/hyprlock.conf)
+
+# Check if the SSID was successfully extracted else fallback?!
+if [ -z "$show_ssid" ]; then
+  show_ssid=false
+fi
+
+# Check if any Ethernet connection is active
+ethernet_connected=$(nmcli -t -f DEVICE,TYPE,STATE dev | grep -E 'ethernet:connected')
+
+# If Ethernet
+if [ -n "$ethernet_connected" ]; then
+    echo "󰈀  Ethernet"
+    exit 0
+fi
+
+# Get Wi-Fi connection status
+wifi_status=$(nmcli -t -f WIFI g)
+
+# Check if Wi-Fi is enabled
+if [ "$wifi_status" != "enabled" ]; then
+    echo "󰤮  Wi-Fi Off"
+    exit 0
+fi
+
+# Get active Wi-Fi connection details
+wifi_info=$(nmcli -t -f ACTIVE,SSID,SIGNAL dev wifi | grep '^yes')
+
+# If no active connection, show "Disconnected"
+if [ -z "$wifi_info" ]; then
+    echo "󰤮  No Wi-Fi"
+    exit 0
+fi
+
+# Extract SSID
+ssid=$(echo "$wifi_info" | cut -d':' -f2)
+
+# Extract signal strength
+signal_strength=$(echo "$wifi_info" | cut -d':' -f3)
+
+# Define Wi-Fi icons based on signal strength
+wifi_icons=("󰤯" "󰤟" "󰤢" "󰤥" "󰤨") # From low to high signal
+
+# Clamp signal strength between 0 and 100
+signal_strength=$((signal_strength < 0 ? 0 : (signal_strength > 100 ? 100 : signal_strength)))
+
+# Calculate the icon index based on signal strength
+icon_index=$((signal_strength / 25))
+
+# Get the corresponding icon
+wifi_icon=${wifi_icons[$icon_index]}
+
+# Output based on show_ssid variable
+if [ "$show_ssid" = true ]; then
+    echo "$wifi_icon  $ssid"
+else
+    echo "$wifi_icon  Connected"
+fi

hypr/hyprlock/playerctl.sh

@@ -0,0 +1,116 @@
+#!/bin/bash
+
+if [ $# -eq 0 ]; then
+	echo "Usage: $0 --title | --artist | --album | --source | --source-symbol"
+	exit 1
+fi
+
+# Function to get metadata using playerctl
+get_metadata() {
+	key=$1
+	playerctl metadata --player=%any,chromium,firefox --format "{{ $key }}" 2>/dev/null
+}
+
+# Check for arguments
+
+# Function to determine the source and return an icon and text
+get_source_info_symbol() {
+	trackid=$(get_metadata "mpris:trackid")
+	if [[ "$trackid" == *"firefox"* ]]; then
+		echo -e "󰈹"
+	elif [[ "$trackid" == *"spotify"* ]]; then
+		echo -e ""
+	elif [[ "$trackid" == *"chromium"* ]]; then
+		echo -e ""
+	else
+		echo ""
+	fi
+}
+
+get_source_info() {
+	trackid=$(get_metadata "mpris:trackid")
+	if [[ "$trackid" == *"firefox"* ]]; then
+		echo -e "Firefox"
+	elif [[ "$trackid" == *"spotify"* ]]; then
+		echo -e "Spotify"
+	elif [[ "$trackid" == *"chromium"* ]]; then
+		echo -e "Chrome"
+	else
+		echo ""
+	fi
+}
+
+# Function to truncate text with ellipsis if necessary
+truncate_with_ellipsis() {
+	text=$1
+	max_length=$2
+	if [ ${#text} -gt $max_length ]; then
+		echo "${text:0:$((max_length - 3))}..."
+	else
+		echo "$text"
+	fi
+}
+
+# Parse the argument
+case "$1" in
+--title)
+	title=$(get_metadata "xesam:title")
+	if [ -z "$title" ]; then
+		echo ""
+	else
+		truncate_with_ellipsis "$title" 28 # Limit the output to 50 characters
+	fi
+	;;
+--artist)
+	artist=$(get_metadata "xesam:artist")
+	if [ -z "$artist" ]; then
+		echo ""
+	else
+		truncate_with_ellipsis "$artist" 28 # Limit the output to 50 characters
+	fi
+	;;
+--status-symbol)
+	status=$(playerctl status 2>/dev/null)
+	if [[ $status == "Playing" ]]; then
+		echo "󰎆"
+	elif [[ $status == "Paused" ]]; then
+		echo "󰏥"
+	else
+		echo ""
+	fi
+	;;
+--status)
+	status=$(playerctl status 2>/dev/null)
+	if [[ $status == "Playing" ]]; then
+		echo "Playing Now"
+	elif [[ $status == "Paused" ]]; then
+		echo "Paused"
+	else
+		echo ""
+	fi
+	;;
+--album)
+	album=$(playerctl metadata --player=%any,chromium,firefox --format "{{ xesam:album }}" 2>/dev/null)
+	if [[ -n $album ]]; then
+		echo "$album"
+	else
+		status=$(playerctl status 2>/dev/null)
+		if [[ -n $status ]]; then
+			echo "Not album"
+		else
+			truncate_with_ellipsis "$album" 28 # Limit the output to 50 characters
+		fi
+	fi
+	;;
+--source-symbol)
+	get_source_info_symbol
+	;;
+--source)
+	get_source_info
+	;;
+*)
+	echo "Invalid option: $1"
+	echo "Usage: $0 --title | --artist | --album | --source | --source-symbol"
+	exit 1
+	;;
+esac

hypr/hyprlock/weatherinfo.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Get location data using IP Geolocation
+
+# Recommended with API, but you can try w/o API [IPINFO.IO]
+# API_TOKEN="YOUR_API_TOKEN"
+# location_data=$(curl -s "https://ipinfo.io?token=$API_TOKEN" 2>/dev/null)
+# location_data=$(curl -s https://ipinfo.io 2>/dev/null) #[Limited requests. Require API to send 50k request/month]
+
+# Extract city and country code (ISO 3166-1 alpha-2 code)
+# CITY=$(echo "$location_data" | jq -r '.city // empty')
+# COUNTRY=$(echo "$location_data" | jq -r '.country // empty')
+
+# IPINFO Alternative [IP-API.COM]
+location_data=$(curl -s "http://ip-api.com/json/" 2>/dev/null)
+
+# Extract city and country code
+CITY=$(echo "$location_data" | jq -r '.city // empty')
+COUNTRY=$(echo "$location_data" | jq -r '.countryCode // empty')
+# Visit http://ip-api.com/json/ to find other variables
+
+# HARDCODE Location
+# CITY=$(grep -oP '^\$CITY\s*=\s*\K.+' ~/.config/hypr/hyprlock.conf)
+# COUNTRY=$(grep -oP '^\$COUNTRY\s*=\s*\K.+' ~/.config/hypr/hyprlock.conf)
+
+# Check if CITY and COUNTRY are valid
+if [[ -n "$CITY" && -n "$COUNTRY" ]]; then
+    # Fetch weather info for the detected city from wttr.in
+    weather_info=$(curl -s "wttr.in/$CITY?format=%c+%C+%t" 2>/dev/null)
+
+    # Check if the weather info is valid
+    if [[ -n "$weather_info" ]]; then
+        echo "$COUNTRY, $CITY: $weather_info"
+    else
+        echo "Weather info unavailable for $COUNTRY, $CITY"
+    fi
+else
+    echo "Unable to determine your location"
+fi

hypr/hyprpaper.conf

@@ -1,5 +1,7 @@
 wallpaper {
 	monitor =
-	path = ~/Pictures/mandelbrot.png
+	path = ~/.wallpapers/takemi_1.jpg
-	fit_mode = fill
+	fit_mode = cover
 }
+
+splash = false

hypr/install.sh

@@ -0,0 +1,97 @@
+#!/bin/bash
+
+# Set paths
+CONFIG_DIR="$HOME/.config/hypr"
+BACKUP_DIR="$CONFIG_DIR/hyprlock-backup-$(date +%Y%m%d%H%M%S)"
+REPO_URL="https://github.com/Tamarindtype/googlish-hyprlock-theme.git"
+TEMP_DIR="$(mktemp -d)"
+
+read -p "Do you want to see every command executed? [y/N]: " choice
+choice=${choice,,}
+
+if [[ "$choice" == "y" ]]; then
+    SHOW_COMMANDS=true
+else
+    SHOW_COMMANDS=false
+fi
+
+run_cmd() {
+    local desc="$1"
+    local cmd="$2"
+
+    if [[ "$SHOW_COMMANDS" == true ]]; then 
+        echo -e "\n$desc"
+        echo "-> $cmd"
+        read -p "Run command? [Y/n]: " confirm
+        confirm=${confirm,,} 
+
+        if [[ "$confirm" == "n" ]]; then
+            echo "⏭ Skipped."
+        else
+            eval "$cmd"
+        fi
+    else
+        eval "$cmd"
+    fi
+}
+
+# Backup existing config
+if [ -d "$CONFIG_DIR/hyprlock" ] || [ -f "$CONFIG_DIR/hyprlock.conf" ]; then
+    read -p "Do you want to create a backup of your config? [Y/n]: " choice
+    choice=${choice,,}
+
+    if [[ "$choice" != "n" ]]; then
+        run_cmd "Creating backup folder" "mkdir -p \"$BACKUP_DIR\""
+        
+        if [ -d "$CONFIG_DIR/hyprlock" ]; then
+            run_cmd "Backing up folder" "mv \"$CONFIG_DIR/hyprlock\" \"$BACKUP_DIR/\""
+        fi
+
+        if [ -f "$CONFIG_DIR/hyprlock.conf" ]; then
+            run_cmd "Backing up file" "mv \"$CONFIG_DIR/hyprlock.conf\" \"$BACKUP_DIR/\""
+        fi
+    fi
+else
+    echo "No existing hyprlock config found. Skipping backup."
+fi
+
+# Clone the repo
+run_cmd "Cloning repository..." "git clone \"$REPO_URL\" \"$TEMP_DIR\""
+
+# Move files
+run_cmd "Creating config directory" "mkdir -p \"$CONFIG_DIR\""
+
+if [ -d "$TEMP_DIR/hyprlock" ]; then
+    run_cmd "Moving hyprlock folder" "mv \"$TEMP_DIR/hyprlock\" \"$CONFIG_DIR/\""
+fi
+
+if [ -f "$TEMP_DIR/hyprlock.conf" ]; then
+    run_cmd "Moving hyprlock.conf" "mv \"$TEMP_DIR/hyprlock.conf\" \"$CONFIG_DIR/\""
+fi
+
+# Make scripts executable
+if [ -d "$CONFIG_DIR/hyprlock" ]; then
+    run_cmd "Making scripts executable..." "chmod +x \"$CONFIG_DIR/hyprlock\"/*.sh"
+fi
+
+# Optional: Run hyprlock
+run_cmd "Running Hyprlock" "hyprlock"
+
+read -p "Do you want to install the 'hyprlock-change-wallpaper' command? [Y/n]: " choice
+choice=${choice,,}
+
+if [[ "$choice" != "n" ]]; then
+    run_cmd "Installing hyprlock-change-wallpaper shortcut" "sudo ln -sf $CONFIG_DIR/hyprlock/change_wallpaper.sh /usr/local/bin/hyprlock-change-wallpaper"
+    run_cmd "Make command runable" "chmod +x $CONFIG_DIR/hyprlock/change_wallpaper.sh"
+
+    if command -v hyprlock-change-wallpaper &>/dev/null; then
+        echo "hyprlock-change-wallpaper was succesfully installed"
+    else
+        echo "Error while installing hyprlock-change-wallpaper."
+    fi
+else
+    echo "⏭ installation of hyprlock-change-wallpaper skipped"
+fi
+
+# Cleanup
+run_cmd "Cleaning up temp files..." "rm -rf \"$TEMP_DIR\""

hypr/modules/autostart.conf

@@ -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,4 +19,3 @@ exec-once = uwsm app -- hyprpaper
 # exec-once = uwsm app -- /usr/lib/xdg-desktop-portal-hyprland
 exec-once = wl-paste --type text --watch cliphist store # Stores only text data
 exec-once = wl-paste --type image --watch cliphist store # Stores only image data
-exec-once = uwsm app -- ~/.cargo/bin/fluxo-rs daemon

hypr/modules/env.conf

@@ -10,8 +10,9 @@ env = XCURSOR_THEME,Bibata-Modern-Classic
 env = XDG_CURRENT_DESKTOP,Hyprland
 # env = debug:full_cm_proto,true
 env = QT_QPA_PLATFORMTHEME,qt6ct
-# env = LIBVA_DRIVER_NAME,radeonsi
+env = LIBVA_DRIVER_NAME,radeonsi
-# env = VDPAU_DRIVER,radeonsi
+env = VDPAU_DRIVER,radeonsi
+env = AMD_VULKAN_ICD,RADV
 env = MOZ_ENABLE_WAYLAND,1
 env = ELECTRON_OZONE_PLATFORM_HINT,wayland
 env = EDITOR,nvim

hypr/modules/input.conf

@@ -1,13 +1,13 @@
 
 # https://wiki.hyprland.org/Configuring/Variables/#input
 input {
+    # index 0 = dvorak-intl (default), index 1 = us-intl
+    # switch with $mainMod ALT, SPACE (see keybinds.conf)
     kb_layout = us,us
-    kb_variant = dvorak-intl, intl
+    kb_variant = dvorak-intl,intl
-    # kb_variant = intl
     kb_model =
-    kb_options =
     kb_rules =
-	kb_options = ctrl:nocaps
+    kb_options = caps:backspace
 
     follow_mouse = 0
 
@@ -19,16 +19,14 @@ input {
     }
 }
 
+# Layouts are inherited from the global input block so that layout
+# switching applies to these too. Only bind resolution differs here.
 device {
 	name = at-translated-set-2-keyboard
 	resolve_binds_by_sym = 1
-    kb_layout = us
-    kb_variant = dvorak-intl
 }
 
 device {
 	name = topre-corporation-hhkb-professional
 	resolve_binds_by_sym = 1
-    kb_layout = us
-    kb_variant = dvorak-intl
 }

hypr/modules/keybinds.conf

@@ -6,20 +6,32 @@ bindl=,switch:off:Lid Switch,exec,~/.config/hypr/scripts/lid_handler.sh open
 
 bindr = ALT, m, exec, cliphist list | fuzzel --dmenu | cliphist decode | wl-copy
 bind = , PRINT, exec, grim -g "$(slurp)" - | wl-copy
+bind = SHIFT, PRINT, exec, grim -g "$(slurp)" ~/Pictures/Screenshots/$(date +'%Y-%m-%d_%H-%M-%S').png
+bind = CTRL, PRINT, exec, ~/.config/hypr/scripts/screenshot_window.sh copy
+bind = CTRL SHIFT, PRINT, exec, ~/.config/hypr/scripts/screenshot_window.sh save
 bindr = ALT SHIFT, z, exec, ~/.config/hypr/scripts/replay-ctrl.sh save
 bindr = ALT, z, exec, ~/.config/hypr/scripts/replay-ctrl.sh toggle
 bindr = ALT SHIFT, c, exec, ~/.config/hypr/scripts/droidcam-ctrl.sh toggle
 
 # general binds
+bind = $mainMod, M, exec, pdfs-prompt --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
-bind = $mainMod, t, togglesplit, # dwindle
+
+# Takemi shell
+bind = $mainMod SHIFT, N, exec, qs ipc call shell toggleDnd
+bind = $mainMod CTRL SHIFT, N, exec, qs ipc call shell clearNotifications
+bind = $mainMod SHIFT, R, exec, qs ipc call shell reloadConfig
+# cycle keyboard layout (dvorak-intl <-> us-intl)
+bind = $mainMod ALT, SPACE, exec, hyprctl switchxkblayout all next
+# bind = $mainMod, t, togglesplit, # dwindle
 bind = $mainMod, n, togglegroup
 
 # Move focus with mainMod + arrow keys
@@ -77,12 +89,12 @@ bindm = $mainMod, mouse:272, movewindow
 bindm = $mainMod, mouse:273, resizewindow
 
 # Laptop multimedia keys for volume and LCD brightness
-bindel = ,XF86AudioRaiseVolume, exec, wpctl set-volume -l 1.0 @DEFAULT_AUDIO_SINK@ 5%+
+bindel = ,XF86AudioRaiseVolume, exec, fluxo vol up 5
-bindel = ,XF86AudioLowerVolume, exec, wpctl set-volume -l 1.0 @DEFAULT_AUDIO_SINK@ 5%-
+bindel = ,XF86AudioLowerVolume, exec, fluxo vol down 5
-bindel = ,XF86AudioMute, exec, wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle
+bindel = ,XF86AudioMute, exec, fluxo vol mute
-bindel = ,XF86AudioMicMute, exec, wpctl set-mute @DEFAULT_AUDIO_SOURCE@ toggle
+bindel = ,XF86AudioMicMute, exec, fluxo mic mute
-bindel = ,XF86MonBrightnessUp, exec, brightnessctl set 5%+
+bindel = ,XF86MonBrightnessUp, exec, brightnessctl s +10%
-bindel = ,XF86MonBrightnessDown, exec, brightnessctl set 5%-
+bindel = ,XF86MonBrightnessDown, exec, brightnessctl s 10%-
 
 # Requires playerctl
 bindl = , XF86AudioNext, exec, playerctl next

hypr/modules/monitors.conf

@@ -2,7 +2,11 @@
 # laptop screen
 monitor = eDP-1, 1920x1080@60, 0x0, 1
 # samsung home monitor
-monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@144, 0x-1440, 1
+# monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 1280x720@240, 0x0, 1
+monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@240, -2560x0, 1
+# monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@144, 0x0, 1
+# monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 1920x1080@144, 0x0, 1
+# monitor = desc:Samsung Electric Company LC27G7xT H4ZRA00734, 2560x1440@60, 0x0, 1
 
 
 # lid_state fallback

hypr/modules/plugins.conf

@@ -1,38 +0,0 @@
-exec-once = hyprpm reload -n
-
-# plugin:hyprfocus {
-# 	enabled = yes
-# 	animate_floating = yes
-# 	animate_workspacechange = yes
-# 	focus_animation = shrink
-# 	# Beziers for focus animations
-# 	bezier = bezIn, 0.5,0.0,1.0,0.5
-# 	bezier = bezOut, 0.0,0.5,0.5,1.0
-# 	bezier = overshot, 0.05, 0.9, 0.1, 1.05
-# 	bezier = smoothOut, 0.36, 0, 0.66, -0.56
-# 	bezier = smoothIn, 0.25, 1, 0.5, 1
-# 	bezier = realsmooth, 0.28,0.29,.69,1.08
-# 	# Flash settings
-# 	flash {
-# 		flash_opacity = 0.95
-# 		in_bezier = realsmooth
-# 		in_speed = 0.5
-# 		out_bezier = realsmooth
-# 		out_speed = 3
-# 	}
-# 	# Shrink settings
-# 	shrink {
-# 		shrink_percentage = 0.95
-# 		in_bezier = realsmooth
-# 		in_speed = 1
-# 		out_bezier = realsmooth
-# 		out_speed = 2
-# 	}
-# }
-# 
-# plugin:csgo-vulkan-fix {
-# 	res_w = 1280
-# 	res_h = 960
-# 	class = gamescope
-# 	fix_mouse = true
-# }

hypr/modules/takemi.conf

@@ -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

hypr/modules/theme.conf

@@ -1,22 +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 = rgba(cba6f7ee) rgba(f38ba8ee) 45deg
+    # here — a gradient into a second colour is what put blue in the border.
-    col.active_border = rgb($mauveAlpha) rgb($blueAlpha) 30deg
+    col.active_border = $accent $accentDim 135deg
-    col.inactive_border = rgb($surface2Alpha)
+    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
@@ -27,64 +25,72 @@ general {
 
 # https://wiki.hyprland.org/Configuring/Variables/#decoration
 decoration {
-    rounding = 4
+    # Persona 5 has no rounded corners. Neither do we.
-    rounding_power = 1
+    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 = fadeOut, 1, 1.46, almostLinear
-    animation = fade, 1, 3.03, quick
-    animation = layers, 1, 3.81, easeOutQuint
-    animation = layersIn, 1, 4, easeOutQuint, fade
-    animation = layersOut, 1, 1.5, linear, fade
-    animation = fadeLayersIn, 1, 1.79, almostLinear
-    animation = fadeLayersOut, 1, 1.39, almostLinear
-    animation = workspaces, 1, 1.94, almostLinear, fade
-    animation = workspacesIn, 1, 1.21, almostLinear, fade
-    animation = workspacesOut, 1, 1.94, almostLinear, fade
-}
 
-# See https://wiki.hyprland.org/Configuring/Dwindle-Layout/ for more
+    animation = fade,          1, 3,    snap
-dwindle {
+    animation = fadeIn,        1, 2.4,  snap
-    pseudotile = true # Master switch for pseudotiling. Enabling is bound to mainMod + P in the keybinds section below
+    animation = fadeOut,       1, 1.8,  hard
-    preserve_split = true # You probably want this
+    animation = fadeSwitch,    1, 2,    snap
+    animation = fadeShadow,    1, 3,    snap
+    animation = fadeDim,       1, 2.4,  snap
+
+    animation = layers,        1, 3,    snap
+    animation = layersIn,      1, 3,    snap, slide
+    animation = layersOut,     1, 2,    hard, slide
+
+    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
@@ -92,22 +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
-	vrr = 1
+    # 0 = off, 1 = always, 2 = fullscreen only (G7 is a 240Hz VRR panel)
-	font_family = FiraCode Nerd Font
+    vrr = 2
+    font_family = FiraCode Nerd Font
+    background_color = $base
+    focus_on_activate = true
 }
 
 group {
-	groupbar {
+    col.border_active = $accent $accentDim 135deg
-		font_size = 14
+    col.border_inactive = $outline
-		text_color = $text
+
-		text_color_inactive = $text
+    groupbar {
-		col.active = $maroon
+        font_family = JetBrainsMono Nerd Font
-		col.inactive = $surface2
+        font_size = 11
-	}
+
-    col.border_active = $maroon $teal 30deg
+        height = 24
-    col.border_inactive = $surface2
+        gradients = false
+
+        # --- Active Tab ---
+        col.active = $accent
+        text_color = $ink
+
+        # --- Inactive Tab ---
+        col.inactive = $surface
+        text_color_inactive = $muted
+
+        indicator_height = 3
+    }
 }

hypr/modules/window_rules.conf

@@ -5,8 +5,8 @@
 # VARIABLES
 # ==========================================
 # Dialogs and utility apps that should float in the center
-$dialog_titles = ^(Open Form|Open File|Select a File|Choose a file|Open Workspace|Choose Directory|Save As|Save File|branchdialog|pinentry-gtk-2|Confirm to replace files|File Operation Progress|Open Files|Anmelden – Google Konten — Zen Browser)$
+$dialog_titles = ^(Open Form|Open File|Select a File|Choose a file|Open Workspace|Choose Directory.*|Save As.*|Save File.*|branchdialog|pinentry-gtk-2|Confirm to replace files|File Operation Progress|Open Files.*|Anmelden.*|File Upload.*|TRuDI-Export laden)$
-$dialog_classes = ^(pavucontrol|blueman-manager|nm-connection-editor|org.pulseaudio.pavucontrol)$
+$dialog_classes = ^(pavucontrol|blueman-manager|nm-connection-editor|org.pulseaudio.pavucontrol|io.narl.proton-drive-linux-prompt)$
 
 # App classes
 $steam = ^(steam)$
@@ -75,3 +75,15 @@ windowrule = no_blur 1, match:class $steam, match:title negative:^(Steam)$
 
 # Allow tearing for games started with Gamescope
 windowrule = immediate 1, match:class $gamescope
+
+
+# Layer rules
+
+# waybar blur
+layerrule = blur on, match:namespace bottom 
+layerrule = blur on, match:namespace top
+layerrule = ignore_alpha 0.5, match:namespace bottom
+layerrule = ignore_alpha 0.5, match:namespace top
+# launcher blur
+layerrule = blur on, match:namespace launcher
+layerrule = ignore_alpha 0.5, match:namespace launcher

hypr/scripts/album_art.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+url=$(playerctl metadata mpris:artUrl 2>/dev/null)
+if [[ "$url" == file://* ]]; then
+    cp "${url#file://}" /tmp/hyprlock_art.png
+    echo "/tmp/hyprlock_art.png"
+elif [[ "$url" == http* ]]; then
+    curl -s "$url" -o /tmp/hyprlock_art.png
+    echo "/tmp/hyprlock_art.png"
+else
+    echo "$HOME/.config/hypr/catppuccin-hyprland/assets/mocha.webp"
+fi

hypr/scripts/lid_handler.sh

@@ -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

hypr/scripts/screenshot_window.sh

@@ -0,0 +1,49 @@
+#!/bin/sh
+
+# Get active window info in JSON format
+WINDOW_INFO=$(hyprctl activewindow -j)
+
+# Extract window class name (app name)
+APP_NAME=$(echo "$WINDOW_INFO" | jq -r '.class')
+
+# If app name is empty, null, or invalid, default to "unknown"
+if [ -z "$APP_NAME" ] || [ "$APP_NAME" = "null" ]; then
+    APP_NAME="unknown"
+fi
+
+# Sanitize app name: convert to lowercase and replace characters that aren't letters, numbers, hyphens, or underscores with underscores
+APP_NAME_SAFE=$(echo "$APP_NAME" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9_-]/_/g')
+
+# Extract geometry: "x,y wxh"
+GEOMETRY=$(echo "$WINDOW_INFO" | jq -r '"\(.at[0]),\(.at[1]) \(.size[0])x\(.size[1])"')
+
+# Check if geometry is valid
+if [ -z "$GEOMETRY" ] || [ "$GEOMETRY" = "null,null nullxnull" ]; then
+    notify-send -u normal "Screenshot Error" "No active window found to screenshot."
+    exit 1
+fi
+
+ACTION=$1
+
+case "$ACTION" in
+    copy)
+        grim -g "$GEOMETRY" - | wl-copy
+        notify-send -u low "Screenshot" "Active window ($APP_NAME) copied to clipboard"
+        ;;
+    save)
+        SCREENSHOTS_DIR="$HOME/Pictures/Screenshots"
+        APP_DIR="$SCREENSHOTS_DIR/$APP_NAME_SAFE"
+        mkdir -p "$APP_DIR"
+        FILE_NAME="$(date +'%Y-%m-%d_%H-%M-%S').png"
+        FILE_PATH="$APP_DIR/$FILE_NAME"
+        
+        grim -g "$GEOMETRY" "$FILE_PATH"
+        notify-send -u low "Screenshot" "Saved active window to $APP_NAME_SAFE/$FILE_NAME"
+        ;;
+    *)
+        echo "Usage: $0 {copy|save}"
+        exit 1
+        ;;
+esac
+
+exit 0

hypr/scripts/songdetail.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+status=$(playerctl status 2>/dev/null)
+if [ "$status" = "Playing" ] || [ "$status" = "Paused" ]; then
+  title=$(playerctl metadata title | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g')
+  artist=$(playerctl metadata artist | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g')
+  if [ ${#title} -gt 25 ]; then title="${title:0:22}..."; fi
+  if [ ${#artist} -gt 25 ]; then artist="${artist:0:22}..."; fi
+  echo "<span weight='bold' foreground='#cba6f7'>$title</span>"
+  echo "<span foreground='#bac2de' size='small'>$artist</span>"
+else
+  echo "<span weight='bold' foreground='#cdd6f4'>No Media</span>"
+  echo "<span size='small' foreground='#a6adc8'>Idling</span>"
+fi

hypr/scripts/status_info.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+# 1. Network
+net=$(nmcli -t -f active,ssid dev wifi | grep '^yes' | cut -d: -f2 || echo 'Offline')
+if [ ${#net} -gt 15 ]; then net="${net:0:12}..."; fi
+# 2. Battery
+bat_cap=$(cat /sys/class/power_supply/BAT0/capacity)
+bat_stat=$(cat /sys/class/power_supply/BAT0/status)
+if [ "$bat_stat" = "Charging" ]; then icon="󰂄"; else icon="󰁹"; fi
+# 3. Load
+cpu=$(top -bn1 | grep "Cpu(s)" | sed "s/.*, *\([0-9.]*\)%* id.*/\1/" | awk '{print 100 - $1}' | cut -d. -f1)
+# Output 3 lines for the vertical stack
+echo "󰖩  $net"
+echo "$icon  $bat_cap% ($bat_stat)"
+echo "󰍛  Load: $cpu%"

mimeapps.list

@@ -2,21 +2,26 @@
 application/pdf=org.pwmt.zathura-pdf-poppler.desktop
 image/jpeg=feh.desktop
 image/png=feh.desktop
-x-scheme-handler/http=zen.desktop
+x-scheme-handler/http=brave-browser.desktop
-x-scheme-handler/https=zen.desktop
+x-scheme-handler/https=brave-browser.desktop
 x-scheme-handler/chrome=zen.desktop
-text/html=zen.desktop
+text/html=brave-browser.desktop
 application/x-extension-htm=zen.desktop
 application/x-extension-html=zen.desktop
 application/x-extension-shtml=zen.desktop
 application/xhtml+xml=zen.desktop
 application/x-extension-xhtml=zen.desktop
 application/x-extension-xht=zen.desktop
-x-scheme-handler/about=google-chrome.desktop
+x-scheme-handler/about=brave-browser.desktop
-x-scheme-handler/unknown=google-chrome.desktop
+x-scheme-handler/unknown=brave-browser.desktop
 application/vnd.openxmlformats-officedocument.wordprocessingml.document=libreoffice-writer.desktop
 x-scheme-handler/ror2mm=r2modman.desktop
 image/webp=feh.desktop
+x-scheme-handler/claude-cli=claude-code-url-handler.desktop
+x-scheme-handler/msteams=teams-for-linux.desktop
+x-scheme-handler/slack=slack.desktop
+audio/flac=mpv.desktop
+x-scheme-handler/codex=ChatGPT.desktop
 
 [Added Associations]
 application/pdf=org.pwmt.zathura-pdf-poppler.desktop;
@@ -28,3 +33,10 @@ text/html=zen.desktop;
 x-scheme-handler/chrome=zen.desktop;
 application/vnd.openxmlformats-officedocument.wordprocessingml.document=libreoffice-writer.desktop;
 image/webp=feh.desktop;
+application/x-extension-htm=zen.desktop;
+application/x-extension-html=zen.desktop;
+application/x-extension-shtml=zen.desktop;
+application/xhtml+xml=zen.desktop;
+application/x-extension-xhtml=zen.desktop;
+application/x-extension-xht=zen.desktop;
+audio/flac=mpv.desktop;

plans/01-takemi-design-hierarchy.md

@@ -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.

quickshell/README.md

@@ -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.

quickshell/bar/ActiveWindow.qml

@@ -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
+        }
+    }
+}

quickshell/bar/Bar.qml

@@ -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)
+        }
+    }
+}

quickshell/bar/BarPill.qml

@@ -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)
+    }
+}

quickshell/bar/Clock.qml

@@ -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
+    }
+}

quickshell/bar/MediaPill.qml

@@ -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
+    }
+}

quickshell/bar/NotifButton.qml

@@ -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
+    }
+}

quickshell/bar/PowerButton.qml

@@ -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 }
+        }
+    }
+}

quickshell/bar/Rail.qml

@@ -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
+    }
+}

quickshell/bar/RailIcon.qml

@@ -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
+    }
+}

quickshell/bar/Resources.qml

@@ -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
+    }
+}

quickshell/bar/Sigil.qml

@@ -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(); }
+    }
+}

quickshell/bar/Status.qml

@@ -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
+    }
+}

quickshell/bar/StatusIcon.qml

@@ -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)
+    }
+}

quickshell/bar/Tray.qml

@@ -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
+            }
+        }
+    }
+}

quickshell/bar/Workspaces.qml

@@ -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)
+                }
+            }
+        }
+    }
+}

quickshell/components/ChromeSurface.qml

@@ -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
+}

quickshell/components/Gauge.qml

@@ -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
+        }
+    }
+}

quickshell/components/Geom.qml

@@ -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;
+    }
+}

quickshell/components/Icon.qml

@@ -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
+        }
+    }
+}

quickshell/components/Marquee.qml

@@ -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(); }
+}

quickshell/components/MaskedArt.qml

@@ -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
+}

quickshell/components/MeterBar.qml

@@ -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 }
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/components/MetricRow.qml

@@ -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
+    }
+}

quickshell/components/NotifCard.qml

@@ -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()
+    }
+}

quickshell/components/P5Backdrop.qml

@@ -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 }
+    }
+}

quickshell/components/P5Button.qml

@@ -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)
+}

quickshell/components/P5Panel.qml

@@ -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
+    }
+}

quickshell/components/P5Slider.qml

@@ -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;
+    }
+}

quickshell/components/P5Tooltip.qml

@@ -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
+            }
+        }
+    }
+}

quickshell/components/Popout.qml

@@ -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();
+        }
+    }
+}

quickshell/components/Skew.qml

@@ -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));
+            }
+        }
+    }
+}

quickshell/components/SplitText.qml

@@ -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
+        }
+    }
+}

quickshell/components/TintEffect.qml

@@ -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
+}

quickshell/config/PopupCoordinator.qml

@@ -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();
+    }
+}

quickshell/config/Theme.qml

@@ -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"
+}

quickshell/lock/Lock.qml

@@ -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
+        }
+    }
+}

quickshell/lock/LockFace.qml

@@ -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
+        }
+    }
+}

quickshell/lock/RailRow.qml

@@ -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
+            }
+        }
+    }
+}

quickshell/lockpreview.qml

@@ -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")
+        }
+    }
+}

quickshell/overlays/Osd.qml

@@ -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
+            }
+        }
+    }
+}

quickshell/overlays/PowerMenu.qml

@@ -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
+        }
+    }
+}

quickshell/overlays/Toasts.qml

@@ -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)
+                }
+            }
+        }
+    }
+}

quickshell/popouts/AudioInputBand.qml

@@ -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)
+    }
+}

quickshell/popouts/AudioOutputHero.qml

@@ -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)
+    }
+}