Merge branch 'main' into feat/llm-chat-tab

Reviewed-on: #158

.gitea/ISSUE_TEMPLATE/bug.yaml

@@ -0,0 +1,108 @@
+name: Bug Report
+about: Something broke
+title: "bug: "
+labels:
+    - bug
+
+body:
+    - type: textarea
+      id: description
+      attributes:
+          label: What happened
+          placeholder: Describe the bug
+      validations:
+          required: true
+
+    - type: textarea
+      id: expected
+      attributes:
+          label: What should happen
+          placeholder: Expected behavior
+      validations:
+          required: true
+
+    - type: textarea
+      id: steps
+      attributes:
+          label: Steps to reproduce
+          placeholder: |
+              1.
+              2.
+              3.
+          render: shell
+      validations:
+          required: true
+
+    - type: dropdown
+      id: os
+      attributes:
+          label: OS
+          options:
+              - NixOS
+              - Arch
+              - Debian / Ubuntu
+              - Fedora
+              - Alpine
+              - Artix
+              - Gentoo
+              - Other
+      validations:
+          required: false
+
+    - type: input
+      id: other-os
+      attributes:
+          label: Other OS (if "Other" above)
+          placeholder: e.g. Void, Gentoo, FreeBSD
+      validations:
+          required: false
+
+    - type: dropdown
+      id: init
+      attributes:
+          label: Init system
+          description: Relevant for UWSM configuration
+          options:
+              - systemd
+              - non-systemd (openrc / runit / s6 / ...)
+      validations:
+          required: false
+
+    - type: input
+      id: other-init
+      attributes:
+          label: Other init system (if "non-systemd" above)
+          placeholder: e.g. openrc, runit, s6, dinit
+      validations:
+          required: false
+
+    - type: input
+      id: qt-version
+      attributes:
+          label: Qt version
+          placeholder: 6.11.1
+      validations:
+          required: false
+
+    - type: input
+      id: commit
+      attributes:
+          label: Branch / commit
+          placeholder: main / abc1234
+      validations:
+          required: false
+
+    - type: textarea
+      id: logs
+      attributes:
+          label: Logs / backtrace / screenshots
+          render: shell
+      validations:
+          required: false
+
+    - type: textarea
+      id: workaround
+      attributes:
+          label: Found a workaround?
+      validations:
+          required: false

.gitea/ISSUE_TEMPLATE/feature.yaml

@@ -0,0 +1,51 @@
+name: Feature Request
+about: Idea or improvement
+title: "feat: "
+labels:
+  - enhancement
+
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: What's missing / annoying
+      placeholder: The use case or pain point
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: How should it work
+      placeholder: Describe the desired behavior
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Other approaches considered
+    validations:
+      required: false
+
+  - type: dropdown
+    id: scope
+    attributes:
+      label: Area
+      options:
+        - Core / Daemon
+        - UI / Components
+        - Plugin system
+        - CMake / Build
+        - CI / Tooling
+        - Documentation
+        - Other
+    validations:
+      required: false
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Mockups / references / notes
+    validations:
+      required: false

.gitea/PULL_REQUEST_TEMPLATE.yaml

@@ -0,0 +1,59 @@
+name: Pull Request
+about: Submit changes
+title: ""
+labels: []
+
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: What & why
+      placeholder: Describe the change and motivation
+    validations:
+      required: true
+
+  - type: input
+    id: issue
+    attributes:
+      label: Related issue
+      placeholder: "#123"
+    validations:
+      required: false
+
+  - type: dropdown
+    id: type
+    attributes:
+      label: Type
+      options:
+        - Bug fix
+        - New feature
+        - Refactor / style
+        - CI / build / tooling
+        - Documentation
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: tested
+    attributes:
+      label: Tested
+      options:
+        - label: Build succeeds
+        - label: Existing tests pass
+        - label: Manually verified
+
+  - type: textarea
+    id: breaking
+    attributes:
+      label: Breaking changes?
+      placeholder: API/ABI breakage? Migration path?
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      options:
+        - label: CI passes (format, lint, typecheck)
+        - label: Clean commits
+        - label: No new warnings
+        - label: Docs updated if needed

.gitea/workflows/python.yml

@@ -1,12 +1,15 @@
 name: Python
 
+env:
+    APT_DEPS: git python3 python3-pip python3-venv python3-gi python3-cairo python3-dbus python3-pyudev python3-psutil python3-evdev python3-yaml python3-xlib python3-pillow gir1.2-gtk-3.0
+
 on:
     pull_request:
 
 jobs:
-    fmt:
+    static:
-        runs-on: alpine
+        runs-on: debian
-        container: node:26-alpine
+        container: node:26-trixie-slim
 
         steps:
             - name: Checkout
@@ -14,10 +17,8 @@ jobs:
 
             - name: Install tools
               run: |
-                  apk add --no-cache \
+                  apt-get update
-                    git \
+                  apt-get install -y --no-install-recommends git python3 python3-pip python3-venv
-                    python3 \
-                    py3-pip
                   python3 -m venv .venv
                   . .venv/bin/activate
                   pip install --no-cache-dir ruff
@@ -27,32 +28,15 @@ jobs:
                   . .venv/bin/activate
                   ruff format --check .
 
-    lint:
-        runs-on: alpine
-        container: node:26-alpine
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git \
-                    python3 \
-                    py3-pip
-                  python3 -m venv .venv
-                  . .venv/bin/activate
-                  pip install --no-cache-dir ruff
-
             - name: Lint
               run: |
                   . .venv/bin/activate
                   ruff check .
 
-    test:
+    verify:
-        runs-on: alpine
+        if: always()
-        container: node:26-alpine
+        runs-on: debian
+        container: node:26-trixie-slim
 
         steps:
             - name: Checkout
@@ -60,20 +44,16 @@ jobs:
 
             - name: Install tools
               run: |
-                  apk add --no-cache \
+                  apt-get update
-                    git \
+                  apt-get install -y --no-install-recommends $APT_DEPS build-essential python3-dev
-                    python3 \
+                  python3 -m venv --system-site-packages .venv
-                    py3-pip \
-                    py3-pillow \
-                    build-base
-                  python3 -m venv .venv
                   . .venv/bin/activate
-                  pip install --no-cache-dir \
+                  pip install --no-cache-dir basedpyright nuitka .
-                    typer \
+
-                    pillow \
+            - name: Type check
-                    materialyoucolor \
+              run: |
-                    jinja2 \
+                  . .venv/bin/activate
-                    pytest
+                  basedpyright
 
             - name: Test
               run: |
@@ -81,29 +61,7 @@ jobs:
                   cd cli
                   python -m pytest tests/ -v
 
-    buildcheck:
-        runs-on: alpine
-        container: node:26-alpine
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git \
-                    python3 \
-                    py3-pip \
-                    build-base \
-                    python3-dev \
-                    gcc \
-                    g++
-                  python3 -m venv .venv
-                  . .venv/bin/activate
-                  pip install --no-cache-dir nuitka
-
             - name: Nuitka module check
               run: |
                   . .venv/bin/activate
-                  nuitka --module --include-package=zshell cli/src/zshell/
+                  nuitka --module --include-package=zshell cli/src/zshell/

.gitignore

@@ -15,3 +15,9 @@ dist/
 **/target/
 **/test-plugins/
 **/Charts/
+network-dev/
+**/zshell.build/
+**/zshell.dist/
+.opencode/
+run-agent.sh
+AGENTS.md

.prettierignore

@@ -1,3 +1,4 @@
 .venv/
 scripts/fzf.js
 scripts/fuzzysort.js
+scripts/settings-indexer.js

.qmlformat.ini

@@ -3,8 +3,9 @@ FunctionsSpacing=true
 IndentWidth=4
 MaxColumnWidth=-1
 NewlineType=native
-NormalizeOrder=true
+GroupAttributesTogether=false
 ObjectsSpacing=true
 SemicolonRule=always
+SingleLineEmptyObjects=true
 SortImports=false
 UseTabs=true

CMakeLists.txt

@@ -26,22 +26,36 @@ if(NOT DEFINED VERSION)
 	endif()
 endif()
 
+if(NOT DEFINED GIT_REVISION)
+	execute_process(COMMAND git rev-parse HEAD
+								WORKING_DIRECTORY "${CMAKE_SOURCE_DIR}"
+								OUTPUT_VARIABLE GIT_REVISION
+								OUTPUT_STRIP_TRAILING_WHITESPACE
+				)
+
+	if("${GIT_REVISION}" STREQUAL "")
+		message(FATAL_ERROR "GIT_REVISION is not set and failed to get from git")
+	endif()
+endif()
+
 set(VERSION "${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH}")
 
 project(ZShell VERSION ${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH})
 message(STATUS "ZShell version: ${VERSION}")
 
+include(GNUInstallDirs)
+
 set(CMAKE_CXX_STANDARD 20)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 set(CMAKE_CXX_EXTENSIONS OFF)
 set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
 set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
-set(ENABLE_MODULES "plugin;shell;m3shapes" CACHE STRING "Modules to build/install")
+set(ENABLE_MODULES "plugin;shell;cli;m3shapes" CACHE STRING "Modules to build/install")
 
-set(INSTALL_LIBDIR "usr/lib/ZShell" CACHE STRING "Library install dir")
+set(INSTALL_LIBDIR "${CMAKE_INSTALL_LIBDIR}/ZShell" CACHE STRING "Library install dir")
-set(INSTALL_QMLDIR "usr/lib/qt6/qml" CACHE STRING "QML install dir")
+set(INSTALL_QMLDIR "${CMAKE_INSTALL_LIBDIR}/qt6/qml" CACHE STRING "QML install dir")
-set(INSTALL_QSCONFDIR "etc/xdg/quickshell/zshell" CACHE STRING "Quickshell config install dir")
+set(INSTALL_QSCONFDIR "${CMAKE_INSTALL_SYSCONFDIR}/xdg/quickshell/zshell" CACHE STRING "Quickshell config install dir")
-set(INSTALL_GREETERCONFDIR "etc/xdg/quickshell/zshell-greeter" CACHE STRING "Quickshell greeter install dir")
+set(INSTALL_GREETERCONFDIR "${CMAKE_INSTALL_SYSCONFDIR}/xdg/quickshell/zshell-greeter" CACHE STRING "Quickshell greeter install dir")
 
 set(CMAKE_INSTALL_MESSAGE NEVER)
 
@@ -54,21 +68,7 @@ add_compile_options(
 )
 
 
-if("shell" IN_LIST ENABLE_MODULES)
+if("cli" IN_LIST ENABLE_MODULES)
-	# Build settings index
-	find_package(Python3 COMPONENTS Interpreter REQUIRED)
-	set(SETTINGS_INDEX_JSON "${CMAKE_BINARY_DIR}/settings-index.json")
-	execute_process(
-		COMMAND ${Python3_EXECUTABLE}
-			"${CMAKE_SOURCE_DIR}/scripts/build-settings-index.py"
-			"${CMAKE_SOURCE_DIR}/Modules/Settings"
-			"${SETTINGS_INDEX_JSON}"
-		RESULT_VARIABLE SETTINGS_INDEX_RESULT
-	)
-	if(NOT SETTINGS_INDEX_RESULT EQUAL 0)
-		message(FATAL_ERROR "Failed to build settings search index")
-	endif()
-
 	# Nuitka compilation
 	set(ZSHELL_CLI_BUILD_DIR "${CMAKE_BINARY_DIR}/zshell-cli")
 	set(ZSHELL_CLI_DIST "${ZSHELL_CLI_BUILD_DIR}/zshell.dist")
@@ -93,6 +93,8 @@ if("shell" IN_LIST ENABLE_MODULES)
 				${NUITKA_EXECUTABLE}
 				--standalone
 				--include-data-dir=${CMAKE_SOURCE_DIR}/cli/src/zshell/assets=zshell/assets
+				--include-package=gi.overrides
+				--include-package-data=solaar
 				--output-dir=${ZSHELL_CLI_BUILD_DIR}
 				--output-filename=zshell-cli
 				${CMAKE_SOURCE_DIR}/cli/src/zshell/
@@ -155,7 +157,7 @@ if("plugin" IN_LIST ENABLE_MODULES)
 endif()
 
 if("shell" IN_LIST ENABLE_MODULES)
-	foreach(dir assets scripts Components Config Modules Daemons Drawers Effects Helpers Paths)
+	foreach(dir assets scripts Components Services Modules Daemons Drawers Effects Helpers Paths)
 		install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
 	endforeach()
 

Components/AnchorAnim.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 AnchorAnimation {
 	enum Type {
@@ -20,32 +20,32 @@ AnchorAnimation {
 
 	duration: {
 		if (type < AnchorAnim.StandardSmall || type > AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 
 		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
+			return Tokens.anim.durations.expressiveFastSpatial;
 		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.large;
+			return Tokens.anim.durations.expressiveSlowSpatial;
 
 		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
+		const idx = type % 4; // 0-7 are the 4 standard types
-		return Appearance.anim.durations[types[idx]];
+		return Tokens.anim.durations[types[idx]];
 	}
-	easing.bezierCurve: {
+	easing: {
 		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.expressiveFastSpatial;
 		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.expressiveDefaultSpatial;
 		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.expressiveSlowSpatial;
 
 		if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge)
-			return Appearance.anim.curves.standard;
+			return Tokens.anim.standard;
 		if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
+			return Tokens.anim.emphasized;
 
-		return Appearance.anim.curves.expressiveDefaultSpatial;
+		return Tokens.anim.expressiveDefaultSpatial;
 	}
 }

Components/Anim.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 NumberAnimation {
 	enum Type {
@@ -23,41 +23,41 @@ NumberAnimation {
 
 	duration: {
 		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
-			return Appearance.anim.durations.normal;
+			return Tokens.anim.durations.normal;
 
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
+			return Tokens.anim.durations.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.durations.large;
+			return Tokens.anim.durations.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.durations.expressiveFastEffects;
+			return Tokens.anim.durations.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.durations.expressiveEffects;
+			return Tokens.anim.durations.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.durations.expressiveSlowEffects;
+			return Tokens.anim.durations.expressiveSlowEffects;
 
 		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
+		const idx = type % 4; // 0-7 are the 4 standard types
-		return Appearance.anim.durations[types[idx]];
+		return Tokens.anim.durations[types[idx]];
 	}
-	easing.bezierCurve: {
+	easing: {
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.curves.expressiveFastEffects;
+			return Tokens.anim.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.curves.expressiveDefaultEffects;
+			return Tokens.anim.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.curves.expressiveSlowEffects;
+			return Tokens.anim.expressiveSlowEffects;
 
 		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
+			return Tokens.anim.emphasized;
-		return Appearance.anim.curves.standard;
+		return Tokens.anim.standard;
 	}
 }

Components/BaseStyledSlider.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
-	property color color: DynamicColors.palette.m3secondary
+	property color color: Colors.palette.m3secondary
 	required property string icon
 	property bool initialized: false
 	readonly property bool isHorizontal: orientation === Qt.Horizontal
@@ -19,9 +20,9 @@ Slider {
 	background: CustomRect {
 		id: groove
 
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+		color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 		height: root.availableHeight
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		width: root.availableWidth
 		x: root.leftPadding
 		y: root.topPadding
@@ -62,8 +63,8 @@ Slider {
 			id: rect
 
 			anchors.fill: parent
-			color: DynamicColors.palette.m3inverseSurface
+			color: Colors.palette.m3inverseSurface
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			MouseArea {
 				id: handleInteraction
@@ -79,49 +80,29 @@ Slider {
 
 				property bool moving
 
-				function update(): void {
-					animate = !moving;
-					binding.when = moving;
-					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
-					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
-				}
-
 				anchors.centerIn: parent
-				color: DynamicColors.palette.m3inverseOnSurface
+				anchors.verticalCenterOffset: 1
-				text: root.icon
+				text: moving ? Math.round(root.value * 100) : root.icon
+				color: Colors.palette.m3inverseOnSurface
+				font: moving ? Tokens.font.body.small : Tokens.font.icon.medium
 
-				onMovingChanged: anim.restart()
+				Behavior on moving {
-
+					SequentialAnimation {
-				Binding {
+						Anim {
-					id: binding
+							target: icon
-
+							property: "scale"
-					property: "text"
+							to: 0.3
-					target: icon
+							duration: Tokens.anim.durations.small / 2
-					value: Math.round(root.value * root.multiplier)
+							easing: Tokens.anim.standardAccel
-					when: false
+						}
-				}
+						PropertyAction {}
-
+						Anim {
-				SequentialAnimation {
+							target: icon
-					id: anim
+							property: "scale"
-
+							to: 1
-					Anim {
+							duration: Tokens.anim.durations.normal / 2
-						duration: Appearance.anim.durations.normal / 2
+							easing: Tokens.anim.standardDecel
-						easing.bezierCurve: Appearance.anim.curves.standardAccel
+						}
-						property: "scale"
-						target: icon
-						to: 0
-					}
-
-					ScriptAction {
-						script: icon.update()
-					}
-
-					Anim {
-						duration: Appearance.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardDecel
-						property: "scale"
-						target: icon
-						to: 1
 					}
 				}
 			}
@@ -129,7 +110,7 @@ Slider {
 	}
 	Behavior on value {
 		Anim {
-			duration: Appearance.anim.durations.large
+			type: Anim.StandardLarge
 		}
 	}
 
@@ -137,7 +118,6 @@ Slider {
 	onValueChanged: {
 		if (!initialized) {
 			initialized = true;
-			oldValue = value;
 			return;
 		}
 

Components/ButtonBase.qml

@@ -1,5 +1,7 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Components
+import qs.Services
 
 CustomRect {
 	id: root
@@ -13,16 +15,12 @@ CustomRect {
 	property color activeColor
 	property color activeOnColor
 	property bool checked
-	property real checkedRadius: Appearance.rounding.medium
+	property real checkedRadius: Tokens.rounding.medium
-	property real defaultRadius: Appearance.rounding.large
+	property real defaultRadius: Tokens.rounding.large
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledOnColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledOnColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	property bool fillWidth
-	property font font: ({
+	property font font: Tokens.font.body.small
-			family: Appearance.font.family.sans,
-			pointSize: Appearance.font.size.larger,
-			bold: false
-		})
 	property real horizontalPadding: padding
 	readonly property alias hovered: stateLayer.containsMouse
 	required implicitHeight
@@ -35,7 +33,7 @@ CustomRect {
 	readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor
 	property real padding
 	readonly property alias pressed: stateLayer.pressed
-	property real pressedRadius: Appearance.rounding.small
+	property real pressedRadius: Tokens.rounding.small
 	readonly property alias radiusAnim: radiusAnim
 	property bool radiusMorph: true
 	property alias shapeMorph: stateLayer.shapeMorph
@@ -53,7 +51,7 @@ CustomRect {
 		if (internalChecked)
 			return checkedRadius;
 		if (isRound)
-			return (height || implicitHeight) / 2 * Math.min(1, Appearance.rounding.scale);
+			return implicitHeight / 2 * Math.min(1, Tokens.rounding.scale);
 		return defaultRadius;
 	}
 

Components/CAnim.qml

@@ -1,8 +1,7 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 ColorAnimation {
-	duration: MaterialEasing.standardTime
+	duration: Tokens.anim.durations.expressiveSlowEffects
-	easing.bezierCurve: MaterialEasing.standard
+	easing: Tokens.anim.expressiveSlowEffects
-	easing.type: Easing.BezierSpline
 }

Components/CircularIndicator.qml

@@ -1,7 +1,8 @@
-import qs.Config
+import ZShell.Config
 import ZShell.Internal
 import QtQuick
 import QtQuick.Templates
+import qs.Services
 
 BusyIndicator {
 	id: root
@@ -17,12 +18,12 @@ BusyIndicator {
 	}
 
 	property int animState
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
-	property real implicitSize: Appearance.font.size.normal * 3
+	property real implicitSize: Tokens.font.body.medium.pointSize * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
-	property real strokeWidth: Appearance.padding.small * 0.8
+	property real strokeWidth: Tokens.padding.extraSmall * 0.8
 	property alias type: manager.indeterminateAnimationType
 
 	implicitHeight: implicitSize
@@ -50,7 +51,7 @@ BusyIndicator {
 	}
 	transitions: Transition {
 		Anim {
-			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			duration: manager.completeEndDuration * Tokens.anim.durations.scale
 			properties: "opacity,internalStrokeWidth"
 		}
 	}
@@ -76,7 +77,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.duration * Appearance.anim.durations.scale
+		duration: manager.duration * Tokens.anim.durations.scale
 		from: 0
 		loops: Animation.Infinite
 		property: "progress"
@@ -86,7 +87,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		duration: manager.completeEndDuration * Tokens.anim.durations.scale
 		from: 0
 		property: "completeEndProgress"
 		running: root.animState === CircularIndicator.Completing

Components/CircularProgress.qml

@@ -3,24 +3,25 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Shapes
 import ZShell.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
 
 	readonly property real arcRadius: (size - padding - strokeWidth * (1 + waveAmplitude * 2)) / 2
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
 	property real clampedVal: Math.max(1 / 360, Math.min(1, isNaN(value) ? 0 : value))
 	readonly property real dotAngleRad: (startAngle + sweepAngle - gapAngle * (sweepAngle < 360 ? 0 : 1)) * Math.PI / 180
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
 	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
 	property alias hasEndIndicator: dot.active
 	property real implicitSize
 	property int padding: 0
 	readonly property real size: Math.min(width, height)
-	property int spacing: Appearance.spacing.small
+	property int spacing: Tokens.spacing.small
 	property int startAngle: -90
-	property int strokeWidth: Appearance.padding.small
+	property int strokeWidth: Tokens.padding.extraSmall
 	property int sweepAngle: 360
 	readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2
 	property real value
@@ -110,7 +111,7 @@ Item {
 			implicitHeight: Math.min(1, remainingArc.sweepAngle) * Math.min(4, root.strokeWidth)
 			implicitWidth: Math.min(1, remainingArc.sweepAngle) * Math.min(4, root.strokeWidth)
 			opacity: Math.min(1, remainingArc.sweepAngle)
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 	}
 }

Components/ColorArcPicker.qml

@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
@@ -18,9 +19,9 @@ Item {
 	property real lastChromaticHue: 0
 	readonly property real radius: (Math.min(width, height) - handleSize) / 2
 	readonly property int segmentCount: 240
-	readonly property color thumbColor: DynamicColors.palette.m3inverseSurface
+	readonly property color thumbColor: Colors.palette.m3inverseSurface
-	readonly property color thumbContentColor: DynamicColors.palette.m3inverseOnSurface
+	readonly property color thumbContentColor: Colors.palette.m3inverseOnSurface
-	readonly property color trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+	readonly property color trackColor: Colors.layer(Colors.palette.m3surfaceContainer, 2)
 
 	function hueToAngle(hue) {
 		return arcStartAngle + arcSweep * hue;
@@ -45,10 +46,10 @@ Item {
 	}
 
 	function syncFromPenColor() {
-		if (!drawing.drawingState)
+		if (!drawing.screenState)
 			return;
 
-		const c = drawing.drawingState.penColor;
+		const c = drawing.screenState.penColor;
 
 		if (c.hsvSaturation > 0) {
 			currentHue = c.hsvHue;
@@ -85,7 +86,7 @@ Item {
 
 		currentHue = relative / arcSweep;
 		lastChromaticHue = currentHue;
-		drawing.drawingState.penColor = Qt.hsva(currentHue, drawing.drawingState.penColor.hsvSaturation, drawing.drawingState.penColor.hsvValue, drawing.drawingState.penColor.a);
+		drawing.screenState.penColor = Qt.hsva(currentHue, drawing.screenState.penColor.hsvSaturation, drawing.screenState.penColor.hsvValue, drawing.screenState.penColor.a);
 	}
 
 	implicitHeight: 180
@@ -111,7 +112,7 @@ Item {
 			root.syncFromPenColor();
 		}
 
-		target: root.drawing.drawingState
+		target: root.drawing.screenState
 	}
 
 	Canvas {
@@ -151,10 +152,10 @@ Item {
 
 	CustomRect {
 		anchors.centerIn: parent
-		color: root.drawing?.drawingState.penColor
+		color: root.drawing?.screenState.penColor
 		implicitHeight: implicitWidth
-		implicitWidth: canvas.height - root.handleSize - Appearance.padding.extraLarge * 2
+		implicitWidth: canvas.height - root.handleSize - Tokens.padding.extraLarge * 2
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Behavior on color {
 			enabled: false

Components/CustomCheckbox.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CheckBox {
 	id: control
@@ -18,14 +19,14 @@ CheckBox {
 	indicator: CustomRect {
 		// x: control.leftPadding
 		// y: parent.implicitHeight / 2 - implicitHeight / 2
-		border.color: control.checked ? DynamicColors.palette.m3primary : "transparent"
+		border.color: control.checked ? Colors.palette.m3primary : "transparent"
-		color: DynamicColors.palette.m3surfaceVariant
+		color: Colors.palette.m3surfaceVariant
 		implicitHeight: control.checkHeight
 		implicitWidth: control.checkWidth
-		radius: Appearance.rounding.smallest / 2
+		radius: Tokens.rounding.small / 2
 
 		CustomRect {
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			implicitHeight: control.checkHeight - (y * 2)
 			implicitWidth: control.checkWidth - (x * 2)
 			radius: 3

Components/CustomFlickable.qml

@@ -1,12 +1,12 @@
 import QtQuick
-import qs.Helpers
+import qs.Services
 
 Flickable {
 	id: root
 
 	property bool doneFakeFlick
 
-	interactive: !Visibilities.getForActive().isDrawing
+	interactive: !ShellState.forActive().isDrawing
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {
@@ -28,6 +28,9 @@ Flickable {
 		interval: 10
 		running: root.doneFakeFlick
 
-		onTriggered: root.doneFakeFlick = false
+		onTriggered: {
+			root.doneFakeFlick = false;
+			root.returnToBounds();
+		}
 	}
 }

Components/CustomListView.qml

@@ -1,33 +1,36 @@
 import QtQuick
-import qs.Helpers
+import qs.Services
 
 ListView {
 	id: root
 
 	property bool doneFakeFlick
 
-	interactive: !Visibilities.getForActive()?.isDrawing
+	interactive: !ShellState.forActive()?.isDrawing
 	maximumFlickVelocity: 3000
 
 	rebound: Transition {
-		onRunningChanged: {
+		// onRunningChanged: {
-			if (!running && !root.doneFakeFlick) {
+		// 	if (!running && !root.doneFakeFlick) {
-				root.doneFakeFlick = true;
+		// 		root.doneFakeFlick = true;
-				root.flick(1, 1);
+		// 		root.flick(1, 1);
-				root.flick(-1, -1);
+		// 		root.flick(-1, -1);
-				Qt.callLater(() => root.cancelFlick());
+		// 		Qt.callLater(() => root.cancelFlick());
-			}
+		// 	}
-		}
+		// }
 
 		Anim {
 			properties: "x,y"
+			type: Anim.DefaultEffects
 		}
 	}
 
-	Timer {
+	// Timer {
-		interval: 10
+	// 	interval: 10
-		running: root.doneFakeFlick
+	// 	running: root.doneFakeFlick
-
+	//
-		onTriggered: root.doneFakeFlick = false
+	// 	onTriggered: {
-	}
+	// 		root.doneFakeFlick = false;
+	// 	}
+	// }
 }

Components/CustomMouseArea.qml

@@ -4,6 +4,7 @@ MouseArea {
 	property int scrollAccumulatedY: 0
 
 	function onWheel(event: WheelEvent): void {
+		event.accepted = false;
 	}
 
 	onWheel: event => {

Components/CustomProgressBar.qml

@@ -5,7 +5,8 @@ import QtQuick.Templates
 import ZShell
 import ZShell.Components
 import ZShell.Internal
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ProgressBar {
 	id: root
@@ -16,8 +17,8 @@ ProgressBar {
 		Stopped
 	}
 
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
 	property int indeterminateAnimState: CustomProgressBar.Stopped
 	property real waveAmplitude: 0.5
 	property int waveDuration: 1000
@@ -64,7 +65,7 @@ ProgressBar {
 	LinearIndicatorManager {
 		id: manager
 
-		gap: Appearance.spacing.extraSmall
+		gap: Tokens.spacing.extraSmall
 
 		Anim on completeEndProgress {
 			duration: manager.completeEndDuration
@@ -94,7 +95,7 @@ ProgressBar {
 				id: remaining
 
 				anchors.right: parent.right
-				implicitWidth: parent.width - wave.implicitWidth - Appearance.spacing.extraSmall
+				implicitWidth: parent.width - wave.implicitWidth - Tokens.spacing.extraSmall
 			}
 
 			Line {
@@ -106,7 +107,7 @@ ProgressBar {
 				color: root.fgColor
 				implicitHeight: implicitSize
 				implicitWidth: implicitSize
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				Behavior on implicitSize {
 					Anim {
@@ -200,7 +201,7 @@ ProgressBar {
 		color: root.bgColor
 		implicitHeight: parent.height
 		implicitWidth: bounds.y - bounds.x
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		x: bounds.x
 	}
 	component Wave: WavyLine {

Components/CustomRadioButton.qml

@@ -1,11 +1,12 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RadioButton {
 	id: root
 
-	font.pointSize: Appearance.font.size.normal
+	font: Tokens.font.body.medium
 	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
 	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
 
@@ -13,28 +14,27 @@ RadioButton {
 		anchors.left: outerCircle.right
 		anchors.leftMargin: 10
 		anchors.verticalCenter: parent.verticalCenter
-		font.pointSize: root.font.pointSize
+		font: root.font
 		text: root.text
 	}
 	indicator: Rectangle {
 		id: outerCircle
 
 		anchors.verticalCenter: parent.verticalCenter
-		border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+		border.color: root.checked ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
 		border.width: 2
 		color: "transparent"
 		implicitHeight: 16
 		implicitWidth: 16
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Behavior on border.color {
-			CAnim {
+			CAnim {}
-			}
 		}
 
 		StateLayer {
 			anchors.margins: -7
-			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
+			color: root.checked ? Colors.palette.m3onSurface : Colors.palette.m3primary
 			z: -1
 
 			onClicked: {
@@ -44,10 +44,10 @@ RadioButton {
 
 		CustomRect {
 			anchors.centerIn: parent
-			color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
+			color: Qt.alpha(Colors.palette.m3primary, root.checked ? 1 : 0)
 			implicitHeight: 8
 			implicitWidth: 8
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 	}
 }

Components/CustomRect.qml

@@ -6,7 +6,6 @@ Rectangle {
 	color: "transparent"
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 }

Components/CustomScrollBar.qml

@@ -1,31 +1,41 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
-import qs.Helpers
+import qs.Services
-import qs.Config
+import ZShell.Config
 
 ScrollBar {
 	id: root
 
+	required property Flickable flickable
+
+	readonly property bool isHorizontal: flickable && flickable.ScrollBar.horizontal === root
+	readonly property real axisSize: isHorizontal ? flickable.width : flickable.height
+	readonly property real axisContentSize: isHorizontal ? flickable.contentWidth : flickable.contentHeight
+	readonly property real axisContentPos: isHorizontal ? (reversed ? flickable.contentX : (flickable.contentX - flickable.originX)) : (reversed ? flickable.contentY : (flickable.contentY - flickable.originY))
+	readonly property real axisLength: isHorizontal ? root.width : root.height
 	readonly property real effectiveSize: Math.max(nonAnimHeight, root.minimumSize)
 	readonly property real effectiveTravel: Math.max(0, 1 - root.effectiveSize)
-	required property Flickable flickable
+	readonly property real nonAnimHeight: root.axisSize / root.axisContentSize
-	readonly property real nonAnimHeight: flickable.height / flickable.contentHeight
+	readonly property real nonAnimY: root.axisContentPos / root.axisContentSize
-	readonly property real nonAnimY: flickable.contentY / flickable.contentHeight
 	readonly property real rawTravel: Math.max(0, 1 - root.nonAnimHeight)
-	readonly property bool reversed: flickable instanceof ListView && flickable.verticalLayoutDirection === ListView.BottomToTop
+	readonly property bool reversed: isHorizontal ? (flickable instanceof ListView && flickable.layoutDirection === Qt.RightToLeft) : (flickable instanceof ListView && flickable.verticalLayoutDirection === ListView.BottomToTop)
-	property bool shouldBeActive
 	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
 
-	enabled: !Visibilities.getForActive().isDrawing
+	property bool shouldBeActive
-	implicitWidth: Appearance.padding.extraSmall * 2
+	property bool inverted
 
-	contentItem: Item {
+	enabled: !ShellState.forActive().isDrawing
-	}
+
+	implicitWidth: size === 1 ? 0 : isHorizontal ? 0 : Tokens.padding.extraSmall * 2
+	implicitHeight: size === 1 ? 0 : isHorizontal ? Tokens.padding.extraSmall * 2 : 0
+
+	contentItem: Item {}
 	Behavior on position {
 		enabled: !fullMouse.pressed
 
-		Anim {
+		Anim {}
-		}
 	}
 
 	onHoveredChanged: {
@@ -46,54 +56,27 @@ ScrollBar {
 		target: root.flickable
 	}
 
-	CustomClippingRect {
+	Loader {
-		anchors.bottom: parent.bottom
+		anchors.fill: parent
-		anchors.right: parent.right
+		active: root.size < 1
-		anchors.top: parent.top
+		sourceComponent: root.isHorizontal ? horizontalTrack : verticalTrack
-		implicitWidth: handle.implicitWidth
+	}
-		radius: Appearance.rounding.full
 
-		CustomRect {
+	Component {
-			id: handle
+		id: verticalTrack
 
-			anchors.right: parent.right
+		VerticalScrollBarTrack {
-			color: DynamicColors.palette.m3secondary
+			scrollBar: root
-			implicitHeight: root.height * root.effectiveSize
+			mouseArea: fullMouse
-			implicitWidth: fullMouse.pressed || fullMouse.containsMouse ? Appearance.padding.extraSmall * 2 : Appearance.padding.extraSmall
+		}
-			opacity: {
+	}
-				if (!root.enabled)
-					return 0;
-				if (root.size === 1)
-					return 0;
-				if (fullMouse.pressed)
-					return 1;
-				if (fullMouse.containsMouse)
-					return 0.8;
-				if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
-					return 0.6;
-				return 0;
-			}
-			radius: Appearance.rounding.full
-			y: root.reversed ? root.height * (1 + root.nonAnimY) * root.travelScale : root.height * root.nonAnimY * root.travelScale
 
-			Behavior on implicitWidth {
+	Component {
-				Anim {
+		id: horizontalTrack
-				}
-			}
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
 
-			MouseArea {
+		HorizontalScrollBarTrack {
-				id: mouse
+			scrollBar: root
-
+			mouseArea: fullMouse
-				acceptedButtons: Qt.NoButton
-				anchors.fill: parent
-				cursorShape: Qt.PointingHandCursor
-				hoverEnabled: true
-			}
 		}
 	}
 
@@ -110,25 +93,40 @@ ScrollBar {
 
 		property real pressOffset: 0
 
-		function contentYFromThumbTop(thumbTop) {
+		function contentPosFromThumbStart(thumbStart) {
-			var visualPos = root.effectiveTravel > 0 ? thumbTop / root.travelScale : 0;
+			var visualPos = root.effectiveTravel > 0 ? thumbStart / root.travelScale : 0;
-
+			return root.reversed ? (visualPos - 1) * root.axisContentSize : visualPos * root.axisContentSize;
-			return root.reversed ? (visualPos - 1) * root.flickable.contentHeight : visualPos * root.flickable.contentHeight;
 		}
 
 		function updateFromEvent(event) {
-			var posInTrack = event.y / root.height;
+			var eventPos = root.isHorizontal ? event.x : event.y;
-			var thumbTop = posInTrack - pressOffset;
+			var posInTrack = eventPos / root.axisLength;
-			thumbTop = Math.max(0, Math.min(root.effectiveTravel, thumbTop));
+			var thumbStart = posInTrack - pressOffset;
+			thumbStart = Math.max(0, Math.min(root.effectiveTravel, thumbStart));
 
-			root.flickable.contentY = contentYFromThumbTop(thumbTop);
+			var newPos = contentPosFromThumbStart(thumbStart);
+			if (root.isHorizontal)
+				root.flickable.contentX = newPos + (root.flickable.originX + (root.reversed ? root.flickable.contentWidth : 0));
+			else
+				root.flickable.contentY = newPos + (root.flickable.originY + (root.reversed ? root.flickable.contentHeight : 0));
 		}
 
-		function visualThumbTop() {
+		function visualThumbStart() {
 			const visualPos = root.reversed ? (1 + root.nonAnimY) : root.nonAnimY;
 			return visualPos * root.travelScale;
 		}
 
+		function onWheel(event: WheelEvent): void {
+			if (root.horizontal) {
+				event.accepted = false;
+				return;
+			}
+
+			var delta = event.angleDelta.y > 0 ? -0.1 : 0.1;
+			var newPos = Math.max(0, Math.min(1 - root.size, root.position + (root.inverted ? -delta : delta)));
+			root.position = newPos;
+		}
+
 		anchors.fill: parent
 		cursorShape: undefined
 		hoverEnabled: true
@@ -139,24 +137,15 @@ ScrollBar {
 				updateFromEvent(event);
 		}
 		onPressed: event => {
-			var currentTop = visualThumbTop();
+			var currentStart = visualThumbStart();
-			var currentBottom = currentTop + root.effectiveSize;
+			var currentEnd = currentStart + root.effectiveSize;
-			var clickPos = event.y / root.height;
+			var eventPos = root.isHorizontal ? event.x : event.y;
+			var clickPos = eventPos / root.axisLength;
 
-			var clickedInsideThumb = clickPos >= currentTop && clickPos <= currentBottom;
+			var clickedInsideThumb = clickPos >= currentStart && clickPos <= currentEnd;
-
+			pressOffset = clickedInsideThumb ? (clickPos - currentStart) : root.effectiveSize / 2;
-			if (clickedInsideThumb) {
-				pressOffset = clickPos - currentTop;
-			} else {
-				pressOffset = root.effectiveSize / 2;
-			}
 
 			updateFromEvent(event);
 		}
-		onWheel: event => {
-			var delta = event.angleDelta.y > 0 ? -0.1 : 0.1;
-			var newPos = Math.max(0, Math.min(1 - root.size, root.position + delta));
-			root.position = newPos;
-		}
 	}
 }

Components/CustomSlider.qml

@@ -5,20 +5,23 @@ import QtQuick.Templates
 import ZShell.Components
 import ZShell
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Slider {
 	id: root
 
 	property bool animateWave
-	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color bgColor: enabled ? Colors.palette.m3secondaryContainer : Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	readonly property bool dragging: mouse.pressed
+	property color fgColor: enabled ? Colors.palette.m3primary : Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	property real filledWidth
 	property alias inset: inset
-	property color insetColor: enabled ? (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary) : DynamicColors.palette.m3onSurface
+	property color insetColor: enabled ? (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary) : Colors.palette.m3onSurface
 	property string insetIcon: ""
+	property bool interactionOnMove: true
 	property real pos: visualPosition
-	property int radius: Appearance.rounding.small
+	property int radius: Tokens.rounding.small
 	property int waveDuration: 1000
 	property real waveFrequency: 6
 	property bool wavy
@@ -35,15 +38,15 @@ Slider {
 			id: remaining
 
 			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.leftMargin: Tokens.spacing.extraSmall
 			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.rounding.extraSmall / 2
+			bottomLeftRadius: Tokens.rounding.extraSmall / 2
 			color: root.bgColor
 			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
 			opacity: Math.min(width, 12) / 12
 			radius: root.radius
-			topLeftRadius: Appearance.rounding.extraSmall / 2
+			topLeftRadius: Tokens.rounding.extraSmall / 2
 		}
 
 		CustomRect {
@@ -54,14 +57,14 @@ Slider {
 			implicitHeight: 4 * remaining.opacity
 			implicitWidth: implicitHeight
 			opacity: remaining.opacity
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 		}
 
 		CustomRect {
 			id: handle
 
 			anchors.left: filled.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
+			anchors.leftMargin: Tokens.spacing.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
 			color: root.fgColor
 			implicitHeight: {
@@ -70,7 +73,7 @@ Slider {
 				return parent.height * (mouse.pressed ? lerp(3.5, 1.5) : lerp(3, 1.2));
 			}
 			implicitWidth: 4
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
 
 			Behavior on implicitHeight {
 				Anim {
@@ -91,21 +94,25 @@ Slider {
 		MaterialIcon {
 			id: inset
 
-			readonly property bool attached: root.width ? (root.width - handle.implicitWidth - handle.anchors.leftMargin) * root.pos < inset.paintedWidth + Appearance.spacing.extraSmall * 2 : false
+			readonly property bool attached: root.width ? (root.width - handle.implicitWidth - handle.anchors.leftMargin) * root.pos < inset.paintedWidth + Tokens.spacing.extraSmall * 2 : false
 			property real dockT: attached ? 1 : 0
 
 			anchors.bottom: parent.bottom
 			anchors.top: parent.top
 			color: root.insetColor
-			font.pixelSize: Appearance.font.size.smaller * 2
+			fontStyle: {
+				if (root.height < 96)
+					return Tokens.font.icon.pixelSize(24).build();
+				else
+					return Tokens.font.icon.pixelSize(32).build();
+			}
 			text: root.insetIcon
 			verticalAlignment: Text.AlignVCenter
 			visible: !root.wavy && root.insetIcon !== ""
-			x: Appearance.spacing.extraSmall + dockT * (handle.x + Appearance.spacing.small)
+			x: Tokens.spacing.extraSmall + dockT * (handle.x + Tokens.spacing.small)
 
 			Behavior on dockT {
-				Anim {
+				Anim {}
-				}
 			}
 		}
 
@@ -113,12 +120,12 @@ Slider {
 			id: lineComp
 
 			CustomRect {
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
+				bottomRightRadius: Tokens.rounding.extraSmall / 2
 				color: root.fgColor
 				implicitHeight: root.height
 				implicitWidth: root.filledWidth
 				radius: root.radius
-				topRightRadius: Appearance.rounding.extraSmall / 2
+				topRightRadius: Tokens.rounding.extraSmall / 2
 			}
 		}
 
@@ -135,8 +142,7 @@ Slider {
 				startX: x
 
 				Behavior on color {
-					CAnim {
+					CAnim {}
-					}
 				}
 				Anim on waveProgress {
 					duration: root.waveDuration
@@ -153,8 +159,7 @@ Slider {
 	Behavior on filledWidth {
 		id: widthBehavior
 
-		Anim {
+		Anim {}
-		}
 	}
 
 	Component.onCompleted: {
@@ -185,7 +190,8 @@ Slider {
 
 		onPositionChanged: e => {
 			dragMovement = (e.x - pressStartX) / width;
-			root.interaction(posBinding.value);
+			if (root.interactionOnMove)
+				root.interaction(posBinding.value);
 		}
 		onPressed: e => {
 			widthBehavior.enabled = false;

Components/CustomSpinBox.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 DoubleSpinBox {
 	id: root
@@ -29,36 +30,36 @@ DoubleSpinBox {
 	editable: true
 	implicitHeight: Math.max(up.indicator.implicitHeight, down.indicator.implicitHeight, contentItem.implicitHeight) + topPadding + bottomPadding
 	implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding
-	leftPadding: up.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
+	leftPadding: up.indicator.implicitWidth + Tokens.spacing.extraSmall / 2
-	rightPadding: down.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
+	rightPadding: down.indicator.implicitWidth + Tokens.spacing.extraSmall / 2
-	spacing: Appearance.spacing.small
+	spacing: Tokens.spacing.small
 
 	contentItem: TextFieldBase {
 		horizontalAlignment: TextField.AlignHCenter
 		implicitWidth: 65
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Appearance.padding.larger
+		leftPadding: Tokens.padding.small
 		readOnly: !root.editable
-		rightPadding: Appearance.padding.larger
+		rightPadding: Tokens.padding.small
 		text: root.textFromValue(root.value, root.locale)
 		validator: root.validator
 
 		background: CustomRect {
-			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+			color: Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer)
-			radius: Appearance.rounding.extraSmall
+			radius: Tokens.rounding.extraSmall
 		}
 	}
 	down.indicator: IconButton {
 		id: downButton
 
-		bottomRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		bottomRightRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
-		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
+		color: enabled ? Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
+		disabledColor: Qt.alpha(Colors.palette.m3surfaceContainerHighest, 0.4)
 		icon: "remove"
 		isRound: true
 		label.anchors.horizontalCenterOffset: pressed ? 0 : 2
-		padding: Appearance.padding.extraSmall
+		padding: Tokens.padding.extraSmall
-		topRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		topRightRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
 		type: IconButton.Text
 
 		Behavior on bottomRightRadius {
@@ -81,14 +82,14 @@ DoubleSpinBox {
 		id: upButton
 
 		anchors.right: parent.right
-		bottomLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		bottomLeftRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
-		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
+		color: enabled ? Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
+		disabledColor: Qt.alpha(Colors.palette.m3surfaceContainerHighest, 0.4)
 		icon: "add"
 		isRound: true
 		label.anchors.horizontalCenterOffset: pressed ? 0 : -2
-		padding: Appearance.padding.extraSmall
+		padding: Tokens.padding.extraSmall
-		topLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
+		topLeftRadius: pressed ? Tokens.rounding.small : Tokens.rounding.extraSmall
 		type: IconButton.Text
 
 		Behavior on bottomLeftRadius {

Components/CustomSplitButtonRow.qml

@@ -1,69 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import qs.Config
-
-Item {
-	id: root
-
-	property alias active: splitButton.active
-	property alias buttonAlias: splitButton
-	property alias expanded: splitButton.expanded
-	property int expandedZ: 100
-	required property string label
-	property alias menuItems: splitButton.menuItems
-	property bool shouldBeActive: true
-	property alias type: splitButton.type
-
-	signal selected(item: MenuItem)
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	clip: false
-	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0.8
-	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
-
-	Behavior on opacity {
-		Anim {
-		}
-	}
-	Behavior on scale {
-		Anim {
-		}
-	}
-
-	RowLayout {
-		id: row
-
-		anchors.left: parent.left
-		anchors.margins: Appearance.padding.small
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-		spacing: Appearance.spacing.normal
-
-		CustomText {
-			Layout.fillWidth: true
-			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.larger
-			text: root.label
-		}
-
-		CustomSplitButton {
-			id: splitButton
-
-			enabled: root.enabled
-			type: CustomSplitButton.Filled
-			z: 2
-
-			menu.onItemSelected: item => {
-				root.selected(item);
-			}
-			stateLayer.onClicked: {
-				splitButton.expanded = !splitButton.expanded;
-			}
-		}
-	}
-}

Components/CustomSwitch.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import QtQuick.Shapes
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Switch {
 	id: root
@@ -12,20 +13,28 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		color: {
-		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
+			if (!root.enabled)
+				return root.checked ? Qt.alpha(Colors.palette.m3onSurface, 0.12) : Qt.alpha(Colors.palette.m3surfaceContainerHighest, 0.38);
+			return root.checked ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHighest, root.cLayer);
+		}
+		implicitHeight: 14 + Tokens.padding.small * 2
 		implicitWidth: implicitHeight * 1.7
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		CustomRect {
 			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			color: {
-			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
+				if (!root.enabled)
+					return root.checked ? Qt.alpha(Colors.palette.m3surface, 0.7) : Qt.alpha(Colors.palette.m3onSurface, 0.12);
+				return root.checked ? Colors.palette.m3onPrimary : Colors.layer(Colors.palette.m3outline, root.cLayer + 1);
+			}
+			implicitHeight: parent.implicitHeight - Tokens.padding.extraSmall
 			implicitWidth: nonAnimWidth
-			radius: Appearance.rounding.full
+			radius: Tokens.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - Tokens.padding.extraSmall / 2 : Tokens.padding.extraSmall / 2
 
 			Behavior on implicitWidth {
 				Anim {
@@ -40,7 +49,7 @@ Switch {
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked && root.enabled ? Colors.palette.m3primary : Colors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
@@ -91,7 +100,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.larger
+				height: parent.implicitHeight - Tokens.padding.medium
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -113,12 +122,16 @@ Switch {
 				}
 
 				ShapePath {
-					capStyle: ShapePath.RoundCap
+					capStyle: Tokens.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 					fillColor: "transparent"
 					startX: icon.start1.x
 					startY: icon.start1.y
-					strokeColor: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
+					strokeColor: {
-					strokeWidth: Appearance.font.size.larger * 0.15
+						if (!root.enabled)
+							return root.checked ? Colors.palette.m3outline : Colors.palette.m3surfaceContainer;
+						return root.checked ? Colors.palette.m3primary : Colors.palette.m3surfaceContainerHighest;
+					}
+					strokeWidth: 16 * 0.15
 
 					Behavior on strokeColor {
 						CAnim {
@@ -151,7 +164,7 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: Appearance.anim.durations.expressiveFastSpatial
+		duration: Tokens.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+		easing: Tokens.anim.expressiveFastSpatial
 	}
 }

Components/CustomText.qml

@@ -1,7 +1,8 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Text {
 	id: root
@@ -12,16 +13,14 @@ Text {
 	property string animateProp: "scale"
 	property real animateTo: 1
 
-	color: DynamicColors.palette.m3onSurface
+	color: Colors.palette.m3onSurface
-	font.family: Appearance.font.family.sans
+	font: Tokens.font.body.small
-	font.pointSize: Appearance.font.size.normal
+	linkColor: Colors.palette.m3onPrimaryFixedVariant
-	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
 	}
 	Behavior on text {
 		enabled: root.animate
@@ -33,8 +32,7 @@ Text {
 				type: Anim.FastEffects
 			}
 
-			PropertyAction {
+			PropertyAction {}
-			}
 
 			TAnim {
 				target: root

Components/CustomTextField.qml

@@ -2,7 +2,8 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextFieldBase {
 	id: root
@@ -14,30 +15,33 @@ TextFieldBase {
 
 	readonly property int clampedRadius: Math.min(horizontalPadding, Math.min(width, height) / 2, radius)
 	readonly property string effectiveSupportingText: isError && errorText ? errorText : supportingText
+	readonly property int filledOffset: type === CustomTextField.Filled ? Tokens.spacing.small : 0
+	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
+	readonly property real smallFontScale: smallFontSize / font.pointSize
+	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Tokens.spacing.extraSmall : 0
+	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
+	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
+
+	property int horizontalPadding: Tokens.padding.large
+	property int verticalPadding: Tokens.padding.large
+
+	property int radius: Tokens.rounding.small
+
+	property string supportingText
+	property string trailingIcon
+	property int smallFontSize: Tokens.font.label.small.pointSize
+
+	property int type: CustomTextField.Outlined
+	property var validate // Regex or function
 	property bool emptyIsValid: true
 	property string errorText
-	readonly property int filledOffset: type === CustomTextField.Filled ? Appearance.spacing.small : 0
-	readonly property int horizontalPadding: Appearance.padding.large
 	property bool isError
 	property string leadingIcon
-	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
-	readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.extraSmall * 2
-	property real outlineGapScale: activeFocus || text ? 1 : 0
-	property int radius: Appearance.rounding.small
-	readonly property real smallFontScale: smallFontSize / font.pointSize
-	property int smallFontSize: Appearance.font.size.small
-	property string supportingText
-	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Appearance.spacing.extraSmall : 0
-	property string trailingIcon
-	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
-	property int type: CustomTextField.Outlined
-	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
-	property var validate // Regex or function
 
-	bottomPadding: Appearance.padding.large + supportingTextOffset - filledOffset
+	bottomPadding: verticalPadding + supportingTextOffset - filledOffset
 	leftPadding: horizontalPadding + leadingOffset
 	rightPadding: horizontalPadding + trailingOffset
-	topPadding: Appearance.padding.large + filledOffset
+	topPadding: verticalPadding + filledOffset
 
 	background: Loader {
 		anchors.bottomMargin: root.supportingTextOffset
@@ -57,11 +61,6 @@ TextFieldBase {
 			onClicked: root.focus = true
 		}
 	}
-	Behavior on outlineGapScale {
-		Anim {
-			type: Anim.DefaultEffects
-		}
-	}
 
 	onEditingFinished: {
 		if (!valid)
@@ -87,9 +86,9 @@ TextFieldBase {
 
 			anchors.left: parent.left
 			anchors.leftMargin: root.leftPadding
-			anchors.topMargin: Appearance.padding.extraSmall
+			anchors.topMargin: Tokens.padding.extraSmall
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : root.text ? DynamicColors.palette.m3outline : root.placeholderTextColor)
+			color: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : root.text ? Colors.palette.m3outline : root.placeholderTextColor)
 			font.family: root.font.family
 			font.pointSize: root.font.pointSize
 			font.variableAxes: root.font.variableAxes
@@ -103,7 +102,7 @@ TextFieldBase {
 					when: root.type === CustomTextField.Outlined && (root.activeFocus || root.text)
 
 					PropertyChanges {
-						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding + -Appearance.spacing.extraSmall
+						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding
 						placeholder.scale: root.smallFontScale
 					}
 
@@ -135,8 +134,8 @@ TextFieldBase {
 				}
 
 				AnchorAnim {
-					duration: Appearance.anim.durations.expressiveEffects
+					duration: Tokens.anim.durations.expressiveDefaultEffects
-					easing: Appearance.anim.curves.expressiveDefaultEffects
+					easing: Tokens.anim.expressiveDefaultEffects
 				}
 			}
 		}
@@ -146,13 +145,13 @@ TextFieldBase {
 
 			active: root.leadingIcon
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.larger
+			anchors.leftMargin: Tokens.padding.small
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
 				text: root.leadingIcon
+				fontStyle: Tokens.font.icon.builders.medium.scale(0.9).build()
 			}
 		}
 
@@ -161,13 +160,13 @@ TextFieldBase {
 
 			active: root.trailingIcon
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.larger
+			anchors.rightMargin: Tokens.padding.small
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
+				color: Colors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
 				text: root.trailingIcon
+				fontStyle: Tokens.font.icon.builders.medium.scale(0.9).build()
 			}
 		}
 	}
@@ -181,8 +180,8 @@ TextFieldBase {
 		anchors.leftMargin: root.horizontalPadding
 
 		sourceComponent: CustomText {
-			color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurfaceVariant
+			color: root.isError ? Colors.palette.m3error : Colors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.small
+			font: Tokens.font.label.small
 			text: root.effectiveSupportingText
 		}
 	}
@@ -201,70 +200,82 @@ TextFieldBase {
 			preferredRendererType: Shape.CurveRenderer
 
 			ShapePath {
+				id: path
+
+				readonly property real inset: strokeWidth / 2
+				readonly property real outlineGap: placeholder.width * root.smallFontScale + Tokens.spacing.small * 2
+				property real outlineGapScale: root.activeFocus || root.text ? 1 : 0
+
 				capStyle: ShapePath.RoundCap
 				fillColor: "transparent"
-				startX: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2 + root.outlineGap * root.outlineGapScale
+				startX: path.inset + root.horizontalPadding - root.clampedRadius + path.outlineGap * (1 - path.outlineGapScale) / 2 + path.outlineGap * path.outlineGapScale
-				strokeColor: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
+				startY: path.inset
+				strokeColor: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : Colors.palette.m3outline)
 				strokeWidth: root.activeFocus ? 2 : 1
 
-				Behavior on strokeColor {
+				Behavior on outlineGapScale {
-					CAnim {
+					Anim {
+						type: Anim.DefaultEffects
 					}
 				}
+				Behavior on strokeColor {
+					CAnim {}
+				}
 				Behavior on strokeWidth {
-					Anim {
+					Anim {}
-					}
 				}
 
 				PathLine {
-					x: bg.width - root.clampedRadius
+					x: bg.width - path.inset - root.clampedRadius
+					y: path.inset
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: bg.width
+					x: bg.width - path.inset
-					y: root.clampedRadius
+					y: path.inset + root.clampedRadius
 				}
 
 				PathLine {
-					x: bg.width
+					x: bg.width - path.inset
-					y: bg.height - root.clampedRadius
+					y: bg.height - path.inset - root.clampedRadius
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: bg.width - root.clampedRadius
+					x: bg.width - path.inset - root.clampedRadius
-					y: bg.height
+					y: bg.height - path.inset
 				}
 
 				PathLine {
-					x: root.clampedRadius
+					x: path.inset + root.clampedRadius
-					y: bg.height
+					y: bg.height - path.inset
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: 0
+					x: path.inset
-					y: bg.height - root.clampedRadius
+					y: bg.height - path.inset - root.clampedRadius
 				}
 
 				PathLine {
-					x: 0
+					x: path.inset
-					y: root.clampedRadius
+					y: path.inset + root.clampedRadius
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: root.clampedRadius
+					x: path.inset + root.clampedRadius
-					y: 0
+					y: path.inset
 				}
 
 				PathLine {
-					x: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2
+					x: path.inset + root.horizontalPadding - root.clampedRadius / 2 + path.outlineGap * (1 - path.outlineGapScale) / 2
+					y: path.inset
 				}
 			}
 		}
@@ -274,7 +285,7 @@ TextFieldBase {
 		id: filledComp
 
 		CustomRect {
-			color: root.activeFocus ? DynamicColors.tPalette.m3surfaceContainerHighest : DynamicColors.tPalette.m3surfaceContainerHigh
+			color: root.activeFocus ? Colors.tPalette.m3surfaceContainerHighest : Colors.tPalette.m3surfaceContainerHigh
 			topLeftRadius: root.clampedRadius
 			topRightRadius: root.clampedRadius
 
@@ -282,12 +293,11 @@ TextFieldBase {
 				anchors.bottom: parent.bottom
 				anchors.left: parent.left
 				anchors.right: parent.right
-				color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
+				color: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : Colors.palette.m3outline)
 				implicitHeight: root.activeFocus ? 2 : 1
 
 				Behavior on implicitHeight {
-					Anim {
+					Anim {}
-					}
 				}
 			}
 		}

Components/CustomTextInput.qml

@@ -1,15 +1,16 @@
 import QtQuick
 import QtQuick.Controls
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextInput {
 	renderType: Text.NativeRendering
-	selectedTextColor: DynamicColors.palette.m3onSecondaryContainer
+	selectedTextColor: Colors.palette.m3onSecondaryContainer
-	selectionColor: DynamicColors.tPalette.colSecondaryContainer
+	selectionColor: Colors.tPalette.colSecondaryContainer
 
 	font {
-		family: Appearance?.font.family.sans ?? "sans-serif"
+		family: Config.appearance?.font.family.sans ?? "sans-serif"
 		hintingPreference: Font.PreferFullHinting
-		pixelSize: Appearance?.font.size.normal ?? 15
+		pixelSize: Config.appearance?.font.size.normal ?? 15
 	}
 }

Components/Elevation.qml

@@ -1,13 +1,14 @@
 import QtQuick
 import QtQuick.Effects
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
 	property int level
 
 	blur: (dp * 5) ** 0.7
-	color: Qt.alpha(DynamicColors.palette.m3shadow, 0.7)
+	color: Qt.alpha(Colors.palette.m3shadow, 0.7)
 	offset.y: dp / 2
 	spread: -dp * 0.3 + (dp * 0.1) ** 2
 

Components/FadeImage.qml

@@ -1,6 +1,6 @@
 import QtQuick
 import Quickshell
-import qs.Config
+import ZShell.Config
 
 Image {
 	id: root

Components/FilledSlider.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 BaseStyledSlider {
 	id: root

Components/GeminiGlow.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import Quickshell
+
+ShaderEffect {
+	id: root
+
+	property Item target: parent
+
+	property real glowSize: 40
+	property real innerGlow: 0
+	property real lineWidth: 2
+	property real intensity: 1.0
+	property real speed: 1.0
+	property int period: 6000
+	property bool running: true
+
+	property color color1: "#4285F4"
+	property color color2: "#9B72CB"
+	property color color3: "#D96570"
+	property color color4: "#F2A54A"
+
+	readonly property size itemSize: Qt.size(width, height)
+	readonly property size rectSize: target ? Qt.size(target.width, target.height) : Qt.size(0, 0)
+	readonly property real radius: (target as Rectangle).radius ?? 0
+	property real phase: 0
+
+	anchors.fill: target
+	anchors.margins: -glowSize
+	z: -1
+
+	enabled: false
+
+	fragmentShader: Qt.resolvedUrl(`${Quickshell.shellDir}/assets/shaders/geminiglow.frag.qsb`)
+
+	FrameAnimation {
+		running: root.running && root.visible
+		onTriggered: {
+			const dt = frameTime * 1000;
+			root.phase = (root.phase + dt * root.speed / root.period) % 1.0;
+		}
+	}
+}

Components/GradientSlider.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 BaseStyledSlider {
 	id: root

Components/HorizontalScrollBarTrack.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import ZShell.Config
+import qs.Services
+
+CustomClippingRect {
+	id: track
+
+	required property var scrollBar
+	required property var mouseArea
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	anchors.bottom: parent.bottom
+	implicitHeight: handle.implicitHeight
+	radius: Tokens.rounding.full
+
+	CustomRect {
+		id: handle
+
+		anchors.bottom: parent.bottom
+		color: Colors.palette.m3secondary
+		implicitWidth: track.scrollBar.width * track.scrollBar.effectiveSize
+		implicitHeight: track.mouseArea.pressed || track.mouseArea.containsMouse ? Tokens.padding.extraSmall * 2 : Tokens.padding.extraSmall
+		opacity: {
+			if (!track.scrollBar.enabled)
+				return 0;
+			if (track.scrollBar.size === 1)
+				return 0;
+			if (track.mouseArea.pressed)
+				return 1;
+			if (track.mouseArea.containsMouse)
+				return 0.8;
+			if (track.scrollBar.policy === CustomScrollBar.AlwaysOn || track.scrollBar.shouldBeActive)
+				return 0.6;
+			return 0;
+		}
+		radius: Tokens.rounding.full
+		x: track.scrollBar.reversed ? track.scrollBar.width * (1 + track.scrollBar.nonAnimY) * track.scrollBar.travelScale : track.scrollBar.width * track.scrollBar.nonAnimY * track.scrollBar.travelScale
+
+		Behavior on implicitHeight {
+			Anim {}
+		}
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
+	}
+}

Components/IconButton.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ButtonBase {
 	id: root
@@ -7,8 +8,9 @@ ButtonBase {
 	property alias icon: label.text
 	readonly property alias label: label
 
-	activeColor: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	font: Tokens.font.icon.medium
-	activeOnColor: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
+	activeColor: type === IconButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
+	activeOnColor: type === IconButton.Filled ? Colors.palette.m3onPrimary : type === IconButton.Tonal ? Colors.palette.m3onSecondary : Colors.palette.m3primary
 	implicitHeight: {
 		const h = label.implicitHeight + padding * 2;
 		if (h % 2 !== 0)
@@ -18,15 +20,15 @@ ButtonBase {
 	implicitWidth: implicitHeight
 	inactiveColor: {
 		if (!isToggle && type === IconButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === IconButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	inactiveOnColor: {
 		if (!isToggle && type === IconButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
-		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
+		return type === IconButton.Tonal ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurfaceVariant;
 	}
-	padding: type === IconButton.Text ? Appearance.padding.extraSmall / 2 : Appearance.padding.small
+	padding: type === IconButton.Text ? Tokens.padding.extraSmall / 2 : Tokens.padding.extraSmall
 
 	MaterialIcon {
 		id: label
@@ -35,7 +37,7 @@ ButtonBase {
 		anchors.verticalCenterOffset: 1
 		color: root.onColor
 		fill: !root.isToggle || root.internalChecked ? 1 : 0
-		font.pointSize: root.font.pointSize
+		fontStyle: root.font
 
 		Behavior on fill {
 			Anim {

Components/IconTextButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ButtonBase {
 	id: root
@@ -10,34 +11,34 @@ ButtonBase {
 	readonly property alias label: label
 	property alias text: label.text
 
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	activeColor: type === TextButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
 	activeOnColor: {
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
+		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
 	}
-	horizontalPadding: Appearance.padding.larger
+	horizontalPadding: Tokens.padding.small
 	implicitHeight: row.implicitHeight + verticalPadding * 2
 	implicitWidth: row.implicitWidth + horizontalPadding * 2
 	inactiveColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === TextButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	inactiveOnColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
+		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
 	}
-	verticalPadding: Appearance.padding.small
+	verticalPadding: Tokens.padding.extraSmall
 
 	RowLayout {
 		id: row
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		MaterialIcon {
 			id: iconLabel
@@ -45,10 +46,9 @@ ButtonBase {
 			Layout.alignment: Qt.AlignVCenter
 			color: root.onColor
 			fill: root.internalChecked ? 1 : 0
-			font: {
+			fontStyle: {
 				const f = Qt.font(root.font);
 				f.pointSize = Math.round(root.font.pointSize * 1.2);
-				f.family = "Material Symbols Rounded";
 				return f;
 			}
 

Components/LineGraph.qml

@@ -0,0 +1,467 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+
+Item {
+	id: root
+
+	required property list<var> values
+
+	property int xSteps: 24
+	property real yMin: NaN
+	property real yMax: NaN
+	property real yPaddingTop: 0
+	property real yPaddingBottom: 0
+
+	property int verticalLineStep: 0
+	property int horizontalLineStep: 0
+	property bool firstXLine: true
+	property bool lastXLine: false
+	property int minHorizontalLines: 0
+
+	property var xLabel: null
+	property var yLabel: null
+
+	property real smoothing: 0
+	property bool curveSmoothing: true
+	property real markerX: -1
+	property real markerGap: 2 // px gap between line and marker dot edge, each side
+
+	property color lineColor: "white"
+	property color gridColor: "white"
+	property color markerColor: "white"
+	property color labelColor: "white"
+	property real gridAlpha: 0.12
+	property real labelAlpha: 0.6
+	property real fillAlpha: 0.15
+	property real lineWidth: 2
+	property real markerDotRadius: 4
+	property real labelFontSize: 10
+
+	Canvas {
+		id: canvas
+
+		anchors.fill: parent
+		renderStrategy: Canvas.Immediate
+
+		onWidthChanged: requestPaint()
+		onHeightChanged: requestPaint()
+
+		function strokeCurve(ctx, pts) {
+			ctx.beginPath();
+			ctx.moveTo(pts[0].x, pts[0].y);
+
+			if (root.curveSmoothing && pts.length > 2) {
+				const k = 1 / 6;
+				const n = pts.length;
+
+				for (let i = 0; i < n - 1; i++) {
+					const p0 = pts[Math.max(i - 1, 0)];
+					const p1 = pts[i];
+					const p2 = pts[i + 1];
+					const p3 = pts[Math.min(i + 2, n - 1)];
+
+					let c1x = p1.x + (p2.x - p0.x) * k;
+					let c1y = p1.y + (p2.y - p0.y) * k;
+					let c2x = p2.x - (p3.x - p1.x) * k;
+					let c2y = p2.y - (p3.y - p1.y) * k;
+
+					const minY = Math.min(p1.y, p2.y);
+					const maxY = Math.max(p1.y, p2.y);
+					c1y = Math.max(minY, Math.min(maxY, c1y));
+					c2y = Math.max(minY, Math.min(maxY, c2y));
+
+					ctx.bezierCurveTo(c1x, c1y, c2x, c2y, p2.x, p2.y);
+				}
+			} else {
+				for (let i = 0; i < pts.length - 1; i++) {
+					const p0 = pts[i];
+					const p1 = pts[i + 1];
+					const cx = (p0.x + p1.x) * 0.5;
+					ctx.bezierCurveTo(cx, p0.y, cx, p1.y, p1.x, p1.y);
+				}
+			}
+		}
+
+		// Control points for segment i (pts[i] -> pts[i+1]), matching strokeCurve
+		function segmentControls(pts, i) {
+			const p0 = pts[Math.max(i - 1, 0)];
+			const p1 = pts[i];
+			const p2 = pts[i + 1];
+			const p3 = pts[Math.min(i + 2, pts.length - 1)];
+
+			if (root.curveSmoothing && pts.length > 2) {
+				const k = 1 / 6;
+				let c1x = p1.x + (p2.x - p0.x) * k;
+				let c1y = p1.y + (p2.y - p0.y) * k;
+				let c2x = p2.x - (p3.x - p1.x) * k;
+				let c2y = p2.y - (p3.y - p1.y) * k;
+
+				const minY = Math.min(p1.y, p2.y);
+				const maxY = Math.max(p1.y, p2.y);
+				c1y = Math.max(minY, Math.min(maxY, c1y));
+				c2y = Math.max(minY, Math.min(maxY, c2y));
+
+				return [c1x, c1y, c2x, c2y];
+			}
+
+			const cx = (p1.x + p2.x) * 0.5;
+			return [cx, p1.y, cx, p2.y];
+		}
+
+		// Point on the curve at a given x (x is monotonic per segment)
+		function pointAtX(pts, targetX) {
+			let j = pts.length - 2;
+			for (let i = 0; i < pts.length - 1; i++) {
+				if (targetX <= pts[i + 1].x) {
+					j = i;
+					break;
+				}
+			}
+
+			const p1 = pts[j];
+			const p2 = pts[j + 1];
+			const [c1x, c1y, c2x, c2y] = segmentControls(pts, j);
+
+			let tlo = 0;
+			let thi = 1;
+			for (let it = 0; it < 24; it++) {
+				const tm = (tlo + thi) / 2;
+				const u = 1 - tm;
+				const x = u * u * u * p1.x + 3 * u * u * tm * c1x + 3 * u * tm * tm * c2x + tm * tm * tm * p2.x;
+				if (x < targetX)
+					tlo = tm;
+				else
+					thi = tm;
+			}
+
+			const t = (tlo + thi) / 2;
+			const u = 1 - t;
+			const y = u * u * u * p1.y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * p2.y;
+			return { x: targetX, y };
+		}
+
+		// Part of the curve left/right of a cut x, including the cut point
+		function cutLeft(pts, targetX) {
+			if (targetX <= pts[0].x)
+				return [];
+			if (targetX >= pts[pts.length - 1].x)
+				return pts.slice();
+
+			let j = pts.length - 2;
+			for (let i = 0; i < pts.length - 1; i++) {
+				if (targetX <= pts[i + 1].x) {
+					j = i;
+					break;
+				}
+			}
+
+			const left = pts.slice(0, j + 1);
+			if (targetX > pts[j].x)
+				left.push(pointAtX(pts, targetX));
+			return left;
+		}
+
+		function cutRight(pts, targetX) {
+			if (targetX >= pts[pts.length - 1].x)
+				return [];
+			if (targetX <= pts[0].x)
+				return pts.slice();
+
+			let j = pts.length - 2;
+			for (let i = 0; i < pts.length - 1; i++) {
+				if (targetX <= pts[i + 1].x) {
+					j = i;
+					break;
+				}
+			}
+
+			const right = pts.slice(j + 1);
+			if (targetX < pts[j + 1].x)
+				right.unshift(pointAtX(pts, targetX));
+			return right;
+		}
+
+		onPaint: {
+			const ctx = getContext("2d");
+			ctx.reset();
+
+			const W = width;
+			const H = height;
+			if (W < 2 || H < 2)
+				return;
+
+			const padLeft = root.labelFontSize * 3.4;
+			const padRight = 2;
+			const padTop = 2;
+			const padBottom = root.labelFontSize + 8;
+			const plot = {
+				x: padLeft,
+				y: padTop,
+				w: W - padLeft - padRight,
+				h: H - padTop - padBottom
+			};
+			if (plot.w < 2 || plot.h < 2)
+				return;
+
+			// Auto-fit: NaN yMin/yMax derive from the data, snapped to the
+			// horizontal step grid, honoring minHorizontalLines
+			let lo = root.yMin;
+			let hi = root.yMax;
+			const loAuto = Number.isNaN(lo);
+			const hiAuto = Number.isNaN(hi);
+
+			if (loAuto || hiAuto) {
+				let dmin = Infinity;
+				let dmax = -Infinity;
+				for (const v of root.values) {
+					if (v == null)
+						continue;
+					if (v < dmin)
+						dmin = v;
+					if (v > dmax)
+						dmax = v;
+				}
+				if (dmin === Infinity) {
+					dmin = 0;
+					dmax = 1;
+				}
+
+				const step = root.horizontalLineStep;
+				const minSteps = root.minHorizontalLines > 1 ? root.minHorizontalLines - 1 : 0;
+
+				if (step > 0) {
+					if (hiAuto) {
+						const baseLo = loAuto ? Math.floor(dmin / step) * step : lo;
+						const span = Math.max(Math.ceil((dmax - baseLo) / step), minSteps, 1);
+						lo = baseLo;
+						hi = baseLo + span * step;
+					} else {
+						const span = Math.max(Math.ceil((hi - dmin) / step), minSteps, 1);
+						lo = hi - span * step;
+					}
+				} else {
+					if (loAuto)
+						lo = dmin;
+					if (hiAuto)
+						hi = dmax;
+					if (hi <= lo)
+						hi = lo + 1;
+				}
+			}
+
+			const scaleBottom = lo - root.yPaddingBottom;
+			const scaleTop = hi + root.yPaddingTop;
+			const range = scaleTop - scaleBottom;
+			if (range <= 0 || root.xSteps < 1)
+				return;
+
+			let series = root.values;
+			if (root.smoothing > 0 && series.length > 0) {
+				const radius = Math.round(root.smoothing);
+				const raw = series;
+				series = raw.map((v, i) => {
+					if (v == null)
+						return null;
+
+					let sum = 0;
+					let n = 0;
+					for (let j = -radius; j <= radius; j++) {
+						const u = raw[i + j];
+						if (u != null) {
+							sum += u;
+							n++;
+						}
+					}
+					return n > 0 ? sum / n : null;
+				});
+			}
+
+			const xAt = i => plot.x + (i / root.xSteps) * plot.w;
+			const yAt = v => plot.y + (1 - (v - scaleBottom) / range) * plot.h;
+			const crisp = v => Math.floor(v) + 0.5;
+
+			// 1. Grid lines
+			ctx.strokeStyle = Qt.alpha(root.gridColor, root.gridAlpha);
+			ctx.lineWidth = 1;
+
+			if (root.verticalLineStep > 0) {
+				for (let i = 0; i <= root.xSteps; i += root.verticalLineStep) {
+					if (i === 0 && !root.firstXLine)
+						continue;
+					if (i === root.xSteps && !root.lastXLine)
+						continue;
+
+					const x = crisp(xAt(i));
+					ctx.beginPath();
+					ctx.moveTo(x, plot.y);
+					ctx.lineTo(x, H);
+					ctx.stroke();
+				}
+			}
+
+			// Lines extend down into yPaddingBottom, snapped to the grid
+			const vStart = lo - (root.yPaddingBottom > 0 ? Math.floor(root.yPaddingBottom / root.horizontalLineStep) * root.horizontalLineStep : 0);
+
+			if (root.horizontalLineStep > 0) {
+				for (let v = vStart; v <= hi + 0.001; v += root.horizontalLineStep) {
+					const y = crisp(yAt(v));
+					ctx.beginPath();
+					ctx.moveTo(0, y);
+					ctx.lineTo(plot.x + plot.w, y);
+					ctx.stroke();
+				}
+			}
+
+			// 2. Labels
+			ctx.fillStyle = Qt.alpha(root.labelColor, root.labelAlpha);
+			ctx.font = root.labelFontSize + "px sans-serif";
+
+			ctx.textAlign = "left";
+			ctx.textBaseline = "top";
+			if (root.verticalLineStep > 0 && root.xLabel) {
+				for (let i = 0; i <= root.xSteps; i += root.verticalLineStep) {
+					if (i === 0 && !root.firstXLine)
+						continue;
+					if (i === root.xSteps && !root.lastXLine)
+						continue;
+
+					const text = root.xLabel(i);
+					if (text)
+						ctx.fillText(text, xAt(i) + 4, plot.y + plot.h + 4);
+				}
+			}
+
+			ctx.textBaseline = "bottom";
+			if (root.horizontalLineStep > 0 && root.yLabel) {
+				for (let v = vStart; v <= hi + 0.001; v += root.horizontalLineStep) {
+					const text = root.yLabel(v);
+					if (text)
+						ctx.fillText(text, 2, yAt(v) - 2);
+				}
+			}
+
+			// 3. Curve, split into segments at null gaps
+			const segments = [];
+			let current = null;
+			for (let i = 0; i < series.length; i++) {
+				if (series[i] == null) {
+					if (current)
+						segments.push(current);
+					current = null;
+					continue;
+				}
+				const pt = {
+					x: xAt(i),
+					y: yAt(series[i])
+				};
+				if (!current)
+					current = [];
+				current.push(pt);
+			}
+			if (current)
+				segments.push(current);
+
+			ctx.lineCap = "round";
+			ctx.lineJoin = "round";
+
+			const hasMarker = root.markerX >= 0 && root.markerX <= root.xSteps;
+			const markerPx = hasMarker ? xAt(root.markerX) : 0;
+			let gapPx = 0;
+			if (hasMarker) {
+				// markerGap is measured from the dot edge, perpendicular to the
+				// curve; project onto x via the local curve slope
+				let slope = 0;
+				const seg = segments.find(s => s[0].x <= markerPx && markerPx <= s[s.length - 1].x);
+				if (seg && seg.length > 2 && markerPx - 1 >= seg[0].x && markerPx + 1 <= seg[seg.length - 1].x)
+					slope = (pointAtX(seg, markerPx + 1).y - pointAtX(seg, markerPx - 1).y) / 2;
+				gapPx = (root.markerDotRadius + root.markerGap) / Math.sqrt(1 + slope * slope);
+			}
+
+			for (const seg of segments) {
+				if (seg.length < 2)
+					continue;
+
+				// Fill stays continuous under the marker
+				ctx.fillStyle = Qt.alpha(root.lineColor, root.fillAlpha);
+				strokeCurve(ctx, seg);
+				ctx.lineTo(seg[seg.length - 1].x, plot.y + plot.h);
+				ctx.lineTo(seg[0].x, plot.y + plot.h);
+				ctx.closePath();
+				ctx.fill();
+
+				// Stroke has a gap around the marker
+				const pieces = hasMarker ? [cutLeft(seg, markerPx - gapPx), cutRight(seg, markerPx + gapPx)] : [seg];
+
+				for (const pts of pieces) {
+					if (pts.length < 2)
+						continue;
+
+					ctx.strokeStyle = root.lineColor;
+					ctx.lineWidth = root.lineWidth;
+					strokeCurve(ctx, pts);
+					ctx.stroke();
+				}
+			}
+
+			// 4. Marker: dashed vertical + dot
+			if (root.markerX >= 0 && root.markerX <= root.xSteps) {
+				const x = markerPx;
+
+				ctx.setLineDash([4, 4]);
+				ctx.strokeStyle = Qt.alpha(root.markerColor, 0.6);
+				ctx.lineWidth = 1;
+				ctx.beginPath();
+				ctx.moveTo(crisp(x), plot.y);
+				ctx.lineTo(crisp(x), H);
+				ctx.stroke();
+				ctx.setLineDash([]);
+
+				const i0 = Math.floor(root.markerX);
+				const v0 = series[i0];
+				const v1 = series[i0 + 1];
+				let y = null;
+
+				if (v0 != null && v1 != null)
+					y = yAt(v0 + (v1 - v0) * (root.markerX - i0));
+				else if (v0 != null)
+					y = yAt(v0);
+
+				if (y != null) {
+					ctx.fillStyle = root.markerColor;
+					ctx.beginPath();
+					ctx.arc(x, y, root.markerDotRadius, 0, Math.PI * 2);
+					ctx.fill();
+				}
+			}
+		}
+	}
+
+	onValuesChanged: canvas.requestPaint()
+	onXStepsChanged: canvas.requestPaint()
+	onYMinChanged: canvas.requestPaint()
+	onYMaxChanged: canvas.requestPaint()
+	onYPaddingTopChanged: canvas.requestPaint()
+	onYPaddingBottomChanged: canvas.requestPaint()
+	onVerticalLineStepChanged: canvas.requestPaint()
+	onHorizontalLineStepChanged: canvas.requestPaint()
+	onFirstXLineChanged: canvas.requestPaint()
+	onLastXLineChanged: canvas.requestPaint()
+	onMinHorizontalLinesChanged: canvas.requestPaint()
+	onXLabelChanged: canvas.requestPaint()
+	onYLabelChanged: canvas.requestPaint()
+	onSmoothingChanged: canvas.requestPaint()
+	onCurveSmoothingChanged: canvas.requestPaint()
+	onMarkerXChanged: canvas.requestPaint()
+	onMarkerGapChanged: canvas.requestPaint()
+	onLineColorChanged: canvas.requestPaint()
+	onGridColorChanged: canvas.requestPaint()
+	onMarkerColorChanged: canvas.requestPaint()
+	onLabelColorChanged: canvas.requestPaint()
+	onGridAlphaChanged: canvas.requestPaint()
+	onLabelAlphaChanged: canvas.requestPaint()
+	onFillAlphaChanged: canvas.requestPaint()
+	onLineWidthChanged: canvas.requestPaint()
+	onMarkerDotRadiusChanged: canvas.requestPaint()
+	onLabelFontSizeChanged: canvas.requestPaint()
+}

Components/LoadingIndicator.qml

@@ -1,7 +1,8 @@
 import QtQuick
 import Quickshell
 import M3Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 MaterialShape {
 	id: root
@@ -48,7 +49,7 @@ MaterialShape {
 		return [pos, vel];
 	}
 
-	color: DynamicColors.palette.m3primary
+	color: Colors.palette.m3primary
 	implicitSize: 38
 	toShape: shapes[0]
 

Components/MarqueeText.qml

@@ -1,12 +1,13 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Item {
 	id: root
 
 	property alias anim: marqueeAnim
 	property bool animate: false
-	property color color: DynamicColors.palette.m3onSurface
+	property color color: Colors.palette.m3onSurface
 	property int fadeStrengthAnimMs: 180
 	property real fadeStrengthIdle: 0.0
 	property real fadeStrengthMoving: 1.0
@@ -17,13 +18,14 @@ Item {
 	property real leftFadeStrength: overflowing && leftFadeEnabled ? fadeStrengthMoving : fadeStrengthIdle
 	property int leftFadeWidth: 28
 	property bool marqueeEnabled: true
-	readonly property bool overflowing: metrics.width > root.width
+	readonly property bool overflowing: metrics.width > content.width
 	property int pauseMs: 1200
 	property real pixelsPerSecond: 40
 	property real rightFadeStrength: overflowing ? fadeStrengthMoving : fadeStrengthIdle
 	property int rightFadeWidth: 28
 	property bool sliding: false
 	property alias text: elideText.text
+	property bool vertical: false
 
 	function durationForDistance(px): int {
 		return Math.max(1, Math.round(Math.abs(px) / root.pixelsPerSecond * 1000));
@@ -40,8 +42,9 @@ Item {
 		}
 	}
 
-	clip: true
+	clip: false
-	implicitHeight: elideText.implicitHeight
+	implicitHeight: vertical ? elideText.implicitWidth : elideText.implicitHeight
+	implicitWidth: vertical ? elideText.implicitHeight : elideText.implicitWidth
 
 	Behavior on leftFadeStrength {
 		Anim {
@@ -52,171 +55,187 @@ Item {
 		}
 	}
 
+	onHeightChanged: resetMarquee()
 	onTextChanged: resetMarquee()
+	onVerticalChanged: resetMarquee()
 	onVisibleChanged: if (!visible)
 		resetMarquee()
 	onWidthChanged: resetMarquee()
 
-	TextMetrics {
-		id: metrics
-
-		font: elideText.font
-		text: elideText.text
-	}
-
-	CustomText {
-		id: elideText
-
-		anchors.verticalCenter: parent.verticalCenter
-		animate: root.animate
-		animateProp: "scale,opacity"
-		color: root.color
-		elide: Text.ElideNone
-		visible: !root.overflowing
-		width: root.width
-	}
-
 	Item {
-		id: marqueeViewport
+		id: content
 
-		anchors.fill: parent
+		anchors.centerIn: parent
-		clip: true
+		height: root.vertical ? root.width : root.height
-		layer.enabled: true
+		width: root.vertical ? root.height : root.width
-		visible: root.overflowing
 
-		layer.effect: OpacityMask {
+		transform: Rotation {
-			maskSource: rightFadeMask
+			angle: root.vertical ? -90 : 0
+			origin.x: content.width / 2
+			origin.y: content.height / 2
+		}
+
+		TextMetrics {
+			id: metrics
+
+			font: elideText.font
+			text: elideText.text
+		}
+
+		CustomText {
+			id: elideText
+
+			anchors.verticalCenter: parent.verticalCenter
+			animate: root.animate
+			animateProp: "scale,opacity"
+			color: root.color
+			elide: Text.ElideNone
+			visible: !root.overflowing
+			width: content.width
 		}
 
 		Item {
-			id: strip
+			id: marqueeViewport
 
-			anchors.verticalCenter: parent.verticalCenter
+			anchors.fill: parent
-			height: t1.implicitHeight
+			clip: false
-			width: t1.width + root.gap + t2.width
+			layer.enabled: true
-			x: 0
+			visible: root.overflowing
 
-			CustomText {
+			layer.effect: OpacityMask {
-				id: t1
+				maskSource: rightFadeMask
-
-				animate: root.animate
-				animateProp: "opacity"
-				color: root.color
-				font.pointSize: elideText.font.pointSize
-				text: elideText.text
 			}
 
-			CustomText {
+			Item {
-				id: t2
+				id: strip
 
-				animate: root.animate
+				anchors.verticalCenter: parent.verticalCenter
-				animateProp: "opacity"
+				height: t1.implicitHeight
-				color: root.color
+				width: t1.width + root.gap + t2.width
-				font.pointSize: elideText.font.pointSize
+				x: 0
-				text: t1.text
-				x: t1.width + root.gap
-			}
-		}
 
-		SequentialAnimation {
+				CustomText {
-			id: marqueeAnim
+					id: t1
 
-			running: false
+					animate: root.animate
+					animateProp: "opacity"
+					color: root.color
+					font.pointSize: elideText.font.pointSize
+					text: elideText.text
+				}
 
-			onFinished: pauseTimer.restart()
+				CustomText {
+					id: t2
 
-			ScriptAction {
+					animate: root.animate
-				script: {
+					animateProp: "opacity"
-					root.sliding = true;
+					color: root.color
-					root.leftFadeEnabled = true;
+					font.pointSize: elideText.font.pointSize
+					text: t1.text
+					x: t1.width + root.gap
 				}
 			}
 
-			Anim {
+			SequentialAnimation {
-				duration: root.durationForDistance(t1.width)
+				id: marqueeAnim
-				easing.bezierCurve: Easing.Linear
-				easing.type: Easing.Linear
-				from: 0
-				property: "x"
-				target: strip
-				to: -t1.width
-			}
 
-			ScriptAction {
+				running: false
-				script: {
+
-					root.leftFadeEnabled = false;
+				onFinished: pauseTimer.restart()
+
+				ScriptAction {
+					script: {
+						root.sliding = true;
+						root.leftFadeEnabled = true;
+					}
+				}
+
+				Anim {
+					duration: root.durationForDistance(t1.width)
+					easing.bezierCurve: Easing.Linear
+					easing.type: Easing.Linear
+					from: 0
+					property: "x"
+					target: strip
+					to: -t1.width
+				}
+
+				ScriptAction {
+					script: {
+						root.leftFadeEnabled = false;
+					}
+				}
+
+				Anim {
+					duration: root.durationForDistance(root.gap)
+					easing.bezierCurve: Easing.Linear
+					easing.type: Easing.Linear
+					from: -t1.width
+					property: "x"
+					target: strip
+					to: -(t1.width + root.gap)
+				}
+
+				ScriptAction {
+					script: {
+						root.sliding = false;
+						strip.x = 0;
+					}
 				}
 			}
 
-			Anim {
+			Timer {
-				duration: root.durationForDistance(root.gap)
+				id: pauseTimer
-				easing.bezierCurve: Easing.Linear
-				easing.type: Easing.Linear
-				from: -t1.width
-				property: "x"
-				target: strip
-				to: -(t1.width + root.gap)
-			}
 
-			ScriptAction {
+				interval: root.pauseMs
-				script: {
+				repeat: false
-					root.sliding = false;
+				running: true
-					strip.x = 0;
+
+				onTriggered: {
+					if (root.marqueeEnabled)
+						marqueeAnim.start();
 				}
 			}
 		}
 
-		Timer {
+		Rectangle {
-			id: pauseTimer
+			id: rightFadeMask
 
-			interval: root.pauseMs
+			readonly property real fadeStartPos: {
-			repeat: false
+				const w = Math.max(1, width);
-			running: true
+				return Math.max(0, Math.min(1, (w - root.rightFadeWidth) / w));
-
-			onTriggered: {
-				if (root.marqueeEnabled)
-					marqueeAnim.start();
 			}
-		}
+			readonly property real leftFadeEndPos: {
-	}
+				const w = Math.max(1, width);
-
+				return Math.max(0, Math.min(1, root.leftFadeWidth / w));
-	Rectangle {
-		id: rightFadeMask
-
-		readonly property real fadeStartPos: {
-			const w = Math.max(1, width);
-			return Math.max(0, Math.min(1, (w - root.rightFadeWidth) / w));
-		}
-		readonly property real leftFadeEndPos: {
-			const w = Math.max(1, width);
-			return Math.max(0, Math.min(1, root.leftFadeWidth / w));
-		}
-
-		anchors.fill: marqueeViewport
-		layer.enabled: true
-		visible: false
-
-		gradient: Gradient {
-			orientation: Gradient.Horizontal
-
-			GradientStop {
-				color: Qt.rgba(1, 1, 1, 1.0 - root.leftFadeStrength)
-				position: 0.0
 			}
 
-			GradientStop {
+			anchors.fill: marqueeViewport
-				color: Qt.rgba(1, 1, 1, 1.0)
+			layer.enabled: true
-				position: rightFadeMask.leftFadeEndPos
+			visible: false
-			}
 
-			GradientStop {
+			gradient: Gradient {
-				color: Qt.rgba(1, 1, 1, 1.0)
+				orientation: Gradient.Horizontal
-				position: rightFadeMask.fadeStartPos
-			}
 
-			GradientStop {
+				GradientStop {
-				color: Qt.rgba(1, 1, 1, 1.0 - root.rightFadeStrength)
+					color: Qt.rgba(1, 1, 1, 1.0 - root.leftFadeStrength)
-				position: 1.0
+					position: 0.0
+				}
+
+				GradientStop {
+					color: Qt.rgba(1, 1, 1, 1.0)
+					position: rightFadeMask.leftFadeEndPos
+				}
+
+				GradientStop {
+					color: Qt.rgba(1, 1, 1, 1.0)
+					position: rightFadeMask.fadeStartPos
+				}
+
+				GradientStop {
+					color: Qt.rgba(1, 1, 1, 1.0 - root.rightFadeStrength)
+					position: 1.0
+				}
 			}
 		}
 	}

Components/MaterialIcon.qml

@@ -1,26 +1,13 @@
-import qs.Config
+import QtQuick
+import ZShell.Config
+import qs.Services
 
 CustomText {
 	id: root
 
-	readonly property list<int> allowed: [20, 24, 40, 48]
 	property real fill: 0
-	property int grade: DynamicColors.light ? 0 : -25
+	property int grade: Colors.light ? 0 : -25
-	readonly property int opsz: clampOpsz(optical)
+	property font fontStyle: Tokens.font.icon.small
-	property int optical: fontInfo.pixelSize
 
-	function clampOpsz(value): int {
+	font: Tokens.font.icon.size(fontStyle.pointSize).weight(fontStyle.weight).vaxes(fontStyle.variableAxes).fill(fill.toFixed(1)).grade(grade).build()
-		return allowed.reduce((closest, current) => {
-			return Math.abs(current - value) < Math.abs(closest - value) ? current : closest;
-		});
-	}
-
-	font.family: "Material Symbols Rounded"
-	font.pointSize: Appearance.font.size.larger
-	font.variableAxes: ({
-			FILL: fill,
-			GRAD: grade,
-			opsz: opsz,
-			wght: fontInfo.weight
-		})
 }

Components/Menu.qml

@@ -3,8 +3,9 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
-import qs.Config
+import ZShell.Config
 import qs.Drawers
+import qs.Services
 
 MouseArea {
 	id: root
@@ -77,7 +78,7 @@ MouseArea {
 		implicitHeight: column.implicitHeight + column.anchors.margins * 2
 		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
 		level: 2
-		radius: Appearance.rounding.medium
+		radius: Tokens.rounding.large
 		x: {
 			watcher.transform;
 			const item = root.attachTo;
@@ -107,15 +108,15 @@ MouseArea {
 
 		CustomRect {
 			anchors.fill: parent
-			color: DynamicColors.palette.m3surfaceContainerLow
+			color: Colors.palette.m3surfaceContainerLow
 			radius: parent.radius
 
 			ColumnLayout {
 				id: column
 
 				anchors.fill: parent
-				anchors.margins: Appearance.padding.extraSmall
+				anchors.margins: Tokens.padding.extraSmall
-				spacing: Appearance.spacing.extraSmall
+				spacing: Tokens.spacing.extraSmall
 
 				Repeater {
 					id: repeater
@@ -125,15 +126,15 @@ MouseArea {
 					CustomRect {
 						id: item
 
-						readonly property bool active: modelData === root.active
+						readonly property bool active: modelData === root?.active
 						required property int index
 						required property MenuItem modelData
 
 						Layout.fillWidth: true
-						color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, active ? 1 : 0)
+						color: Qt.alpha(Colors.palette.m3tertiaryContainer, active ? 1 : 0)
-						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
+						implicitHeight: menuOptionRow.implicitHeight + Tokens.padding.medium * 2
-						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
+						implicitWidth: menuOptionRow.implicitWidth + Tokens.padding.medium * 2
-						radius: Appearance.rounding.small
+						radius: menu.radius - column.anchors.margins
 
 						Behavior on radius {
 							Anim {
@@ -141,7 +142,7 @@ MouseArea {
 						}
 
 						StateLayer {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
 							enabled: root.expanded
 
 							onClicked: {
@@ -156,30 +157,30 @@ MouseArea {
 							id: menuOptionRow
 
 							anchors.fill: parent
-							anchors.margins: Appearance.padding.larger
+							anchors.margins: Tokens.padding.medium
-							spacing: Appearance.spacing.small
+							spacing: Tokens.spacing.small
 
 							MaterialIcon {
 								Layout.alignment: Qt.AlignVCenter
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+								color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurfaceVariant
-								text: item.modelData.icon
+								text: item.modelData?.icon ?? ""
 							}
 
 							CustomText {
 								Layout.alignment: Qt.AlignVCenter
 								Layout.fillWidth: true
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+								color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
-								text: item.modelData.text
+								text: item.modelData?.text ?? ""
 							}
 
 							Loader {
 								Layout.alignment: Qt.AlignVCenter
-								active: item.modelData.trailingIcon.length > 0
+								active: item.modelData?.trailingIcon.length > 0
 								asynchronous: true
 								visible: active
 
 								sourceComponent: MaterialIcon {
-									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
+									color: item.active ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurfaceVariant
 									text: item.modelData.trailingIcon
 								}
 							}

Components/ScreenState.qml

@@ -0,0 +1,37 @@
+import QtQuick
+import Quickshell
+
+PersistentProperties {
+	required property ShellScreen modelData
+
+	reloadableId: "screenState"
+
+	// Drawer visibilities
+	property bool bar
+	property bool clipboard
+	property bool dashboard
+	property bool dock
+	property bool isDrawing
+	property bool launcher
+	property bool osd
+	property bool resources
+	property bool settings
+	property bool sidebar
+
+	// Dashboard state
+	property int dashboardTab: 0
+	property date dashboardDate: new Date()
+
+	// Sidebar state
+	property int sidebarTab: 0
+	property list<string> expandedNotifs: []
+
+	// Utilities state
+	property string recordingConfirmDelete
+	property bool recordingListExpanded
+	property string recordingMode
+
+	// Drawing state
+	property color penColor: "white"
+	property int penWidth: 4
+}

Components/SearchBar.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextFieldBase {
 	id: root
@@ -8,17 +9,17 @@ TextFieldBase {
 	readonly property alias clearIcon: clearIcon
 	readonly property alias searchIcon: searchIcon
 
-	bottomPadding: Appearance.padding.large
+	bottomPadding: Tokens.padding.large
-	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Appearance.spacing.small
+	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Tokens.spacing.small
-	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Appearance.spacing.small
+	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Tokens.spacing.small
-	topPadding: Appearance.padding.large
+	topPadding: Tokens.padding.large
 
 	background: CustomRect {
 		id: bg
 
 		anchors.fill: parent
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		StateLayer {
 			id: stateLayer
@@ -58,10 +59,10 @@ TextFieldBase {
 		id: searchIcon
 
 		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.large
+		anchors.leftMargin: Tokens.padding.large
 		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.palette.m3onSurfaceVariant
+		color: Colors.palette.m3onSurfaceVariant
-		font.pointSize: Appearance.font.size.large
+		fontStyle: Tokens.font.icon.builders.medium.scale(0.9).build()
 		text: "search"
 	}
 
@@ -69,12 +70,12 @@ TextFieldBase {
 		id: clearIcon
 
 		anchors.right: parent.right
-		anchors.rightMargin: Appearance.padding.larger
+		anchors.rightMargin: Tokens.padding.small
 		anchors.verticalCenter: parent.verticalCenter
 		enabled: root.text
 		icon: "clear"
 		opacity: root.text ? 1 : 0
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 		radiusMorph: false
 		stateLayer.hoverEnabled: enabled
 		type: IconButton.Text

Components/SplitButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Row {
 	id: root
@@ -11,14 +12,14 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color color: type == SplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property color disabledTextColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
 	readonly property alias expandBtn: expandBtn
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.larger
+	property real horizontalPadding: Tokens.padding.medium
 	readonly property alias iconLabel: iconLabel
 	readonly property alias label: label
 	readonly property alias menu: menu
@@ -26,20 +27,20 @@ Row {
 	property bool menuOnTop
 	property real minLeftWidth
 	readonly property alias stateLayer: stateLayer
-	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	property color textColor: type == SplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
 	readonly property alias textRow: textRow
-	property int type: CustomSplitButton.Filled
+	property int type: SplitButton.Filled
-	property real verticalPadding: Appearance.padding.small
+	property real verticalPadding: Tokens.padding.small
 
-	spacing: Math.floor(Appearance.spacing.extraSmall)
+	spacing: Math.floor(Tokens.spacing.extraSmall / 2)
 
 	CustomRect {
-		bottomRightRadius: Appearance.rounding.small / 2
+		bottomRightRadius: Tokens.rounding.medium / 2
 		color: !root.enabled ? root.disabledColor : root.color
 		implicitHeight: expandBtn.implicitHeight
 		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
-		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
-		topRightRadius: Appearance.rounding.small / 2
+		topRightRadius: Tokens.rounding.medium / 2
 
 		StateLayer {
 			id: stateLayer
@@ -57,7 +58,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
-			spacing: Appearance.spacing.small
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
 				id: iconLabel
@@ -91,13 +92,13 @@ Row {
 	CustomRect {
 		id: expandBtn
 
-		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
+		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.medium / 2
 
 		bottomLeftRadius: rad
 		color: !root.enabled ? root.disabledColor : root.color
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
-		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
 		topLeftRadius: rad
 
 		Behavior on rad {
@@ -141,7 +142,7 @@ Row {
 
 		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
 		attachTo: expandBtn
-		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
+		marginY: Tokens.spacing.small * (root.menuOnTop ? -1 : 1)
 		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
 	}
 }

Components/StateLayer.qml

@@ -1,9 +1,8 @@
 import QtQuick
 import QtQuick.Shapes
 import ZShell
-import ZShell.Components
+import ZShell.Config
-import qs.Helpers
+import qs.Services
-import qs.Config
 
 MouseArea {
 	id: root
@@ -52,7 +51,7 @@ MouseArea {
 
 	anchors.fill: parent
 	cursorShape: !enabled ? undefined : Qt.PointingHandCursor
-	enabled: parent.enabled && !Visibilities.getForActive()?.isDrawing
+	enabled: parent.enabled && !ShellState.forActive()?.isDrawing
 	hoverEnabled: true
 
 	Behavior on stateOpacity {
@@ -79,8 +78,8 @@ MouseArea {
 		id: rippleAnim
 
 		alwaysRunToEnd: true
-		duration: Appearance.anim.durations.expressiveSlowEffects * 2
+		duration: Tokens.anim.durations.expressiveSlowEffects * 2
-		easing.bezierCurve: Appearance.anim.curves.standard
+		easing: Tokens.anim.standard
 		property: "circleRadius"
 		target: root
 		to: root.endRadius
@@ -99,13 +98,13 @@ MouseArea {
 		id: base
 
 		anchors.fill: parent
-		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
+		color: Colors.palette.m3onSurface
-		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
-		color: DynamicColors.palette.m3onSurface
 		opacity: root.stateOpacity
 		// Pick up radius from parent if it has one (parent can be anything with radius props)
 		// qmllint disable missing-property
 		radius: root.parent?.radius ?? 0
+		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
+		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
 		topLeftRadius: root.parent?.topLeftRadius ?? radius ?? 0
 		topRightRadius: root.parent?.topRightRadius ?? radius ?? 0
 		// qmllint enable missing-property

Components/TextAreaBase.qml

@@ -0,0 +1,86 @@
+import QtQuick
+import QtQuick.Templates
+import ZShell.Config
+import qs.Services
+
+TextArea {
+	id: root
+
+	color: Colors.palette.m3onSurface
+	cursorVisible: !readOnly
+	font: Tokens.font.body.small
+	implicitHeight: contentHeight + topPadding + bottomPadding
+	implicitWidth: contentWidth + leftPadding + rightPadding
+	placeholderTextColor: Colors.palette.m3onSurfaceVariant // No anim cause placeholder is custom
+	renderType: TextArea.NativeRendering
+	selectedTextColor: color
+	selectionColor: Qt.alpha(Colors.palette.m3primary, 0.4)
+	verticalAlignment: TextInput.AlignVCenter
+
+	Behavior on color {
+		CAnim {}
+	}
+	Behavior on selectionColor {
+		CAnim {}
+	}
+	cursorDelegate: Item {}
+
+	CustomRect {
+		id: cursor
+
+		property bool disableBlink
+
+		color: Colors.palette.m3primary
+		implicitHeight: root.cursorRectangle.height
+		implicitWidth: 1.5
+		radius: Tokens.rounding.largeIncreased
+		x: root.cursorRectangle.x
+		y: root.cursorRectangle.y
+
+		Behavior on x {
+			Anim {
+				duration: Tokens.anim.durations.expressiveFastEffects
+				easing.bezierCurve: [0.2, 1, 0.21, 1, 1, 1]
+			}
+		}
+		Behavior on opacity {
+			Anim {
+				type: Anim.StandardSmall
+			}
+		}
+
+		Connections {
+			function onCursorPositionChanged(): void {
+				if (root.activeFocus && root.cursorVisible) {
+					cursor.opacity = 1;
+					cursor.disableBlink = true;
+					enableBlink.restart();
+				}
+			}
+
+			target: root
+		}
+
+		Timer {
+			id: enableBlink
+
+			interval: 500
+
+			onTriggered: cursor.disableBlink = false
+		}
+
+		Timer {
+			interval: 500
+			repeat: true
+			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
+			triggeredOnStart: true
+
+			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
+		}
+
+		Binding {
+			cursor.opacity: 0
+			when: !root.activeFocus || !root.cursorVisible
+		}
+	}
+}

Components/TextButton.qml

@@ -1,5 +1,6 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 ButtonBase {
 	id: root
@@ -7,28 +8,28 @@ ButtonBase {
 	readonly property alias label: label
 	property alias text: label.text
 
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	activeColor: type === TextButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondary
 	activeOnColor: {
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
+		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
 	}
-	horizontalPadding: Appearance.padding.normal
+	horizontalPadding: Tokens.padding.small
 	implicitHeight: label.implicitHeight + verticalPadding * 2
 	implicitWidth: label.implicitWidth + horizontalPadding * 2
 	inactiveColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
+		return type === TextButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
 	}
 	inactiveOnColor: {
 		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
+			return Colors.palette.m3onPrimary;
 		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
+			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
+		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
 	}
-	verticalPadding: Appearance.padding.small
+	verticalPadding: Tokens.padding.extraSmall
 
 	CustomText {
 		id: label

Components/TextEditBase.qml

@@ -0,0 +1,96 @@
+import QtQuick
+import QtQuick.Templates
+import ZShell.Config
+import qs.Services
+
+TextEdit {
+	id: root
+
+	property bool animateCursor: true
+	property alias cursor: cursor
+
+	color: Colors.palette.m3onSurface
+	cursorVisible: !readOnly
+	font: Tokens.font.body.small
+	renderType: TextField.NativeRendering
+	selectedTextColor: color
+	selectionColor: Qt.alpha(Colors.palette.m3primary, 0.4)
+	verticalAlignment: TextInput.AlignVCenter
+
+	Behavior on color {
+		CAnim {}
+	}
+	cursorDelegate: Item {}
+	Behavior on selectionColor {
+		CAnim {}
+	}
+
+	CustomRect {
+		id: cursor
+
+		property bool disableBlink
+
+		color: Colors.palette.m3primary
+		implicitHeight: root.cursorRectangle.height
+		implicitWidth: 1.5
+		radius: Tokens.rounding.largeIncreased
+		x: root.cursorRectangle.x
+		y: root.cursorRectangle.y
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.StandardSmall
+			}
+		}
+		Behavior on x {
+			enabled: root.animateCursor
+
+			Anim {
+				duration: Tokens.anim.durations.expressiveFastEffects
+				easing.bezierCurve: [0.2, 1, 0.21, 1, 1, 1]
+			}
+		}
+		Behavior on y {
+			enabled: root.animateCursor
+
+			Anim {
+				duration: Tokens.anim.durations.expressiveFastEffects
+				easing.bezierCurve: [0.2, 1, 0.21, 1, 1, 1]
+			}
+		}
+
+		Connections {
+			function onCursorPositionChanged(): void {
+				if (root.activeFocus && root.cursorVisible) {
+					cursor.opacity = 1;
+					cursor.disableBlink = true;
+					enableBlink.restart();
+				}
+			}
+
+			target: root
+		}
+
+		Timer {
+			id: enableBlink
+
+			interval: 500
+
+			onTriggered: cursor.disableBlink = false
+		}
+
+		Timer {
+			interval: 500
+			repeat: true
+			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
+			triggeredOnStart: true
+
+			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
+		}
+
+		Binding {
+			cursor.opacity: 0
+			when: !root.activeFocus || !root.cursorVisible
+		}
+	}
+}

Components/TextFieldBase.qml

@@ -1,30 +1,28 @@
 import QtQuick
 import QtQuick.Templates
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 TextField {
 	id: root
 
-	color: DynamicColors.palette.m3onSurface
+	color: Colors.palette.m3onSurface
 	cursorVisible: !readOnly
-	font.pointSize: Appearance.font.size.small
+	font: Tokens.font.body.small
 	implicitHeight: contentHeight + topPadding + bottomPadding
 	implicitWidth: contentWidth + leftPadding + rightPadding
-	placeholderTextColor: DynamicColors.palette.m3onSurfaceVariant // No anim cause placeholder is custom
+	placeholderTextColor: Colors.palette.m3onSurfaceVariant // No anim cause placeholder is custom
 	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 	selectedTextColor: color
-	selectionColor: Qt.alpha(DynamicColors.palette.m3primary, 0.4)
+	selectionColor: Qt.alpha(Colors.palette.m3primary, 0.4)
 	verticalAlignment: TextInput.AlignVCenter
 
 	Behavior on color {
-		CAnim {
+		CAnim {}
-		}
-	}
-	cursorDelegate: Item {
 	}
+	cursorDelegate: Item {}
 	Behavior on selectionColor {
-		CAnim {
+		CAnim {}
-		}
 	}
 
 	CustomRect {
@@ -32,10 +30,10 @@ TextField {
 
 		property bool disableBlink
 
-		color: DynamicColors.palette.m3primary
+		color: Colors.palette.m3primary
 		implicitHeight: root.cursorRectangle.height
 		implicitWidth: 1.5
-		radius: Appearance.rounding.large
+		radius: Tokens.rounding.largeIncreased
 		x: root.cursorRectangle.x
 		y: root.cursorRectangle.y
 
@@ -46,7 +44,7 @@ TextField {
 		}
 		Behavior on x {
 			Anim {
-				duration: Appearance.anim.durations.expressiveFastEffects
+				duration: Tokens.anim.durations.expressiveFastEffects
 				easing.bezierCurve: [0.2, 1, 0.21, 1, 1, 1]
 			}
 		}

Components/Toast/ToastItem.qml

@@ -2,7 +2,8 @@ import ZShell
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 CustomRect {
 	id: root
@@ -12,31 +13,30 @@ CustomRect {
 	anchors.left: parent.left
 	anchors.right: parent.right
 	border.color: {
-		let colour = DynamicColors.palette.m3outlineVariant;
+		let colour = Colors.palette.m3outlineVariant;
 		if (root.modelData.type === Toast.Success)
-			colour = DynamicColors.palette.m3success;
+			colour = Colors.palette.m3success;
 		if (root.modelData.type === Toast.Warning)
-			colour = DynamicColors.palette.m3secondaryContainer;
+			colour = Colors.palette.m3secondaryContainer;
 		if (root.modelData.type === Toast.Error)
-			colour = DynamicColors.palette.m3error;
+			colour = Colors.palette.m3error;
 		return Qt.alpha(colour, 0.3);
 	}
 	border.width: 1
 	color: {
 		if (root.modelData.type === Toast.Success)
-			return DynamicColors.palette.m3successContainer;
+			return Colors.palette.m3successContainer;
 		if (root.modelData.type === Toast.Warning)
-			return DynamicColors.palette.m3secondary;
+			return Colors.palette.m3secondary;
 		if (root.modelData.type === Toast.Error)
-			return DynamicColors.palette.m3errorContainer;
+			return Colors.palette.m3errorContainer;
-		return DynamicColors.palette.m3surface;
+		return Colors.palette.m3surface;
 	}
-	implicitHeight: layout.implicitHeight + Appearance.padding.smaller * 2
+	implicitHeight: layout.implicitHeight + Tokens.padding.small * 2
-	radius: Appearance.rounding.normal
+	radius: Tokens.rounding.medium
 
 	Behavior on border.color {
-		CAnim {
+		CAnim {}
-		}
 	}
 
 	Elevation {
@@ -51,24 +51,24 @@ CustomRect {
 		id: layout
 
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.normal
+		anchors.leftMargin: Tokens.padding.small
-		anchors.margins: Appearance.padding.smaller
+		anchors.margins: Tokens.padding.small
-		anchors.rightMargin: Appearance.padding.normal
+		anchors.rightMargin: Tokens.padding.small
-		spacing: Appearance.spacing.normal
+		spacing: Tokens.spacing.medium
 
 		CustomRect {
 			color: {
 				if (root.modelData.type === Toast.Success)
-					return DynamicColors.palette.m3success;
+					return Colors.palette.m3success;
 				if (root.modelData.type === Toast.Warning)
-					return DynamicColors.palette.m3secondaryContainer;
+					return Colors.palette.m3secondaryContainer;
 				if (root.modelData.type === Toast.Error)
-					return DynamicColors.palette.m3error;
+					return Colors.palette.m3error;
-				return DynamicColors.palette.m3surfaceContainerHigh;
+				return Colors.palette.m3surfaceContainerHigh;
 			}
-			implicitHeight: icon.implicitHeight + Appearance.padding.smaller * 2
+			implicitHeight: icon.implicitHeight + Tokens.padding.small * 2
 			implicitWidth: implicitHeight
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.medium
 
 			MaterialIcon {
 				id: icon
@@ -76,14 +76,14 @@ CustomRect {
 				anchors.centerIn: parent
 				color: {
 					if (root.modelData.type === Toast.Success)
-						return DynamicColors.palette.m3onSuccess;
+						return Colors.palette.m3onSuccess;
 					if (root.modelData.type === Toast.Warning)
-						return DynamicColors.palette.m3onSecondaryContainer;
+						return Colors.palette.m3onSecondaryContainer;
 					if (root.modelData.type === Toast.Error)
-						return DynamicColors.palette.m3onError;
+						return Colors.palette.m3onError;
-					return DynamicColors.palette.m3onSurfaceVariant;
+					return Colors.palette.m3onSurfaceVariant;
 				}
-				font.pointSize: Math.round(Appearance.font.size.large * 1.2)
+				fontStyle: Tokens.font.icon.builders.large.scale(1.2).build()
 				text: root.modelData.icon
 			}
 		}
@@ -98,15 +98,15 @@ CustomRect {
 				Layout.fillWidth: true
 				color: {
 					if (root.modelData.type === Toast.Success)
-						return DynamicColors.palette.m3onSuccessContainer;
+						return Colors.palette.m3onSuccessContainer;
 					if (root.modelData.type === Toast.Warning)
-						return DynamicColors.palette.m3onSecondary;
+						return Colors.palette.m3onSecondary;
 					if (root.modelData.type === Toast.Error)
-						return DynamicColors.palette.m3onErrorContainer;
+						return Colors.palette.m3onErrorContainer;
-					return DynamicColors.palette.m3onSurface;
+					return Colors.palette.m3onSurface;
 				}
 				elide: Text.ElideRight
-				font.pointSize: Appearance.font.size.normal
+				font: Tokens.font.title.small
 				text: root.modelData.title
 			}
 
@@ -114,12 +114,12 @@ CustomRect {
 				Layout.fillWidth: true
 				color: {
 					if (root.modelData.type === Toast.Success)
-						return DynamicColors.palette.m3onSuccessContainer;
+						return Colors.palette.m3onSuccessContainer;
 					if (root.modelData.type === Toast.Warning)
-						return DynamicColors.palette.m3onSecondary;
+						return Colors.palette.m3onSecondary;
 					if (root.modelData.type === Toast.Error)
-						return DynamicColors.palette.m3onErrorContainer;
+						return Colors.palette.m3onErrorContainer;
-					return DynamicColors.palette.m3onSurface;
+					return Colors.palette.m3onSurface;
 				}
 				elide: Text.ElideRight
 				opacity: 0.8

Components/Toast/Toasts.qml

@@ -4,13 +4,13 @@ import ZShell
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
 
 	property bool flag
-	readonly property int spacing: Appearance.spacing.small
+	readonly property int spacing: Tokens.spacing.small
 
 	implicitHeight: {
 		let h = -spacing;
@@ -21,7 +21,7 @@ Item {
 		}
 		return h;
 	}
-	implicitWidth: Config.utilities.sizes.toastWidth - Appearance.padding.normal * 2
+	implicitWidth: Config.utilities.sizes.toastWidth - Tokens.padding.small * 2
 
 	Repeater {
 		id: repeater
@@ -81,8 +81,8 @@ Item {
 
 		Behavior on anchors.bottomMargin {
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				duration: Tokens.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				easing: Tokens.anim.expressiveDefaultSpatial
 			}
 		}
 		Behavior on opacity {
@@ -104,8 +104,8 @@ Item {
 		Anim {
 			id: initAnim
 
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+			easing: Tokens.anim.expressiveDefaultSpatial
 			from: 0
 			properties: "opacity,scale"
 			target: toast

Components/VerticalFadeListView.qml

@@ -7,7 +7,9 @@ CustomListView {
 	id: root
 
 	property real endFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
+	property bool fadeEnabled: true
 	property real fadeAmount: 0.1
+	property real fadeThreshold: 0.0
 	readonly property bool horizontal: orientation === ListView.Horizontal
 	property real startFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
 
@@ -16,7 +18,9 @@ CustomListView {
 	}
 
 	function fadeShouldBeActive(isStart: bool): bool {
-		// When content is smaller than flickable size, hide fade when rebound starts.
+		if (!fadeEnabled)
+			return false;
+
 		if (contentSize() + marginStart() + marginEnd() < viewportSize() && rebound.running && ((isStart ? overshootStart() > 0 : overshootStart() < 0))) {
 			return false;
 		}
@@ -28,11 +32,11 @@ CustomListView {
 	}
 
 	function marginEnd(): real {
-		return horizontal ? rightMargin : bottomMargin;
+		return horizontal ? rightMargin - fadeThreshold : bottomMargin - fadeThreshold;
 	}
 
 	function marginStart(): real {
-		return horizontal ? leftMargin : topMargin;
+		return horizontal ? leftMargin - fadeThreshold : topMargin - fadeThreshold;
 	}
 
 	function overshootStart(): real {

Components/VerticalScrollBarTrack.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import ZShell.Config
+import qs.Services
+
+CustomClippingRect {
+	id: track
+
+	required property var scrollBar
+	required property var mouseArea
+
+	anchors.bottom: parent.bottom
+	anchors.right: parent.right
+	anchors.top: parent.top
+	implicitWidth: handle.implicitWidth
+	radius: Tokens.rounding.full
+
+	CustomRect {
+		id: handle
+
+		anchors.right: parent.right
+		color: Colors.palette.m3secondary
+		implicitHeight: track.scrollBar.height * track.scrollBar.effectiveSize
+		implicitWidth: track.mouseArea.pressed || track.mouseArea.containsMouse ? Tokens.padding.extraSmall * 2 : Tokens.padding.extraSmall
+		opacity: {
+			if (!track.scrollBar.enabled)
+				return 0;
+			if (track.scrollBar.size === 1)
+				return 0;
+			if (track.mouseArea.pressed)
+				return 1;
+			if (track.mouseArea.containsMouse)
+				return 0.8;
+			if (track.scrollBar.policy === CustomScrollBar.AlwaysOn || track.scrollBar.shouldBeActive)
+				return 0.6;
+			return 0;
+		}
+		radius: Tokens.rounding.full
+		y: track.scrollBar.reversed ? track.scrollBar.height * (1 + track.scrollBar.nonAnimY) * track.scrollBar.travelScale : track.scrollBar.height * track.scrollBar.nonAnimY * track.scrollBar.travelScale
+
+		Behavior on implicitWidth {
+			Anim {}
+		}
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
+	}
+}

Components/WavyTopRect.qml

@@ -1,12 +1,13 @@
 import QtQuick
 import QtQuick.Shapes
-import qs.Config
+import ZShell.Config
+import qs.Services
 
 Shape {
 	id: root
 
 	property real amplitude: 3
-	property color color: DynamicColors.palette.m3surfaceContainer
+	property color color: Colors.palette.m3surfaceContainer
 	readonly property real waveHeight: amplitude * 2
 	property int waves: 4
 

Config/AccentColor.qml

@@ -1,13 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property Accents accents: Accents {
-	}
-
-	component Accents: JsonObject {
-		property string primary: "#4080ff"
-		property string primaryAlt: "#60a0ff"
-		property string warning: "#ff6b6b"
-		property string warningAlt: "#ff8787"
-	}
-}

Config/Appearance.qml

@@ -1,13 +0,0 @@
-pragma Singleton
-
-import Quickshell
-
-Singleton {
-	readonly property AppearanceConf.Anim anim: Config.appearance.anim
-	readonly property AppearanceConf.Deform deform: Config.appearance.deform
-	readonly property AppearanceConf.FontStuff font: Config.appearance.font
-	readonly property AppearanceConf.Padding padding: Config.appearance.padding
-	readonly property AppearanceConf.Rounding rounding: Config.appearance.rounding
-	readonly property AppearanceConf.Spacing spacing: Config.appearance.spacing
-	readonly property AppearanceConf.Transparency transparency: Config.appearance.transparency
-}

Config/AppearanceConf.qml

@@ -1,116 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property Anim anim: Anim {
-	}
-	property Deform deform: Deform {
-	}
-	property FontStuff font: FontStuff {
-	}
-	property Padding padding: Padding {
-	}
-	property Rounding rounding: Rounding {
-	}
-	property Spacing spacing: Spacing {
-	}
-	property Transparency transparency: Transparency {
-	}
-
-	component Anim: JsonObject {
-		property AnimCurves curves: AnimCurves {
-		}
-		property AnimDurations durations: AnimDurations {
-		}
-		property real mediaGifSpeedAdjustment: 300
-		property real sessionGifSpeed: 0.7
-	}
-	component AnimCurves: JsonObject {
-		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-		property list<real> expressiveDefaultEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
-		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-		property list<real> expressiveFastEffects: [0.31, 0.94, 0.34, 1, 1, 1]
-		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
-		property list<real> expressiveSlowEffects: [0.34, 0.88, 0.34, 1, 1, 1]
-		property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
-		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-	}
-	component AnimDurations: JsonObject {
-		property int expressiveDefaultSpatial: 500 * scale
-		property int expressiveEffects: 200 * scale
-		property int expressiveFastEffects: 150 * scale
-		property int expressiveFastSpatial: 350 * scale
-		property int expressiveSlowEffects: 300 * scale
-		property int extraLarge: 1000 * scale
-		property int large: 600 * scale
-		property int normal: 400 * scale
-		property real scale: 1
-		property int small: 200 * scale
-	}
-	component Deform: JsonObject {
-		property real scale: 1
-	}
-	component FontFamily: JsonObject {
-		property string clock: "Rubik"
-		property string material: "Material Symbols Rounded"
-		property string mono: "CaskaydiaCove NF"
-		property string sans: "Segoe UI Variable Text"
-	}
-	component FontSize: JsonObject {
-		property int extraLarge: 28 * scale
-		property int large: 18 * scale
-		property int larger: 16 * scale
-		property int medium: 14 * scale
-		property int normal: 13 * scale
-		property real scale: 1
-		property int small: 11 * scale
-		property int smaller: 12 * scale
-	}
-	component FontStuff: JsonObject {
-		property FontFamily family: FontFamily {
-		}
-		property FontSize size: FontSize {
-		}
-	}
-	component Padding: JsonObject {
-		property int extraLarge: 28 * scale
-		property int extraLargeIncreased: 32 * scale
-		property int extraSmall: 4 * scale
-		property int large: 16 * scale
-		property int largeIncreased: 20 * scale
-		property int larger: 12 * scale
-		property int normal: 8 * scale
-		property real scale: 1
-		property int small: 5 * scale
-		property int smaller: 7 * scale
-		property int smallest: 2 * scale
-	}
-	component Rounding: JsonObject {
-		property int extraSmall: 4 * scale
-		property int full: 1000 * scale
-		property int large: 24 * scale
-		property int medium: 16 * scale
-		property int normal: 18 * scale
-		property real scale: 1
-		property int small: 12 * scale
-		property int smallest: 8 * scale
-	}
-	component Spacing: JsonObject {
-		property int extraSmall: 4 * scale
-		property int large: 20 * scale
-		property int larger: 16 * scale
-		property int normal: 12 * scale
-		property real scale: 1
-		property int small: 8 * scale
-		property int smaller: 10 * scale
-	}
-	component Transparency: JsonObject {
-		property real base: 0.85
-		property bool enabled: false
-		property real layers: 0.4
-	}
-}

Config/BackgroundConfig.qml

@@ -1,14 +0,0 @@
-import Quickshell.Io
-import qs.Config
-
-JsonObject {
-	property bool enabled: true
-	property int wallFadeDuration: MaterialEasing.standardTime
-	property real alignX: 0.5
-	property real alignY: 0.5
-	property real zoom: 1.0
-	property real sourceClipX: 0
-	property real sourceClipY: 0
-	property real sourceClipW: 0
-	property real sourceClipH: 0
-}

Config/BarConfig.qml

@@ -1,85 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool autoHide: false
-	property int border: 8
-	property list<var> entries: [
-		{
-			id: "workspaces",
-			enabled: true
-		},
-		{
-			id: "media",
-			enabled: true
-		},
-		{
-			id: "resources",
-			enabled: true
-		},
-		{
-			id: "updates",
-			enabled: true
-		},
-		{
-			id: "spacer",
-			enabled: true
-		},
-		{
-			id: "activeWindow",
-			enabled: true
-		},
-		{
-			id: "spacer",
-			enabled: true
-		},
-		{
-			id: "hyprsunset",
-			enabled: true
-		},
-		{
-			id: "tray",
-			enabled: true
-		},
-		{
-			id: "network",
-			enabled: false
-		},
-		{
-			id: "clock",
-			enabled: true
-		},
-		{
-			id: "notifBell",
-			enabled: true
-		},
-	]
-	property int height: 34
-	property bool hideWhenNotif: false
-	property Popouts popouts: Popouts {
-	}
-	property int rounding: 8
-	property int smoothing: 32
-	property Tray tray: Tray {
-	}
-
-	component Popouts: JsonObject {
-		property bool activeWindow: true
-		property bool audio: true
-		property bool clock: true
-		property bool network: true
-		property bool resources: true
-		property bool tray: true
-		property bool upower: true
-	}
-	component Tray: JsonObject {
-		property bool recolorIcons: false
-		property bool showAudio: true
-		property bool showBluetooth: false
-		property bool showMicrophone: true
-		property bool showNetwork: false
-		property bool showOnHover: false
-		property bool showPower: true
-		property bool showWifi: false
-		property int trayIconSize: 24
-	}
-}

Config/ClipboardConfig.qml

@@ -1,15 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int maxEntriesShown: 10
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int itemHeight: 60
-		property int minPreviewWidth: 200
-		property int previewWidth: 500
-		property int width: 500
-	}
-}

Config/Colors.qml

@@ -1,13 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property Presets presets: Presets {
-	}
-	property string schemeType: "vibrant"
-
-	component Presets: JsonObject {
-		property string accent: ""
-		property string name: ""
-		property string variant: ""
-	}
-}

Config/Config.qml

@@ -1,186 +0,0 @@
-pragma Singleton
-
-import Quickshell
-import Quickshell.Io
-import ZShell
-import QtQuick
-import qs.Helpers
-import qs.Paths
-
-Singleton {
-	id: root
-
-	property alias appearance: adapter.appearance
-	property alias background: adapter.background
-	property alias bar: adapter.bar
-	property alias clipboard: adapter.clipboard
-	property alias colors: adapter.colors
-	property alias dashboard: adapter.dashboard
-	property alias dock: adapter.dock
-	property alias general: adapter.general
-	property alias launcher: adapter.launcher
-	property alias lock: adapter.lock
-	property bool migratingLegacyBar: false
-	property alias notifs: adapter.notifs
-	property alias osd: adapter.osd
-	property alias overview: adapter.overview
-	property bool recentlySaved: false
-	property alias screenshot: adapter.screenshot
-	property alias services: adapter.services
-	property alias sidebar: adapter.sidebar
-	property alias utilities: adapter.utilities
-
-	function applyLegacyBarConfig(legacy): void {
-		const tray = legacy.tray ?? {};
-		const popouts = legacy.popouts ?? {};
-
-		bar.autoHide = pick(legacy.autoHide, bar.autoHide);
-		bar.hideWhenNotif = pick(legacy.hideWhenNotif, bar.hideWhenNotif);
-		bar.rounding = pick(legacy.rounding, bar.rounding);
-		bar.border = pick(legacy.border, bar.border);
-		bar.smoothing = pick(legacy.smoothing, bar.smoothing);
-		bar.height = pick(legacy.height, bar.height);
-		bar.tray.trayIconSize = pick(tray.trayIconSize, bar.tray.trayIconSize);
-		bar.popouts.tray = pick(popouts.tray, bar.popouts.tray);
-		bar.popouts.audio = pick(popouts.audio, bar.popouts.audio);
-		bar.popouts.activeWindow = pick(popouts.activeWindow, bar.popouts.activeWindow);
-		bar.popouts.resources = pick(popouts.resources, bar.popouts.resources);
-		bar.popouts.clock = pick(popouts.clock, bar.popouts.clock);
-		bar.popouts.network = pick(popouts.network, bar.popouts.network);
-		bar.popouts.upower = pick(popouts.upower, bar.popouts.upower);
-		bar.entries = pick(legacy.entries, bar.entries);
-	}
-
-	function migrateLegacyBarConfig(raw): bool {
-		if (raw.bar !== undefined || raw.barConfig === undefined)
-			return false;
-
-		migratingLegacyBar = true;
-		applyLegacyBarConfig(raw.barConfig);
-		migratingLegacyBar = false;
-		return true;
-	}
-
-	function pick(value, fallback) {
-		return value === undefined ? fallback : value;
-	}
-
-	function save(): void {
-		saveTimer.restart();
-		recentlySaved = true;
-		recentSaveCooldown.restart();
-	}
-
-	function saveNoToast(): void {
-		saveTimer.restart();
-	}
-
-	ElapsedTimer {
-		id: timer
-	}
-
-	Timer {
-		id: saveTimer
-
-		interval: 500
-
-		onTriggered: {
-			timer.restart();
-			fileView.writeAdapter();
-		}
-	}
-
-	Timer {
-		id: recentSaveCooldown
-
-		interval: 2000
-
-		onTriggered: {
-			root.recentlySaved = false;
-		}
-	}
-
-	FileView {
-		id: fileView
-
-		path: `${Paths.config}/config.json`
-		watchChanges: true
-
-		onAdapterUpdated: {
-			if (!root.migratingLegacyBar)
-				root.save();
-		}
-		onFileChanged: {
-			if (!root.recentlySaved) {
-				timer.restart();
-				reload();
-			} else {
-				reload();
-			}
-		}
-		onLoadFailed: err => {
-			if (err !== FileViewError.FileNotFound)
-				Toaster.toast(qsTr("Failed to read config"), FileViewError.toString(err), "settings_alert", Toast.Warning);
-		}
-		onLoaded: {
-			ModeScheduler.checkStartup();
-			Hyprsunset.checkStartup();
-			try {
-				const raw = JSON.parse(text());
-				const migrated = root.migrateLegacyBarConfig(raw);
-				if (migrated)
-					root.save();
-
-				const elapsed = timer.elapsedMs();
-
-				if (adapter.utilities.toasts.configLoaded && !root.recentlySaved) {
-					Toaster.toast(qsTr("Config loaded"), qsTr("Config loaded in %1ms").arg(elapsed), "rule_settings");
-				} else if (adapter.utilities.toasts.configLoaded && root.recentlySaved) {
-					Toaster.toast(qsTr("Config saved"), qsTr("Config reloaded in %1ms").arg(elapsed), "settings_alert");
-				}
-			} catch (e) {
-				Toaster.toast(qsTr("Failed to load config"), e.message, "settings_alert", Toast.Error);
-			}
-		}
-		onSaveFailed: err => Toaster.toast(qsTr("Failed to save config"), FileViewError.toString(err), "settings_alert", Toast.Error)
-
-		JsonAdapter {
-			id: adapter
-
-			property AppearanceConf appearance: AppearanceConf {
-			}
-			property BackgroundConfig background: BackgroundConfig {
-			}
-			property BarConfig bar: BarConfig {
-			}
-			property ClipboardConfig clipboard: ClipboardConfig {
-			}
-			property Colors colors: Colors {
-			}
-			property DashboardConfig dashboard: DashboardConfig {
-			}
-			property DockConfig dock: DockConfig {
-			}
-			property General general: General {
-			}
-			property Launcher launcher: Launcher {
-			}
-			property LockConf lock: LockConf {
-			}
-			property NotifConfig notifs: NotifConfig {
-			}
-			property Osd osd: Osd {
-			}
-			property Overview overview: Overview {
-			}
-			property Screenshot screenshot: Screenshot {
-			}
-			property Services services: Services {
-			}
-			property SidebarConfig sidebar: SidebarConfig {
-			}
-			property UtilConfig utilities: UtilConfig {
-			}
-		}
-	}
-}

Config/DashboardConfig.qml

@@ -1,37 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int mediaUpdateInterval: 500
-	property Performance performance: Performance {
-	}
-	property int resourceUpdateInterval: 1000
-	property Sizes sizes: Sizes {
-	}
-
-	component Performance: JsonObject {
-		property bool enabled: true
-		property bool showBattery: true
-		property bool showCpu: true
-		property bool showGpu: true
-		property bool showMemory: true
-		property bool showNetwork: true
-		property bool showStorage: true
-		property bool showVram: true
-	}
-	component Sizes: JsonObject {
-		readonly property int dateTimeWidth: 110
-		readonly property int infoIconSize: 25
-		readonly property int infoWidth: 200
-		readonly property int mediaCoverArtSize: 150
-		readonly property int mediaProgressSweep: 180
-		readonly property int mediaProgressThickness: 8
-		readonly property int mediaVisualizerSize: 200
-		readonly property int mediaWidth: 200
-		readonly property int resourceProgessThickness: 10
-		readonly property int resourceSize: 200
-		readonly property int tabIndicatorHeight: 3
-		readonly property int tabIndicatorSpacing: 5
-		readonly property int weatherWidth: 250
-	}
-}

Config/DockConfig.qml

@@ -1,10 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enable: false
-	property real height: 60
-	property bool hoverToReveal: true
-	property list<string> ignoredAppRegexes: []
-	property list<string> pinnedApps: ["org.kde.dolphin", "kitty",]
-	property bool pinnedOnStartup: false
-}

Config/General.qml

@@ -1,68 +0,0 @@
-import Quickshell.Io
-import Quickshell
-
-JsonObject {
-	property Apps apps: Apps {
-	}
-	property Battery battery: Battery {
-	}
-	property Color color: Color {
-	}
-	property string dateFormat: "ddd d MMM - hh:mm:ss"
-	property bool desktopIcons: false
-	property Idle idle: Idle {
-	}
-	property string logo: ""
-	property bool showOverFullscreen: true
-	property string wallpaperPath: Quickshell.env("HOME") + "/Pictures/Wallpapers"
-
-	component Apps: JsonObject {
-		property list<string> archiver: ["ark"]
-		property list<string> audio: ["pavucontrol"]
-		property list<string> document: ["libreoffice"]
-		property list<string> editor: ["kate"]
-		property list<string> explorer: ["dolphin"]
-		property list<string> image: ["imv"]
-		property list<string> playback: ["mpv"]
-		property list<string> terminal: ["kitty"]
-	}
-	component Battery: JsonObject {
-		property int critPerc: 5
-		property list<var> popupThresholds: [
-			{
-				perc: 20,
-				name: qsTr("Low battery"),
-				message: qsTr("Battery is low"),
-				icon: "battery_android_frame_2"
-			},
-		]
-	}
-	component Color: JsonObject {
-		property int hyprsunsetTemp: 5000
-		property string mode: "dark"
-		property bool neovimColors: false
-		property bool scheduleDark: false
-		property int scheduleDarkEnd: 0
-		property int scheduleDarkStart: 0
-		property bool scheduleHyprsunset: false
-		property int scheduleHyprsunsetEnd: 0
-		property int scheduleHyprsunsetStart: 0
-		property bool schemeGeneration: true
-		property bool smart: false
-	}
-	component Idle: JsonObject {
-		property list<var> timeouts: [
-			{
-				name: "Lock",
-				timeout: 180,
-				idleAction: "lock"
-			},
-			{
-				name: "Screen",
-				timeout: 300,
-				idleAction: "dpms off",
-				activeAction: "dpms on"
-			}
-		]
-	}
-}

Config/IdleTimeout.qml

@@ -1,15 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property list<var> timeouts: [
-		{
-			timeout: 180,
-			idleAction: "lock"
-		},
-		{
-			timeout: 300,
-			idleAction: "dpms off",
-			activeAction: "dpms on"
-		}
-	]
-}

Config/Launcher.qml

@@ -1,114 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property string actionPrefix: ">"
-	property list<var> actions: [
-		{
-			name: "Calculator",
-			icon: "calculate",
-			description: "Do simple math equations",
-			command: ["autocomplete", "calc"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Light",
-			icon: "light_mode",
-			description: "Change to light mode",
-			command: ["setMode", "light"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Dark",
-			icon: "dark_mode",
-			description: "Change to dark mode",
-			command: ["setMode", "dark"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Wallpaper",
-			icon: "image",
-			description: "Change the current wallpaper",
-			command: ["autocomplete", "wallpaper"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Variant",
-			icon: "colors",
-			description: "Change the current scheme variant",
-			command: ["autocomplete", "variant"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Shutdown",
-			icon: "power_settings_new",
-			description: "Shutdown the system",
-			command: ["systemctl", "poweroff"],
-			enabled: true,
-			dangerous: true
-		},
-		{
-			name: "Reboot",
-			icon: "cached",
-			description: "Reboot the system",
-			command: ["systemctl", "reboot"],
-			enabled: true,
-			dangerous: true
-		},
-		{
-			name: "Logout",
-			icon: "logout",
-			description: "Log out of the current session",
-			command: ["loginctl", "terminate-user", ""],
-			enabled: true,
-			dangerous: true
-		},
-		{
-			name: "Lock",
-			icon: "lock",
-			description: "Lock the current session",
-			command: ["loginctl", "lock-session"],
-			enabled: true,
-			dangerous: false
-		},
-		{
-			name: "Sleep",
-			icon: "bedtime",
-			description: "Suspend then hibernate",
-			command: ["systemctl", "suspend-then-hibernate"],
-			enabled: true,
-			dangerous: false
-		},
-	]
-	property int dragThreshold: 50
-	property bool enableDangerousActions: false
-	property bool enabled: true
-	property list<string> favoriteApps: []
-	property list<string> hiddenApps: []
-	property int maxAppsShown: 10
-	property int maxWallpapers: 7
-	property Sizes sizes: Sizes {
-	}
-	property string specialPrefix: "@"
-	property UseFuzzy useFuzzy: UseFuzzy {
-	}
-	property bool uwsm: true
-
-	component Sizes: JsonObject {
-		property int itemHeight: 50
-		property int itemWidth: 600
-		property int wallpaperHeight: 200
-		property int wallpaperWidth: 280
-	}
-	component UseFuzzy: JsonObject {
-		property bool actions: false
-		property bool apps: false
-		property bool schemes: false
-		property bool variants: false
-		property bool wallpapers: false
-	}
-}

Config/LockConf.qml

@@ -1,18 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property int blurAmount: 40
-	property bool enableFprint: true
-	property int maxFprintTries: 3
-	property bool recolorLogo: false
-	property bool showNotifContent: false
-	property bool showNotifIcon: true
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int centerWidth: 600
-		property real heightMult: 0.7
-		property real ratio: 16 / 9
-	}
-}

Config/MaterialEasing.qml

@@ -1,26 +0,0 @@
-pragma Singleton
-import Quickshell
-
-Singleton {
-	id: root
-
-	readonly property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-	readonly property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-	readonly property int emphasizedAccelTime: 200 * scale
-	readonly property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-	readonly property int emphasizedDecelTime: 400 * scale
-	readonly property int emphasizedTime: 500 * scale
-	readonly property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1.00, 1, 1]
-	readonly property int expressiveDefaultSpatialTime: 500 * scale
-	readonly property list<real> expressiveEffects: [0.34, 0.80, 0.34, 1.00, 1, 1]
-	readonly property int expressiveEffectsTime: 200 * scale
-	readonly property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.90, 1, 1]
-	readonly property int expressiveFastSpatialTime: 350 * scale
-	property real scale: Appearance.anim.durations.scale
-	readonly property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-	readonly property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-	readonly property int standardAccelTime: 200 * scale
-	readonly property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-	readonly property int standardDecelTime: 250 * scale
-	readonly property int standardTime: 300 * scale
-}

Config/NotifConfig.qml

@@ -1,21 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool actionOnClick: false
-	property int appNotifCooldown: 0
-	property real clearThreshold: 0.3
-	property int defaultExpireTimeout: 5000
-	property int expandThreshold: 20
-	property bool expire: true
-	property int groupPreviewNum: 3
-	property bool openExpanded: false
-	property bool showInFullscreen: true
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int badge: 20
-		property int image: 41
-		property int width: 400
-	}
-}

Config/Osd.qml

@@ -1,16 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool allMonBrightness: false
-	property bool enableBrightness: true
-	property bool enableMicrophone: true
-	property bool enabled: true
-	property int hideDelay: 3000
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int sliderHeight: 150
-		property int sliderWidth: 30
-	}
-}

Config/Overview.qml

@@ -1,8 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property int columns: 5
-	property bool enable: false
-	property int rows: 2
-	property real scale: 0.16
-}

Config/Screenshot.qml

@@ -1,13 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enable_pp: true
-	property string mode: "manual"
-	property real radius: 12.0
-	property bool rounding: false
-	property bool shadow: true
-	property real shadow_blur: 22.0
-	property list<int> shadow_color: [0, 0, 0, 160]
-	property real shadow_offset_x: 5.0
-	property real shadow_offset_y: 5.0
-}

Config/Services.qml

@@ -1,23 +0,0 @@
-import Quickshell.Io
-import QtQuick
-
-JsonObject {
-	property real audioIncrement: 0.1
-	property real brightnessIncrement: 0.1
-	property bool ddcutilService: false
-	property string defaultPlayer: "Spotify"
-	property string gpuType: ""
-	property real maxVolume: 1.0
-	property real minBrightness: 0.01
-	property list<var> playerAliases: [
-		{
-			"from": "com.github.th_ch.youtube_music",
-			"to": "YT Music"
-		}
-	]
-	property bool updates: true
-	property bool useFahrenheit: false
-	property bool useTwelveHourClock: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().includes("a")
-	property int visualizerBars: 30
-	property string weatherLocation: ""
-}

Config/SidebarConfig.qml

@@ -1,12 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property int dragThreshold: 30
-	property bool enabled: true
-	property Sizes sizes: Sizes {
-	}
-
-	component Sizes: JsonObject {
-		property int width: 430
-	}
-}

Config/Transparency.qml

@@ -1,7 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property real base: 0.85
-	property bool enabled: false
-	property real layers: 0.4
-}

Config/UtilConfig.qml

@@ -1,35 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property bool enabled: true
-	property int maxToasts: 4
-	property Sizes sizes: Sizes {
-	}
-	property Toasts toasts: Toasts {
-	}
-	property Vpn vpn: Vpn {
-	}
-
-	component Sizes: JsonObject {
-		property int toastWidth: 430
-		property int width: 430
-	}
-	component Toasts: JsonObject {
-		property bool audioInputChanged: true
-		property bool audioOutputChanged: true
-		property bool capsLockChanged: true
-		property bool chargingChanged: true
-		property bool configLoaded: true
-		property bool dndChanged: true
-		property bool gameModeChanged: true
-		property bool kbLayoutChanged: true
-		property bool kbLimit: true
-		property bool nowPlaying: false
-		property bool numLockChanged: true
-		property bool vpnChanged: true
-	}
-	component Vpn: JsonObject {
-		property bool enabled: false
-		property list<var> provider: ["netbird"]
-	}
-}

Config/WorkspaceWidget.qml

@@ -1,6 +0,0 @@
-import Quickshell.Io
-
-JsonObject {
-	property string inactiveTextColor: "white"
-	property string textColor: "black"
-}

Daemons/Audio.qml

@@ -5,7 +5,7 @@ import ZShell
 import Quickshell
 import Quickshell.Services.Pipewire
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 Singleton {
 	id: root

Daemons/BatteryService.qml

@@ -2,7 +2,7 @@ import Quickshell
 import Quickshell.Services.UPower
 import QtQuick
 import ZShell
-import qs.Config
+import ZShell.Config
 import qs.Components.Toast
 import qs.Helpers
 

Daemons/NotifServer.qml

@@ -10,8 +10,9 @@ import ZShell
 import qs.Components
 import qs.Modules
 import qs.Helpers
+import qs.Services
 import qs.Paths
-import qs.Config
+import ZShell.Config
 
 Singleton {
 	id: root
@@ -25,7 +26,7 @@ Singleton {
 	property alias server: server
 
 	function shouldThrottle(appName: string): bool {
-		if (props.dnd || [...Visibilities.screens.values()].some(v => v.sidebar))
+		if (props.dnd || ShellState.anySidebarOpen())
 			return false;
 
 		const key = (appName || "unknown").trim().toLowerCase();

Drawers/Drawers.qml

@@ -11,15 +11,46 @@ Variants {
 
 		required property ShellScreen modelData
 
+		function rebuild(): void {
+			loader.active = false;
+			loader.active = true;
+		}
+
+		LazyLoader {
+			id: loader
+
+			active: true
+
+			Drawer {
+				screen: scope.modelData
+			}
+		}
+
+		Connections {
+			function onConfigPositionChanged(): void {
+				Qt.callLater(scope.rebuild);
+			}
+
+			target: (loader.item as Drawer)?.geometry ?? null
+		}
+	}
+
+	component Drawer: Scope {
+		id: drawer
+
+		readonly property alias geometry: content.geometry
+		required property ShellScreen screen
+
 		Exclusions {
 			bar: content.bar
-			screen: scope.modelData
+			geometry: content.geometry
+			screen: drawer.screen
 		}
 
 		Windows {
 			id: content
 
-			screen: scope.modelData
+			screen: drawer.screen
 		}
 	}
 }

Drawers/Drawing.qml

@@ -3,28 +3,23 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import ZShell.Internal
+import qs.Components
 
 Item {
 	id: root
 
 	readonly property alias content: contentLoader.item
-	readonly property PersistentProperties drawingState: PersistentProperties {
+	required property ScreenState screenState
-		property color penColor: "white"
-		property int penWidth: 4
-
-		reloadableId: "drawingState"
-	}
-	required property PersistentProperties visibilities
 
 	Loader {
 		id: contentLoader
 
-		active: root.visibilities.isDrawing
+		active: root.screenState.isDrawing
 		anchors.fill: parent
 
 		sourceComponent: StrokeCanvas {
-			penColor: root.drawingState.penColor
+			penColor: root.screenState.penColor
-			penWidth: root.drawingState.penWidth
+			penWidth: root.screenState.penWidth
 		}
 	}
 }

Drawers/EdgeGeometry.qml

@@ -0,0 +1,55 @@
+import QtQuick
+import qs.Modules.Bar as Bar
+
+QtObject {
+	id: root
+
+	required property Bar.BarLoader bar
+	readonly property real barClamped: bar.clampedExtent
+	readonly property real barExtent: bar.extent
+	readonly property bool barOnBottom: position === "bottom"
+	readonly property bool barOnLeft: position === "left"
+	readonly property bool barOnTop: position === "top"
+	required property string configPosition
+	readonly property bool horizontal: position !== "left"
+	readonly property string position: configPosition === "top" || configPosition === "bottom" ? configPosition : "left"
+	required property var win
+
+	function axisPos(x: real, y: real): real {
+		return horizontal ? x : y;
+	}
+
+	function barContains(x: real, y: real, clamped = false): bool {
+		const extent = clamped ? barClamped : barExtent;
+		if (barOnTop)
+			return y < extent;
+		if (barOnBottom)
+			return y > win.height - extent;
+		return x < extent;
+	}
+
+	function insetBottom(border: real, clamped = false): real {
+		return barOnBottom ? (clamped ? barClamped : barExtent) : border;
+	}
+
+	function insetLeft(border: real, clamped = false): real {
+		return barOnLeft ? (clamped ? barClamped : barExtent) : border;
+	}
+
+	function insetTop(border: real, clamped = false): real {
+		return barOnTop ? (clamped ? barClamped : barExtent) : border;
+	}
+
+	function inwardDrag(dragX: real, dragY: real): real {
+		if (barOnTop)
+			return dragY;
+		if (barOnBottom)
+			return -dragY;
+		return dragX;
+	}
+
+	onConfigPositionChanged: {
+		if (!["left", "top", "bottom"].includes(configPosition))
+			console.warn(`Invalid bar position '${configPosition}', falling back to left`);
+	}
+}

Drawers/Exclusions.qml

@@ -1,27 +1,33 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
+import Quickshell.Wayland
 import QtQuick
-import qs.Config
+import ZShell.Config
 import qs.Components
 
 Scope {
 	id: root
 
 	required property Item bar
+	required property EdgeGeometry geometry
 	required property ShellScreen screen
 
 	ExclusionZone {
 		id: top
 
+		WlrLayershell.layer: WlrLayer.Overlay
+		anchors.left: true
+		anchors.right: true
 		anchors.top: true
-		exclusiveZone: root.bar.exclusiveZone
+		hasBar: root.geometry.barOnTop
 	}
 
 	ExclusionZone {
 		id: left
 
 		anchors.left: true
+		hasBar: root.geometry.barOnLeft
 	}
 
 	ExclusionZone {
@@ -34,6 +40,7 @@ Scope {
 		id: bottom
 
 		anchors.bottom: true
+		hasBar: root.geometry.barOnBottom
 	}
 
 	Timer {
@@ -44,7 +51,9 @@ Scope {
 	}
 
 	component ExclusionZone: CustomWindow {
-		exclusiveZone: Config.bar.border
+		property bool hasBar
+
+		exclusiveZone: hasBar ? root.bar.exclusiveZone : Config.bar.border
 		implicitHeight: 1
 		implicitWidth: 1
 		name: "Bar-Exclusion"

Drawers/Interactions.qml

@@ -1,9 +1,9 @@
 import Quickshell
 import QtQuick
+import ZShell.Config
 import qs.Components
-import qs.Config
 import qs.Helpers
-import qs.Modules as BarPopouts
+import qs.Modules.Bar.Popouts
 
 Item {
 	id: root
@@ -12,43 +12,47 @@ Item {
 	required property real borderThickness
 	property bool dashboardShortcutActive
 	required property Drawing drawing
+	required property EdgeGeometry geometry
 	property bool osdShortcutActive
 	required property Panels panels
-	required property BarPopouts.Wrapper popouts
+	required property Wrapper popouts
 	required property ShellScreen screen
 	property bool singleGestureTriggered: false
 	property bool utilitiesShortcutActive
-	required property PersistentProperties visibilities
+	required property ScreenState screenState
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		return y > root.height - panel.height - Config.bar.border && withinPanelWidth(panel, x, y);
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
+		return y > root.height - (panelHeight + geometry.insetBottom(borderThickness)) && withinPanelWidth(panel, x, y);
 	}
 
 	function inLeftPanel(panel: Item, x: real, y: real): bool {
-		return x < panel.x + panel.width + Config.bar.border && withinPanelHeight(panel, x, y);
+		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+	}
+
+	function inPopoutArea(x: real, y: real): bool {
+		const panel = panels.popoutsWrapper;
+		if (!geometry.horizontal)
+			return inLeftPanel(panel, x, y);
+		return withinPanelWidth(panel, x, y) && withinPanelHeight(panel, x, y);
 	}
 
 	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x - Config.bar.border && withinPanelHeight(panel, x, y);
+		return x > panel.x + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
 	}
 
 	function inTopPanel(panel: Item, x: real, y: real): bool {
-		return y < bar.implicitHeight + panel.height && withinPanelWidth(panel, x, y);
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-	}
+		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
-
-	function onWheel(event: WheelEvent): void {
-		if (event.x < bar.implicitWidth) {
-			bar.handleWheel(event.y, event.angleDelta);
-		}
 	}
 
 	function withinPanelHeight(panel: Item, x: real, y: real): bool {
-		const panelY = panel.y + bar.implicitHeight;
+		const panelY = panel.y + geometry.insetTop(borderThickness);
 		return y >= panelY && y <= panelY + panel.height;
 	}
 
 	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x + root.borderThickness;
+		const panelX = panel.x + geometry.insetLeft(borderThickness);
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
@@ -59,7 +63,7 @@ Item {
 
 		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
 		dragThreshold: 0
-		enabled: !root.visibilities.isDrawing
+		enabled: !root.screenState.isDrawing
 		grabPermissions: PointerHandler.CanTakeOverFromHandlersOfSameType | PointerHandler.ApprovesTakeOverByAnything
 		maximumPointCount: 1
 		minimumPointCount: 1
@@ -72,45 +76,59 @@ Item {
 		onCentroidChanged: {
 			const x = centroid.position.x;
 			const y = centroid.position.y;
-			const dragX = x - centroid.pressPosition.x;
+			const pressX = centroid.pressPosition.x;
-			const dragY = y - centroid.pressPosition.y;
+			const pressY = centroid.pressPosition.y;
+			const dragX = x - pressX;
+			const dragY = y - pressY;
 
-			if (centroid.pressPosition.y >= root.screen.height - Config.bar.border && centroid.pressPosition.x > root.screen.width / 5 && dragY < -Config.launcher.dragThreshold)
+			if (pressY >= root.screen.height - Config.bar.border && pressX > root.screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-				root.visibilities.launcher = true;
+				root.screenState.launcher = true;
 
 			if (root.singleGestureTriggered)
 				return;
 
-			if (centroid.pressPosition.y < root.bar.implicitHeight) {
+			const inDashboard = root.inTopPanel(root.panels.dashboardWrapper, pressX, pressY);
-				if (dragY > 20) {
+
-					root.visibilities.settings = true;
+			if (inDashboard && root.withinPanelWidth(root.panels.dashboardWrapper, x, y)) {
+				if (dragY > Config.dashboard.dragThreshold) {
+					root.screenState.dashboard = true;
 					root.singleGestureTriggered = true;
-				} else if (dragY < -20) {
+				} else if (dragY < -Config.dashboard.dragThreshold) {
-					root.visibilities.settings = false;
+					root.screenState.dashboard = false;
 					root.singleGestureTriggered = true;
 				}
 			}
 
-			if (centroid.pressPosition.y > root.screen.height - Config.bar.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
+			if (root.geometry.insetTop(root.borderThickness) > pressY && (Config.dashboard.showOnHover || !inDashboard)) {
-				root.visibilities.clipboard = true;
+				if (dragY > 20) {
+					root.screenState.settings = true;
+					root.singleGestureTriggered = true;
+				} else if (dragY < -20) {
+					root.screenState.settings = false;
+					root.singleGestureTriggered = true;
+				}
+			}
 
-			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.bar.implicitHeight && centroid.pressPosition.x > root.screen.width / 5 && !root.visibilities.launcher)
+			if (pressY > root.screen.height - root.geometry.insetBottom(root.borderThickness) && pressX < root.screen.width / 5 && dragY < -50)
+				root.screenState.clipboard = true;
+
+			if (!Config.dock.hoverToReveal && pressY > root.screen.height - root.geometry.insetTop(root.borderThickness) && pressX > root.screen.width / 5 && !root.screenState.launcher)
 				if (dragY < -10) {
-					root.visibilities.dock = true;
+					root.screenState.dock = true;
 					root.singleGestureTriggered = true;
 				}
 
-			if (centroid.pressPosition.x > root.screen.width - Config.bar.border && centroid.pressPosition.y < (root.screen.height / 2) && dragX < -Config.sidebar.dragThreshold) {
+			if (pressX > root.screen.width - Config.bar.border && pressY < (root.screen.height / 2) && dragX < -Config.sidebar.dragThreshold) {
-				root.visibilities.sidebar = true;
+				root.screenState.sidebar = true;
 				root.singleGestureTriggered = true;
 			}
 
-			if (centroid.pressPosition.x >= root.screen.width - Config.bar.border && centroid.pressPosition.y > (root.screen.height / 2) && dragX < -20) {
+			if (pressX >= root.screen.width - Config.bar.border && pressY > (root.screen.height / 2) && dragX < -20) {
 				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
 				root.singleGestureTriggered = true;
 			}
 
-			if (centroid.pressPosition.x <= Config.bar.border && dragX > 20) {
+			if (pressX <= Config.bar.border && dragX > 20) {
 				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
 				root.singleGestureTriggered = true;
 			}
@@ -123,7 +141,7 @@ Item {
 		property bool setInitialPoint: false
 
 		acceptedButtons: Qt.LeftButton | Qt.RightButton
-		enabled: root.visibilities.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
+		enabled: root.screenState.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
 
 		onActiveChanged: {
 			if (!active) {
@@ -158,15 +176,28 @@ Item {
 		}
 	}
 
+	Timer {
+		id: unhideTimer
+
+		interval: Config.bar.revealDelay
+		repeat: false
+		running: false
+
+		onTriggered: {
+			if (hoverHandler.hovered)
+				root.bar.isHovered = true;
+		}
+	}
+
 	HoverHandler {
 		id: hoverHandler
 
-		cursorShape: root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, point.position.x, point.position.y) ? Qt.BlankCursor : undefined
+		cursorShape: root.screenState.isDrawing && !root.inLeftPanel(root.panels.drawing, point.position.x, point.position.y) ? Qt.BlankCursor : undefined
 
 		onHoveredChanged: {
 			if (!hovered) {
 				if (!root.osdShortcutActive) {
-					root.visibilities.osd = false;
+					root.screenState.osd = false;
 					root.panels.osd.hovered = false;
 				}
 
@@ -174,15 +205,18 @@ Item {
 					root.popouts.hasCurrent = false;
 				}
 
-				if (Config.bar.autoHide)
+				if (Config.bar.autoHide || root.bar.fullscreen)
 					root.bar.isHovered = false;
+
+				if (root.screenState.dashboard && Config.dashboard.showOnHover)
+					root.screenState.dashboard = false;
 			}
 		}
 		onPointChanged: {
 			const x = point.position.x;
 			const y = point.position.y;
 
-			if (root.visibilities.isDrawing) {
+			if (root.screenState.isDrawing) {
 				if (root.inLeftPanel(root.panels.drawing, x, y) && !(drawingHandler.point.pressedButtons & Qt.LeftButton)) {
 					root.panels.drawing.expand();
 					root.drawing.content.hideHover();
@@ -193,9 +227,12 @@ Item {
 				return;
 			}
 
-			if (!root.visibilities.bar && Config.bar.autoHide && y < root.bar.implicitHeight)
+			if (!root.screenState.bar && Config.bar.autoHide && root.geometry.barContains(x, y, true))
 				root.bar.isHovered = true;
 
+			if (root.bar.fullscreen && !root.bar.isHovered)
+				unhideTimer.start();
+
 			if (root.panels.sidebar.offsetScale === 1) {
 				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
 
@@ -208,7 +245,7 @@ Item {
 				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
 
 				if (!root.osdShortcutActive) {
-					root.visibilities.osd = showOsd;
+					root.screenState.osd = showOsd;
 					root.panels.osd.hovered = showOsd;
 				} else if (showOsd) {
 					root.osdShortcutActive = false;
@@ -216,26 +253,32 @@ Item {
 				}
 			}
 
-			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
+			if (Config.dock.enable && Config.dock.hoverToReveal && !root.screenState.dock && !root.screenState.launcher && root.inBottomPanel(root.panels.dock, x, y))
-				root.visibilities.dock = true;
+				root.screenState.dock = true;
 
-			if (y < root.bar.implicitHeight)
+			const inDashboard = root.inTopPanel(root.panels.dashboardWrapper, x, y);
-				root.bar.checkPopout(x);
+
+			if (Config.dashboard.showOnHover)
+				root.screenState.dashboard = inDashboard;
+
+			if (root.geometry.barContains(x, y))
+				root.bar.checkPopout(root.geometry.axisPos(x, y));
 		}
 	}
 
 	Connections {
 		function onDashboardChanged() {
-			if (root.visibilities.dashboard) {
+			if (root.screenState.dashboard) {
 				const inDashboardArea = root.inTopPanel(root.panels.dashboard, root.mouseX, root.mouseY);
 				if (!inDashboardArea) {
 					root.dashboardShortcutActive = true;
 				}
 				if (root.panels.launcher.x + root.panels.launcher.width > root.panels.dashboardWrapper.x)
-					root.visibilities.launcher = false;
+					root.screenState.launcher = false;
 
-				root.visibilities.settings = false;
+				root.screenState.settings = false;
-				root.visibilities.sidebar = false;
+				root.screenState.sidebar = false;
+				root.screenState.resources = false;
 				root.popouts.hasCurrent = false;
 			} else {
 				root.dashboardShortcutActive = false;
@@ -243,12 +286,12 @@ Item {
 		}
 
 		function onIsDrawingChanged() {
-			if (!root.visibilities.isDrawing)
+			if (!root.screenState.isDrawing)
 				root.drawing.clear();
 		}
 
 		function onLauncherChanged() {
-			if (!root.visibilities.launcher) {
+			if (!root.screenState.launcher) {
 				root.dashboardShortcutActive = false;
 				root.osdShortcutActive = false;
 				root.utilitiesShortcutActive = false;
@@ -256,23 +299,23 @@ Item {
 				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
 
 				if (!inOsdArea) {
-					root.visibilities.osd = false;
+					root.screenState.osd = false;
 					root.panels.osd.hovered = false;
 				}
 			}
 
-			if (root.visibilities.launcher) {
+			if (root.screenState.launcher) {
 				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
-					root.visibilities.dashboard = false;
+					root.screenState.dashboard = false;
 				}
 
-				root.visibilities.dock = false;
+				root.screenState.dock = false;
-				root.visibilities.settings = false;
+				root.screenState.settings = false;
 			}
 		}
 
 		function onOsdChanged() {
-			if (root.visibilities.osd) {
+			if (root.screenState.osd) {
 				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
 				if (!inOsdArea) {
 					root.osdShortcutActive = true;
@@ -283,34 +326,33 @@ Item {
 		}
 
 		function onResourcesChanged() {
-			if (root.visibilities.resources && (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))) {
+			if (root.screenState.resources) {
-				root.popouts.hasCurrent = false;
+				if (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))
-			}
+					root.popouts.hasCurrent = false;
 
-			if (root.visibilities.resources)
+				root.screenState.settings = false;
-				root.visibilities.settings = false;
+				root.screenState.dashboard = false;
+			}
 		}
 
 		function onSettingsChanged() {
-			if (root.visibilities.settings) {
+			if (root.screenState.settings) {
-				root.visibilities.resources = false;
+				root.screenState.resources = false;
-				root.visibilities.dashboard = false;
+				root.screenState.dashboard = false;
-				root.visibilities.sidebar = false;
+				root.screenState.sidebar = false;
 				root.panels.popouts.hasCurrent = false;
-				root.visibilities.launcher = false;
+				root.screenState.launcher = false;
-			} else {
-				Config.save();
 			}
 		}
 
 		function onSidebarChanged() {
-			if (root.visibilities.sidebar) {
+			if (root.screenState.sidebar) {
-				root.visibilities.dashboard = false;
+				root.screenState.dashboard = false;
-				root.visibilities.settings = false;
+				root.screenState.settings = false;
 				root.popouts.hasCurrent = false;
 			}
 		}
 
-		target: root.visibilities
+		target: root.screenState
 	}
 }

Drawers/Interactions2.qml

@@ -0,0 +1,318 @@
+import Quickshell
+import QtQuick
+import ZShell.Config
+import ZShell.Internal
+import qs.Components
+import qs.Helpers
+import qs.Modules.Bar.Popouts
+
+CustomMouseArea {
+	id: root
+
+	required property Item bar
+	required property real borderThickness
+	required property ScreenState screenState
+	required property Drawing drawing
+	required property EdgeGeometry geometry
+	required property Panels panels
+	required property Wrapper popouts
+	required property ShellScreen screen
+
+	property bool dashboardShortcutActive
+	property bool osdShortcutActive
+	property bool singleGestureTriggered: false
+	property bool utilitiesShortcutActive
+	property bool setInitialPoint: false
+	property point dragStart
+
+	function inBottomPanel(panel: Item, x: real, y: real): bool {
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
+		return y > root.height - (panelHeight + geometry.insetBottom(borderThickness)) && withinPanelWidth(panel, x, y);
+	}
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+	}
+
+	function inPopoutArea(x: real, y: real): bool {
+		const panel = panels.popoutsWrapper;
+		if (!geometry.horizontal)
+			return inLeftPanel(panel, x, y);
+		return withinPanelWidth(panel, x, y) && withinPanelHeight(panel, x, y);
+	}
+
+	function inRightPanel(panel: Item, x: real, y: real): bool {
+		return x > panel.x + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+	}
+
+	function inTopPanel(panel: Item, x: real, y: real): bool {
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
+		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
+	}
+
+	function withinPanelHeight(panel: Item, x: real, y: real): bool {
+		const panelY = panel.y + geometry.insetTop(borderThickness);
+		return y >= panelY && y <= panelY + panel.height;
+	}
+
+	function withinPanelWidth(panel: Item, x: real, y: real): bool {
+		const panelX = panel.x + geometry.insetLeft(borderThickness);
+		return x >= panelX && x <= panelX + panel.width;
+	}
+
+	anchors.fill: parent
+	acceptedButtons: bar.fullscreen ? Qt.NoButton : Qt.AllButtons
+	hoverEnabled: true
+
+	onPressed: event => {
+		dragStart = Qt.point(event.x, event.y);
+
+		if (screenState.isDrawing) {
+			if (event.button & Qt.RightButton) {
+				drawing.content.clear();
+				return;
+			}
+
+			if (!inLeftPanel(panels.drawing, mouseX, mouseY))
+				drawing.content.beginStroke(event.x, event.y);
+		}
+	}
+
+	onPressedChanged: {
+		if (!pressed) {
+			if (screenState.isDrawing) {
+				setInitialPoint = false;
+				drawing.content.endStroke();
+				if (!inLeftPanel(panels.drawing, mouseX, mouseY))
+					drawing.content.showHover(mouseX, mouseY);
+			}
+		} else {
+			if (screenState.isDrawing) {
+				panels.drawing.collapse();
+			}
+		}
+	}
+
+	onContainsMouseChanged: {
+		if (!containsMouse) {
+			if (!osdShortcutActive) {
+				screenState.osd = false;
+				panels.osd.hovered = false;
+			}
+
+			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
+				popouts.hasCurrent = false;
+			}
+
+			if (Config.bar.autoHide || bar.fullscreen)
+				bar.isHovered = false;
+
+			if (screenState.dashboard && Config.dashboard.showOnHover)
+				screenState.dashboard = false;
+		}
+	}
+
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+		const dragX = x - dragStart.x;
+		const dragY = y - dragStart.y;
+
+		if (screenState.isDrawing) {
+			if (pressed) {
+				drawing.content.appendPoint(x, y);
+			} else {
+				if (inLeftPanel(panels.drawing, x, y)) {
+					if (!(pressedButtons & Qt.LeftButton)) {
+						panels.drawing.expand();
+						drawing.content.hideHover();
+						Cursor.clearOverride();
+					}
+				} else {
+					Cursor.setOverride(Qt.BlankCursor);
+					drawing.content.showHover(x, y);
+				}
+			}
+			if (drawing.content.hoverVisible)
+				drawing.content.showHover(x, y);
+			return;
+		}
+
+		if (root.bar.fullscreen && !root.bar.isHovered)
+			unhideTimer.start();
+
+		if (pressed && dragStart.y >= screen.height - Config.bar.border && dragStart.x > screen.width / 5 && dragY < -Config.launcher.dragThreshold)
+			screenState.launcher = true;
+
+		const showDashboard = Config.dashboard.showOnHover && inTopPanel(panels.dashboardWrapper, x, y);
+
+		if (!dashboardShortcutActive) {
+			screenState.dashboard = showDashboard;
+		} else if (showDashboard) {
+			dashboardShortcutActive = false;
+		}
+
+		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && withinPanelWidth(panels.dashboardWrapper, x, y)) {
+			if (dragY > Config.dashboard.dragThreshold)
+				screenState.dashboard = true;
+			else if (dragY < -Config.dashboard.dragThreshold)
+				screenState.dashboard = false;
+		}
+
+		if (pressed && geometry.insetTop(borderThickness) > dragStart.y && (Config.dashboard.showOnHover || !inTopPanel(panels.dashboardWrapper, dragStart.x, dragStart.y))) {
+			if (dragY > 20) {
+				screenState.settings = true;
+			} else if (dragY < -20) {
+				screenState.settings = false;
+			}
+		}
+
+		if (pressed && dragStart.y > screen.height - geometry.insetBottom(borderThickness) && dragStart.x < screen.width / 5 && dragY < -50)
+			screenState.clipboard = true;
+
+		if (pressed && !Config.dock.hoverToReveal && dragStart.y > screen.height - geometry.insetTop(borderThickness) && dragStart.x > screen.width / 5 && !screenState.launcher)
+			if (dragY < -10)
+				screenState.dock = true;
+
+		if (pressed && dragStart.x > screen.width - Config.bar.border && dragStart.y < (screen.height / 2) && dragX < -Config.sidebar.dragThreshold)
+			screenState.sidebar = true;
+
+		if (pressed && dragStart.x >= screen.width - Config.bar.border && dragStart.y > (screen.height / 2) && dragX < -20)
+			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r+1', on_current_monitor = true })`);
+
+		if (pressed && dragStart.x <= Config.bar.border && dragX > 20)
+			Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
+
+		if (!screenState.bar && Config.bar.autoHide && geometry.barContains(x, y, true))
+			bar.isHovered = true;
+
+		if (panels.sidebar.offsetScale === 1) {
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+
+			if (showOsd) {
+				osdShortcutActive = false;
+				panels.osd.hovered = true;
+			}
+		} else {
+			const outOfSidebar = x < width - panels.sidebar.width * (1 - panels.sidebar.offsetScale);
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
+
+			if (!osdShortcutActive) {
+				screenState.osd = showOsd;
+				panels.osd.hovered = showOsd;
+			} else if (showOsd) {
+				osdShortcutActive = false;
+				panels.osd.hovered = true;
+			}
+		}
+
+		if (Config.dock.enable && Config.dock.hoverToReveal && !screenState.dock && !screenState.launcher && inBottomPanel(panels.dock, x, y))
+			screenState.dock = true;
+
+		if (geometry.barContains(x, y))
+			bar.checkPopout(geometry.axisPos(x, y));
+	}
+
+	Timer {
+		id: unhideTimer
+
+		interval: Config.bar.revealDelay
+		repeat: false
+		running: false
+
+		onTriggered: {
+			if (root.containsMouse)
+				root.bar.isHovered = true;
+		}
+	}
+
+	Connections {
+		function onDashboardChanged(): void {
+			if (root.screenState.dashboard) {
+				const inDashboardArea = root.inTopPanel(root.panels.dashboardWrapper, root.mouseX, root.mouseY);
+				if (!inDashboardArea) {
+					root.dashboardShortcutActive = true;
+				}
+
+				root.screenState.launcher = false;
+				root.screenState.settings = false;
+				root.screenState.sidebar = false;
+				root.screenState.resources = false;
+				root.popouts.hasCurrent = false;
+			} else {
+				root.dashboardShortcutActive = false;
+			}
+		}
+
+		function onIsDrawingChanged(): void {
+			if (root.screenState.isDrawing) {
+				Cursor.setOverride(Qt.BlankCursor);
+			} else {
+				Cursor.clearOverride();
+			}
+		}
+
+		function onLauncherChanged(): void {
+			if (!root.screenState.launcher) {
+				root.dashboardShortcutActive = false;
+				root.osdShortcutActive = false;
+				root.utilitiesShortcutActive = false;
+
+				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
+
+				if (!inOsdArea) {
+					root.screenState.osd = false;
+					root.panels.osd.hovered = false;
+				}
+			}
+
+			if (root.screenState.launcher) {
+				root.screenState.dashboard = false;
+				root.screenState.dock = false;
+				root.screenState.settings = false;
+			}
+		}
+
+		function onOsdChanged(): void {
+			if (root.screenState.osd) {
+				const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
+				if (!inOsdArea) {
+					root.osdShortcutActive = true;
+				}
+			} else {
+				root.osdShortcutActive = false;
+			}
+		}
+
+		function onResourcesChanged(): void {
+			if (root.screenState.resources) {
+				if (root.popouts.currentName.startsWith("audio") || root.popouts.currentName.startsWith("updates"))
+					root.popouts.hasCurrent = false;
+
+				root.screenState.settings = false;
+				root.screenState.dashboard = false;
+			}
+		}
+
+		function onSettingsChanged(): void {
+			if (root.screenState.settings) {
+				root.screenState.resources = false;
+				root.screenState.dashboard = false;
+				root.screenState.sidebar = false;
+				root.panels.popouts.hasCurrent = false;
+				root.screenState.launcher = false;
+			}
+		}
+
+		function onSidebarChanged(): void {
+			if (root.screenState.sidebar) {
+				if (root.panels.dashboardWrapper.x + root.panels.dashboardWrapper.width > root.panels.sidebar.x)
+					root.screenState.dashboard = false;
+				root.screenState.settings = false;
+				root.popouts.hasCurrent = false;
+			}
+		}
+
+		target: root.screenState
+	}
+}

Drawers/Panels.qml

@@ -1,7 +1,7 @@
 import Quickshell
 import QtQuick
 import qs.Components
-import qs.Modules as Modules
+import qs.Modules.Bar.Popouts as Popouts
 import qs.Modules.Notifications as Notifications
 import qs.Modules.Notifications.Sidebar as Sidebar
 import qs.Modules.Notifications.Sidebar.Utils as Utils
@@ -14,7 +14,7 @@ import qs.Modules.Settings as Settings
 import qs.Modules.Drawing as Drawing
 import qs.Modules.Dock as Dock
 import qs.Modules.Clipboard as Clipboard
-import qs.Config
+import ZShell.Config
 
 Item {
 	id: root
@@ -27,6 +27,7 @@ Item {
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
 	required property var drawingItem
+	required property EdgeGeometry geometry
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
@@ -36,32 +37,34 @@ Item {
 	readonly property alias resources: resources
 	readonly property alias resourcesWrapper: resourcesWrapper
 	required property ShellScreen screen
+	required property ScreenState screenState
 	readonly property alias settings: settings
 	readonly property alias settingsWrapper: settingsWrapper
 	readonly property alias sidebar: sidebar
 	readonly property alias toasts: toasts
 	readonly property alias utilities: utilities
-	required property PersistentProperties visibilities
 
+	anchors.bottomMargin: geometry.insetBottom(borderThickness)
 	anchors.fill: parent
+	anchors.leftMargin: geometry.insetLeft(borderThickness)
 	anchors.margins: borderThickness
-	anchors.topMargin: bar.implicitHeight
+	anchors.topMargin: geometry.insetTop(borderThickness)
 
 	Item {
 		id: resourcesWrapper
 
+		anchors.bottom: root.geometry.position === "bottom" ? parent.bottom : undefined
 		anchors.left: parent.left
-		anchors.top: parent.top
+		anchors.top: root.geometry.position !== "bottom" ? parent.top : undefined
 		clip: true
-		implicitHeight: resources.implicitHeight * (1 - resources.offsetScale)
+		implicitHeight: root.geometry.horizontal ? resources.implicitHeight * (1 - resources.offsetScale) : resources.implicitHeight
-		implicitWidth: resources.implicitWidth
+		implicitWidth: root.geometry.horizontal ? resources.implicitWidth : resources.implicitWidth * (1 - resources.offsetScale)
 
 		Resources.Wrapper {
 			id: resources
 
-			anchors.left: parent.left
+			position: root.geometry.position
-			anchors.top: parent.top
+			screenState: root.screenState
-			visibilities: root.visibilities
 		}
 	}
 
@@ -81,8 +84,8 @@ Item {
 			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
 			screen: root.screen
+			screenState: root.screenState
 			sidebarOrSessionVisible: sidebar.visible
-			visibilities: root.visibilities
 		}
 	}
 
@@ -93,14 +96,14 @@ Item {
 		anchors.verticalCenter: parent.verticalCenter
 		drawing: root.drawingItem
 		screen: root.screen
-		visibilities: root.visibilities
+		screenState: root.screenState
 	}
 
-	Modules.ClipWrapper {
+	Popouts.ClipWrapper {
 		id: popouts
 
-		anchors.top: parent.top
 		borderThickness: root.borderThickness
+		position: root.geometry.position
 		screen: root.screen
 	}
 
@@ -108,7 +111,7 @@ Item {
 		id: toasts
 
 		anchors.bottom: sidebar.visible ? parent.bottom : utilities.top
-		anchors.margins: Appearance.padding.normal
+		anchors.margins: Tokens.padding.small
 		anchors.right: sidebar.left
 	}
 
@@ -118,8 +121,8 @@ Item {
 		anchors.right: parent.right
 		anchors.top: parent.top
 		panels: root
+		screenState: root.screenState
 		sidebarPanel: sidebar
-		visibilities: root.visibilities
 	}
 
 	Launcher.Wrapper {
@@ -129,7 +132,7 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 		panels: root
 		screen: root.screen
-		visibilities: root.visibilities
+		screenState: root.screenState
 	}
 
 	Utils.Wrapper {
@@ -137,9 +140,8 @@ Item {
 
 		anchors.bottom: parent.bottom
 		anchors.right: parent.right
-		popouts: popouts
+		screenState: root.screenState
 		sidebar: sidebar
-		visibilities: root.visibilities
 	}
 
 	Item {
@@ -147,7 +149,7 @@ Item {
 
 		property real offsetScale: dashboard.shouldBeActive ? 0 : 1
 
-		anchors.right: parent.right
+		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
 		clip: true
 		implicitHeight: dashboard.implicitHeight * (1 - offsetScale)
@@ -155,19 +157,16 @@ Item {
 
 		Behavior on offsetScale {
 			Anim {
-				duration: Appearance.anim.durations.expressiveDefaultSpatial
+				duration: Tokens.anim.durations.expressiveDefaultSpatial
-				easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+				easing: Tokens.anim.expressiveDefaultSpatial
 			}
 		}
 
 		Dashboard.Wrapper {
 			id: dashboard
 
-			anchors.right: parent.right
-			anchors.top: parent.top
-			anchors.topMargin: (-implicitHeight - 5) * offsetScale
 			offsetScale: dashboardWrapper.offsetScale
-			visibilities: root.visibilities
+			screenState: root.screenState
 		}
 	}
 
@@ -178,7 +177,7 @@ Item {
 		anchors.right: parent.right
 		anchors.top: notifications.bottom
 		panels: root
-		visibilities: root.visibilities
+		screenState: root.screenState
 	}
 
 	Item {
@@ -194,7 +193,7 @@ Item {
 			anchors.verticalCenterOffset: (-implicitHeight - 5 - ((root.height - implicitHeight) / 2)) * offsetScale
 			panels: root
 			screen: root.screen
-			visibilities: root.visibilities
+			screenState: root.screenState
 		}
 	}
 
@@ -205,7 +204,7 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 		panels: root
 		screen: root.screen
-		visibilities: root.visibilities
+		screenState: root.screenState
 	}
 
 	Clipboard.Wrapper {
@@ -214,6 +213,6 @@ Item {
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		screen: root.screen
-		visibilities: root.visibilities
+		screenState: root.screenState
 	}
 }

Drawers/Regions.qml

@@ -7,17 +7,18 @@ import qs.Modules.Bar as Bar
 Region {
 	id: root
 
-	required property Bar.BarLoader bar
+	// required property Bar.BarLoader bar
 	readonly property real borderThickness: win.borderThickness
+	required property EdgeGeometry geometry
 	readonly property alias menuPopoutRegion: menuPopoutRegion
 	required property Panels panels
 	required property var win
 
-	height: win.height - bar.implicitHeight - win.borderThickness - win.dragMaskPadding * 2
+	height: win.height - geometry.insetTop(borderThickness, true) - geometry.insetBottom(borderThickness, true) - win.dragMaskPadding * 2
 	intersection: Intersection.Xor
-	width: win.width - win.borderThickness * 2 - win.dragMaskPadding * 2
+	width: win.width - geometry.insetLeft(borderThickness, true) * 2 - win.dragMaskPadding * 2
-	x: win.borderThickness + win.dragMaskPadding
+	x: geometry.insetLeft(borderThickness, true) + win.dragMaskPadding
-	y: bar.implicitHeight + win.dragMaskPadding
+	y: geometry.insetTop(borderThickness, true) + win.dragMaskPadding
 
 	R {
 		panel: root.panels.dashboardWrapper
@@ -41,17 +42,21 @@ Region {
 	}
 
 	R {
+		height: panel.height + root.geometry.insetTop(root.borderThickness)
 		panel: root.panels.notifications
+		y: 0
 	}
 
 	R {
-		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.borderThickness
+		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.geometry.insetBottom(root.borderThickness)
 		panel: root.panels.utilities
 		y: root.win.height - height
 	}
 
 	R {
+		height: root.geometry.horizontal ? panel.height * (1 - root.panels.popoutsWrapper.offsetScale) : panel.height
 		panel: root.panels.popoutsWrapper
+		width: root.geometry.horizontal ? panel.width : panel.width * (1 - root.panels.popoutsWrapper.offsetScale)
 	}
 
 	R {
@@ -82,7 +87,7 @@ Region {
 		height: panel.height
 		intersection: Intersection.Subtract
 		width: panel.width
-		x: panel.x + root.borderThickness
+		x: panel.x + root.geometry.insetLeft(root.borderThickness)
-		y: panel.y + root.bar.implicitHeight
+		y: panel.y + root.geometry.insetTop(root.borderThickness)
 	}
 }

Drawers/Windows.qml

@@ -11,9 +11,10 @@ import ZShell.Blobs
 import qs.Daemons
 import qs.Components
 import qs.Modules.Bar
-import qs.Config
+import ZShell.Config
 import qs.Helpers
 import qs.Drawers
+import qs.Services
 
 CustomWindow {
 	id: root
@@ -32,6 +33,7 @@ CustomWindow {
 		return 100;
 	}
 	property real fsTransitionProg: hasFullscreen ? 1 : 0
+	readonly property alias geometry: geometry
 	readonly property bool hasFullscreen: {
 		if (hasSpecialWorkspace) {
 			const specialName = monitor?.lastIpcObject.specialWorkspace?.name;
@@ -48,59 +50,66 @@ CustomWindow {
 	readonly property alias menuRegion: regions.menuPopoutRegion
 	readonly property HyprlandMonitor monitor: Hypr.monitorFor(screen)
 	property var root: Quickshell.shellDir
+	readonly property ScreenState screenState: ShellState.forScreen(screen)
 	readonly property real sdfBorderOffset: 2 * fsTransitionProg
-	readonly property real shadowOpacity: 0.7 * (1 - fsTransitionProg)
+	readonly property real shadowOpacity: 0.7 * (1 - (bar.isHovered ? 0 : fsTransitionProg))
-	property color surfaceColor: DynamicColors.tPalette.m3surface
+	property color surfaceColor: Colors.tPalette.m3surface
 
 	WlrLayershell.exclusionMode: ExclusionMode.Ignore
-	WlrLayershell.keyboardFocus: visibilities.launcher || visibilities.settings ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+	WlrLayershell.keyboardFocus: screenState.launcher || screenState.settings || screenState.sidebar ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
 	WlrLayershell.layer: (fsTransitionProg > 0 && Config.general.showOverFullscreen) || (hasSpecialWorkspace && hasFullscreenOnNormalWs) ? WlrLayer.Overlay : WlrLayer.Top
 	color: "transparent"
 	contentItem.focus: true
-	mask: visibilities.isDrawing ? null : (hasFullscreen ? emptyRegion : regions)
+	mask: screenState.isDrawing ? null : (hasFullscreen && !bar.isHovered ? emptyRegion : regions)
 	name: "Bar"
 
 	Behavior on fsTransitionProg {
-		Anim {
+		Anim {}
-		}
 	}
 	Behavior on surfaceColor {
-		CAnim {
+		CAnim {}
-		}
 	}
 
 	contentItem.Keys.onEscapePressed: {
 		if (Config.bar.autoHide)
-			visibilities.bar = false;
+			screenState.bar = false;
-		visibilities.launcher = false;
+		screenState.launcher = false;
-		visibilities.sidebar = false;
+		screenState.sidebar = false;
-		visibilities.dashboard = false;
+		screenState.dashboard = false;
-		visibilities.osd = false;
+		screenState.osd = false;
-		visibilities.settings = false;
+		screenState.settings = false;
-		visibilities.resources = false;
+		screenState.resources = false;
-		visibilities.dock = false;
+		screenState.dock = false;
-		visibilities.clipboard = false;
+		screenState.clipboard = false;
 		panels.popouts.hasCurrent = false;
 	}
 	onHasFullscreenChanged: {
-		visibilities.launcher = false;
+		screenState.launcher = false;
-		visibilities.sidebar = false;
+		screenState.sidebar = false;
-		visibilities.dashboard = false;
+		screenState.dashboard = false;
-		visibilities.osd = false;
+		screenState.osd = false;
-		visibilities.settings = false;
+		screenState.settings = false;
-		visibilities.resources = false;
+		screenState.resources = false;
-		visibilities.clipboard = false;
+		screenState.clipboard = false;
-		visibilities.dock = false;
+		screenState.dock = false;
 		panels.popouts.hasCurrent = false;
 	}
 
+	EdgeGeometry {
+		id: geometry
+
+		bar: bar
+		configPosition: Config.bar.position
+		win: root
+	}
+
 	Region {
 		id: emptyRegion
 
 		height: panels.notifications.height
 		width: panels.notifications.width
-		x: panels.notifications.x + root.borderThickness
+		x: panels.notifications.x + geometry.insetLeft(root.borderThickness)
-		y: panels.notifications.y + bar.implicitHeight
+		y: panels.notifications.y + geometry.insetTop(root.borderThickness)
 
 		Region {
 			height: panels.osd.height
@@ -108,12 +117,18 @@ CustomWindow {
 			x: root.width - width
 			y: panels.osdWrapper.y + bar.implicitHeight
 		}
+
+		Region {
+			height: geometry.horizontal ? 1 : root.screen.height
+			width: geometry.horizontal ? root.screen.width : 1
+			y: geometry.position === "bottom" ? root.screen.height - 1 : 0
+		}
 	}
 
 	Regions {
 		id: regions
 
-		bar: bar
+		geometry: geometry
 		panels: panels
 		win: root
 	}
@@ -128,44 +143,41 @@ CustomWindow {
 	HyprlandFocusGrab {
 		id: focusGrab
 
-		active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.clipboard || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu") && (!Config.bar.tray.showOnHover || (panels.popouts.current as StackView)?.depth > 1))
 		windows: [root]
+		active: {
+			const s = root.screenState;
+			const c = Config;
+
+			if ((s.launcher && c.launcher.enabled) || (s.sidebar && c.sidebar.enabled) || (s.resources && c.dashboard.performance.enabled) || (s.clipboard && c.clipboard.enabled))
+				return true;
+			if (s.dashboard && !c.dashboard.showOnHover && c.dashboard.enabled)
+				return true;
+			if (!c.dock.hoverToReveal && s.dock && c.dock.enable)
+				return true;
+			if (panels.popouts.currentName.startsWith("traymenu") && (panels.popouts.current as StackView)?.depth > 1)
+				return true;
+			if (s.settings)
+				return true;
+			return false;
+		}
 
 		onCleared: {
-			visibilities.launcher = false;
+			root.screenState.launcher = false;
-			visibilities.sidebar = false;
+			root.screenState.sidebar = false;
-			visibilities.dashboard = false;
+			root.screenState.dashboard = false;
-			visibilities.osd = false;
+			root.screenState.osd = false;
-			visibilities.settings = false;
+			root.screenState.settings = false;
-			visibilities.resources = false;
+			root.screenState.resources = false;
-			visibilities.clipboard = false;
+			root.screenState.clipboard = false;
-			visibilities.dock = false;
+			root.screenState.dock = false;
 			panels.popouts.hasCurrent = false;
 		}
 	}
 
-	PersistentProperties {
-		id: visibilities
-
-		property bool bar
-		property bool clipboard
-		property bool dashboard
-		property bool dock
-		property bool isDrawing
-		property bool launcher
-		property bool notif: NotifServer.popups.length > 0
-		property bool osd
-		property bool resources
-		property bool settings
-		property bool sidebar
-
-		Component.onCompleted: Visibilities.load(root.screen, this)
-	}
-
 	Binding {
 		property: "bar"
-		target: visibilities
+		target: root.screenState
-		value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.bar.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
+		value: root.screenState.sidebar || root.screenState.dashboard || root.screenState.osd || (!Config.bar.hideWhenNotif && NotifServer.popups.length > 0) || root.screenState.resources || root.screenState.settings || bar.isHovered
 		when: Config.bar.autoHide
 	}
 
@@ -178,7 +190,7 @@ CustomWindow {
 
 		layer.effect: MultiEffect {
 			blurMax: 32
-			shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, Math.max(0, root.shadowOpacity))
+			shadowColor: Qt.alpha(Colors.palette.m3shadow, Math.max(0, root.shadowOpacity))
 			shadowEnabled: true
 		}
 
@@ -192,10 +204,10 @@ CustomWindow {
 		BlobInvertedRect {
 			anchors.fill: parent
 			anchors.margins: -50
-			borderBottom: root.borderThickness - anchors.margins - root.sdfBorderOffset
+			borderBottom: geometry.insetBottom(root.borderThickness) - anchors.margins - root.sdfBorderOffset
-			borderLeft: root.borderThickness - anchors.margins - root.sdfBorderOffset
+			borderLeft: geometry.insetLeft(root.borderThickness) - anchors.margins - root.sdfBorderOffset
 			borderRight: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderTop: bar.implicitHeight - anchors.margins - root.sdfBorderOffset
+			borderTop: geometry.insetTop(root.borderThickness) - anchors.margins - root.sdfBorderOffset
 			group: blobGroup
 			radius: root.borderRounding
 		}
@@ -203,15 +215,15 @@ CustomWindow {
 		PanelBg {
 			id: dashBg
 
-			property real extraHeight: 0.2
+			property real extraExtent: 0.2
 
 			deformAmount: 0.06
-			implicitHeight: panels.dashboard.height * (1 + extraHeight)
+			implicitHeight: panels.dashboard.height * (geometry.horizontal ? 1 + extraExtent : 1)
-			implicitWidth: panels.dashboard.width
+			implicitWidth: panels.dashboard.width * (geometry.horizontal ? 1 : 1 + extraExtent)
 			panel: panels.dashboardWrapper
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.extraLarge
-			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
+			x: panels.dashboardWrapper.x + panels.dashboard.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.dashboard.width * extraExtent)
-			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+			y: panels.dashboardWrapper.y + panels.dashboard.y + geometry.insetTop(root.borderThickness) - (geometry.horizontal && geometry.position !== "bottom" ? panels.dashboard.height * extraExtent : 0)
 		}
 
 		PanelBg {
@@ -222,8 +234,8 @@ CustomWindow {
 			deformAmount: 0.06
 			implicitHeight: panels.launcher.height * (1 + extraHeight)
 			panel: panels.launcher
-			radius: Appearance.rounding.smallest + 5
+			radius: Tokens.rounding.medium + (Tokens.padding.largeIncreased / 4)
-			y: panels.launcher.y + bar.implicitHeight
+			y: panels.launcher.y + geometry.insetTop(root.borderThickness)
 		}
 
 		PanelBg {
@@ -244,15 +256,14 @@ CustomWindow {
 			implicitWidth: panels.osd.width
 			panel: panels.osdWrapper
 			radius: 20
-			x: panels.osdWrapper.x + panels.osd.x + root.borderThickness
+			x: panels.osdWrapper.x + panels.osd.x + geometry.insetLeft(root.borderThickness)
-			y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
 		}
 
 		PanelBg {
 			id: notifsBg
 
 			panel: panels.notifications
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.large
 		}
 
 		PanelBg {
@@ -267,19 +278,18 @@ CustomWindow {
 		PanelBg {
 			id: popoutBg
 
-			property real extraHeight: 0.2
+			property real extraExtent: 0.2
 
 			deformAmount: panels.popouts.currentName.startsWith("traymenu") ? 0.15 : 0.08
-			implicitHeight: panels.popouts.height * (1 + extraHeight)
+			implicitHeight: panels.popouts.height * (geometry.horizontal ? 1 + extraExtent : 1)
-			implicitWidth: panels.popouts.width
+			implicitWidth: panels.popouts.width * (geometry.horizontal ? 1 : 1 + extraExtent)
 			panel: panels.popoutsWrapper
-			radius: panels.popouts.current?.panelRadius ?? Appearance.rounding.normal
+			radius: panels.popouts.current?.panelRadius ?? Tokens.rounding.large
-			x: panels.popoutsWrapper.x + panels.popouts.x + root.borderThickness
+			x: panels.popoutsWrapper.x + panels.popouts.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.popouts.width * extraExtent)
-			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+			y: panels.popoutsWrapper.y + panels.popouts.y + geometry.insetTop(root.borderThickness) - (geometry.barOnTop ? panels.popouts.height * extraExtent : 0)
 
-			Behavior on extraHeight {
+			Behavior on extraExtent {
-				Anim {
+				Anim {}
-				}
 			}
 		}
 
@@ -290,9 +300,9 @@ CustomWindow {
 			implicitHeight: panels.resources.height
 			implicitWidth: panels.resources.width
 			panel: panels.resourcesWrapper
-			radius: Appearance.rounding.large
+			radius: Tokens.rounding.largeIncreased + Tokens.padding.small
-			x: panels.resourcesWrapper.x + panels.resources.x + root.borderThickness
+			x: panels.resourcesWrapper.x + panels.resources.x + geometry.insetLeft(root.borderThickness)
-			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+			y: panels.resourcesWrapper.y + panels.resources.y + geometry.insetTop(root.borderThickness)
 		}
 
 		PanelBg {
@@ -300,7 +310,7 @@ CustomWindow {
 
 			deformAmount: 0.03
 			panel: panels.settings
-			radius: Appearance.rounding.large + Appearance.padding.normal
+			radius: Tokens.rounding.largeIncreased + Tokens.padding.small
 		}
 
 		PanelBg {
@@ -308,7 +318,7 @@ CustomWindow {
 
 			deformAmount: 0.08
 			panel: panels.dock
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.medium
 		}
 
 		PanelBg {
@@ -316,7 +326,7 @@ CustomWindow {
 
 			deformAmount: 0.08
 			panel: panels.drawing
-			radius: Appearance.rounding.normal
+			radius: Tokens.rounding.medium
 		}
 
 		PanelBg {
@@ -333,7 +343,7 @@ CustomWindow {
 
 		anchors.fill: parent
 		layer.enabled: true
-		visibilities: visibilities
+		screenState: root.screenState
 		z: 2
 
 		layer.effect: MultiEffect {
@@ -362,7 +372,7 @@ CustomWindow {
 		}
 	}
 
-	Interactions {
+	Interactions2 {
 		id: interactions
 
 		anchors.fill: parent
@@ -370,10 +380,11 @@ CustomWindow {
 		borderThickness: root.borderLayoutThickness
 		drawing: drawing
 		enabled: true
+		geometry: geometry
 		panels: panels
 		popouts: panels.popouts
 		screen: root.screen
-		visibilities: visibilities
+		screenState: root.screenState
 
 		Panels {
 			id: panels
@@ -381,8 +392,9 @@ CustomWindow {
 			bar: bar
 			borderThickness: root.borderThickness
 			drawingItem: drawing
+			geometry: geometry
 			screen: root.screen
-			visibilities: visibilities
+			screenState: root.screenState
 
 			clipboard.transform: Matrix4x4 {
 				matrix: clipboardBg.deformMatrix
@@ -422,14 +434,18 @@ CustomWindow {
 		BarLoader {
 			id: bar
 
+			anchors.bottom: geometry.barOnBottom ? parent.bottom : undefined
 			anchors.left: parent.left
-			anchors.right: parent.right
+			anchors.top: geometry.barOnBottom ? undefined : parent.top
-			enabled: !visibilities.isDrawing
+			enabled: !screenState.isDrawing
 			fullscreen: root.hasFullscreen
+			height: geometry.horizontal ? implicitHeight : parent.height
 			popouts: panels.popouts
 			popoutsWrapper: panels.popoutsWrapper
+			position: geometry.position
 			screen: root.screen
-			visibilities: visibilities
+			screenState: root.screenState
+			width: geometry.horizontal ? parent.width : implicitWidth
 		}
 	}
 
@@ -441,8 +457,8 @@ CustomWindow {
 		group: blobGroup
 		implicitHeight: panel.height
 		implicitWidth: panel.width
-		radius: Appearance.rounding.smallest
+		radius: Tokens.rounding.small
-		x: panel.x + root.borderThickness
+		x: panel.x + geometry.insetLeft(root.borderThickness)
-		y: panel.y + bar.implicitHeight
+		y: panel.y + geometry.insetTop(root.borderThickness)
 	}
 }

Effects/ShadowRect.qml

@@ -1,33 +0,0 @@
-import QtQuick
-import QtQuick.Effects
-
-Item {
-	id: root
-
-	property real radius
-
-	Rectangle {
-		id: shadowRect
-
-		anchors.fill: root
-		color: "black"
-		layer.enabled: true
-		radius: root.radius
-		visible: false
-	}
-
-	MultiEffect {
-		id: effects
-
-		anchors.fill: shadowRect
-		autoPaddingEnabled: true
-		maskEnabled: true
-		maskInverted: true
-		maskSource: shadowRect
-		shadowBlur: 2.0
-		shadowColor: "black"
-		shadowEnabled: true
-		shadowOpacity: 1
-		source: shadowRect
-	}
-}

Greeter/Center.qml

@@ -2,10 +2,10 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import qs.Paths
+import ZShell.Config
 import qs.Components
 import qs.Helpers
-import qs.Config
+import qs.Services
 
 ColumnLayout {
 	id: root
@@ -18,61 +18,61 @@ ColumnLayout {
 	Layout.fillHeight: true
 	Layout.fillWidth: false
 	Layout.preferredWidth: centerWidth
-	spacing: Appearance.spacing.large * 2
+	spacing: Tokens.spacing.largeIncreased * 2
 
 	RowLayout {
 		Layout.alignment: Qt.AlignHCenter
-		spacing: Appearance.spacing.small
+		spacing: Tokens.spacing.small
 
 		CustomText {
 			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			font.bold: true
-			font.family: Appearance.font.family.clock
+			font.family: Config.appearance.font.family.clock
-			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
 			text: Time.hourStr
 		}
 
 		CustomText {
 			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3primary
+			color: Colors.palette.m3primary
 			font.bold: true
-			font.family: Appearance.font.family.clock
+			font.family: Config.appearance.font.family.clock
-			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
 			text: ":"
 		}
 
 		CustomText {
 			Layout.alignment: Qt.AlignVCenter
-			color: DynamicColors.palette.m3secondary
+			color: Colors.palette.m3secondary
 			font.bold: true
-			font.family: Appearance.font.family.clock
+			font.family: Config.appearance.font.family.clock
-			font.pointSize: Math.floor(Appearance.font.size.extraLarge * 3 * root.centerScale)
+			font.pointSize: Math.floor(Tokens.font.size.extraLarge * 3 * root.centerScale)
 			text: Time.minuteStr
 		}
 	}
 
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
-		Layout.topMargin: -Appearance.padding.large * 2
+		Layout.topMargin: -Tokens.padding.large * 2
-		color: DynamicColors.palette.m3tertiary
+		color: Colors.palette.m3tertiary
 		font.bold: true
-		font.family: Appearance.font.family.mono
+		font.family: Config.appearance.font.family.mono
-		font.pointSize: Math.floor(Appearance.font.size.extraLarge * root.centerScale)
+		font.pointSize: Math.floor(Tokens.font.size.extraLarge * root.centerScale)
 		text: Time.format("dddd, d MMMM yyyy")
 	}
 
 	CustomClippingRect {
 		Layout.alignment: Qt.AlignHCenter
-		Layout.topMargin: Appearance.spacing.large * 2
+		Layout.topMargin: Tokens.spacing.largeIncreased * 2
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		implicitHeight: root.centerWidth / 2
 		implicitWidth: root.centerWidth / 2
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		MaterialIcon {
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
 			font.pointSize: Math.floor(root.centerWidth / 4)
 			text: "person"
 		}
@@ -87,9 +87,9 @@ ColumnLayout {
 
 	CustomText {
 		Layout.alignment: Qt.AlignHCenter
-		color: DynamicColors.palette.m3onSurfaceVariant
+		color: Colors.palette.m3onSurfaceVariant
-		font.family: Appearance.font.family.mono
+		font.family: Config.appearance.font.family.mono
-		font.pointSize: Appearance.font.size.normal
+		font.pointSize: Tokens.font.size.normal
 		font.weight: 600
 		text: root.greeter.username
 		visible: text.length > 0
@@ -97,11 +97,11 @@ ColumnLayout {
 
 	CustomRect {
 		Layout.alignment: Qt.AlignHCenter
-		color: DynamicColors.tPalette.m3surfaceContainer
+		color: Colors.tPalette.m3surfaceContainer
 		focus: true
-		implicitHeight: input.implicitHeight + Appearance.padding.small * 2
+		implicitHeight: input.implicitHeight + Tokens.padding.extraSmall * 2
 		implicitWidth: root.centerWidth * 0.8
-		radius: Appearance.rounding.full
+		radius: Tokens.rounding.full
 
 		Keys.onPressed: event => {
 			if (root.greeter.launching)
@@ -130,11 +130,11 @@ ColumnLayout {
 			id: input
 
 			anchors.fill: parent
-			anchors.margins: Appearance.padding.small
+			anchors.margins: Tokens.padding.extraSmall
-			spacing: Appearance.spacing.normal
+			spacing: Tokens.spacing.medium
 
 			Item {
-				implicitHeight: statusIcon.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: statusIcon.implicitHeight + Tokens.padding.extraSmall * 2
 				implicitWidth: implicitHeight
 
 				MaterialIcon {
@@ -142,7 +142,7 @@ ColumnLayout {
 
 					anchors.centerIn: parent
 					animate: true
-					color: root.greeter.errorMessage ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+					color: root.greeter.errorMessage ? Colors.palette.m3error : Colors.palette.m3onSurface
 					opacity: root.greeter.launching ? 0 : 1
 					text: {
 						if (root.greeter.errorMessage)
@@ -173,13 +173,13 @@ ColumnLayout {
 			}
 
 			CustomRect {
-				color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+				color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3primary : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
-				implicitHeight: enterIcon.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: enterIcon.implicitHeight + Tokens.padding.extraSmall * 2
 				implicitWidth: implicitHeight
-				radius: Appearance.rounding.full
+				radius: Tokens.rounding.full
 
 				StateLayer {
-					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 
 					onClicked: {
 						root.greeter.submit();
@@ -190,7 +190,7 @@ ColumnLayout {
 					id: enterIcon
 
 					anchors.centerIn: parent
-					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					color: root.greeter.buffer && !root.greeter.launching ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
 					font.weight: 500
 					text: root.greeter.launching ? "hourglass_top" : "arrow_forward"
 				}
@@ -200,7 +200,7 @@ ColumnLayout {
 
 	Item {
 		Layout.fillWidth: true
-		Layout.topMargin: -Appearance.spacing.large
+		Layout.topMargin: -Tokens.spacing.largeIncreased
 		implicitHeight: Math.max(message.implicitHeight, stateMessage.implicitHeight)
 
 		Behavior on implicitHeight {
@@ -236,8 +236,8 @@ ColumnLayout {
 			anchors.left: parent.left
 			anchors.right: parent.right
 			animateProp: "opacity"
-			color: DynamicColors.palette.m3onSurfaceVariant
+			color: Colors.palette.m3onSurfaceVariant
-			font.family: Appearance.font.family.mono
+			font.family: Config.appearance.font.family.mono
 			horizontalAlignment: Qt.AlignHCenter
 			lineHeight: 1.2
 			opacity: shouldBeVisible && !message.msg ? 1 : 0
@@ -291,9 +291,9 @@ ColumnLayout {
 
 			anchors.left: parent.left
 			anchors.right: parent.right
-			color: isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+			color: isError ? Colors.palette.m3error : Colors.palette.m3primary
-			font.family: Appearance.font.family.mono
+			font.family: Config.appearance.font.family.mono
-			font.pointSize: Appearance.font.size.small
+			font.pointSize: Tokens.font.size.small
 			horizontalAlignment: Qt.AlignHCenter
 			opacity: 0
 			scale: 0.7
@@ -363,14 +363,14 @@ ColumnLayout {
 				id: exitAnim
 
 				Anim {
-					duration: Appearance.anim.durations.large
+					duration: Tokens.anim.durations.large
 					property: "scale"
 					target: message
 					to: 0.7
 				}
 
 				Anim {
-					duration: Appearance.anim.durations.large
+					duration: Tokens.anim.durations.large
 					property: "opacity"
 					target: message
 					to: 0
@@ -380,7 +380,7 @@ ColumnLayout {
 	}
 
 	component FlashAnim: NumberAnimation {
-		duration: Appearance.anim.durations.small
+		duration: Tokens.anim.durations.small
 		easing.type: Easing.Linear
 		property: "opacity"
 		target: message

Greeter/Components/Anim.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 NumberAnimation {
 	enum Type {
@@ -23,41 +23,41 @@ NumberAnimation {
 
 	duration: {
 		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
-			return Appearance.anim.durations.normal;
+			return Tokens.anim.durations.normal;
 
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
+			return Tokens.anim.durations.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
+			return Tokens.anim.durations.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.durations.large;
+			return Tokens.anim.durations.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.durations.expressiveFastEffects;
+			return Tokens.anim.durations.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.durations.expressiveEffects;
+			return Tokens.anim.durations.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.durations.expressiveSlowEffects;
+			return Tokens.anim.durations.expressiveSlowEffects;
 
 		const types = ["small", "normal", "large", "extraLarge"];
 		const idx = type % 4; // 0-7 are the 4 standard types
-		return Appearance.anim.durations[types[idx]];
+		return Tokens.anim.durations[types[idx]];
 	}
-	easing.bezierCurve: {
+	easing: {
 		if (type === Anim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
+			return Tokens.anim.expressiveFastSpatial;
 		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
+			return Tokens.anim.expressiveDefaultSpatial;
 		if (type === Anim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
+			return Tokens.anim.expressiveSlowSpatial;
 		if (type === Anim.FastEffects)
-			return Appearance.anim.curves.expressiveFastEffects;
+			return Tokens.anim.expressiveFastEffects;
 		if (type === Anim.DefaultEffects)
-			return Appearance.anim.curves.expressiveDefaultEffects;
+			return Tokens.anim.expressiveDefaultEffects;
 		if (type === Anim.SlowEffects)
-			return Appearance.anim.curves.expressiveSlowEffects;
+			return Tokens.anim.expressiveSlowEffects;
 
 		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
+			return Tokens.anim.emphasized;
-		return Appearance.anim.curves.standard;
+		return Tokens.anim.standard;
 	}
 }

Greeter/Components/AnimatedTabIndexPair.qml

@@ -1,24 +0,0 @@
-import QtQuick
-
-QtObject {
-	id: root
-
-	property real idx1: index
-	property int idx1Duration: 100
-	property real idx2: index
-	property int idx2Duration: 300
-	required property int index
-
-	Behavior on idx1 {
-		NumberAnimation {
-			duration: root.idx1Duration
-			easing.type: Easing.OutSine
-		}
-	}
-	Behavior on idx2 {
-		NumberAnimation {
-			duration: root.idx2Duration
-			easing.type: Easing.OutSine
-		}
-	}
-}

Greeter/Components/BaseStyledSlider.qml

@@ -1,165 +0,0 @@
-import QtQuick
-import QtQuick.Templates
-import qs.Config
-
-Slider {
-	id: root
-
-	property color color: DynamicColors.palette.m3secondary
-	required property string icon
-	property bool initialized: false
-	readonly property bool isHorizontal: orientation === Qt.Horizontal
-	readonly property bool isVertical: orientation === Qt.Vertical
-	property real multiplier: 100
-	property real oldValue
-
-	// Wrapper components can inject their own track visuals here.
-	property Component trackContent
-
-	// Keep current behavior for existing usages.
-	orientation: Qt.Vertical
-
-	background: CustomRect {
-		id: groove
-
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
-		height: root.availableHeight
-		radius: Appearance.rounding.full
-		width: root.availableWidth
-		x: root.leftPadding
-		y: root.topPadding
-
-		Loader {
-			id: trackLoader
-
-			anchors.fill: parent
-			sourceComponent: root.trackContent
-
-			onLoaded: {
-				if (!item)
-					return;
-
-				item.rootSlider = root;
-				item.groove = groove;
-				item.handleItem = handle;
-			}
-		}
-	}
-	handle: Item {
-		id: handle
-
-		property alias moving: icon.moving
-
-		implicitHeight: Math.min(root.width, root.height)
-		implicitWidth: Math.min(root.width, root.height)
-		x: root.isHorizontal ? root.leftPadding + root.visualPosition * (root.availableWidth - width) : root.leftPadding + (root.availableWidth - width) / 2
-		y: root.isVertical ? root.topPadding + root.visualPosition * (root.availableHeight - height) : root.topPadding + (root.availableHeight - height) / 2
-
-		Elevation {
-			anchors.fill: parent
-			level: handleInteraction.containsMouse ? 2 : 1
-			radius: rect.radius
-		}
-
-		CustomRect {
-			id: rect
-
-			anchors.fill: parent
-			color: DynamicColors.palette.m3inverseSurface
-			radius: Appearance.rounding.full
-
-			MouseArea {
-				id: handleInteraction
-
-				acceptedButtons: Qt.NoButton
-				anchors.fill: parent
-				cursorShape: Qt.PointingHandCursor
-				hoverEnabled: true
-			}
-
-			MaterialIcon {
-				id: icon
-
-				property bool moving
-
-				function update(): void {
-					animate = !moving;
-					binding.when = moving;
-					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
-					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
-				}
-
-				anchors.centerIn: parent
-				color: DynamicColors.palette.m3inverseOnSurface
-				text: root.icon
-
-				onMovingChanged: anim.restart()
-
-				Binding {
-					id: binding
-
-					property: "text"
-					target: icon
-					value: Math.round(root.value * root.multiplier)
-					when: false
-				}
-
-				SequentialAnimation {
-					id: anim
-
-					Anim {
-						duration: Appearance.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardAccel
-						property: "scale"
-						target: icon
-						to: 0
-					}
-
-					ScriptAction {
-						script: icon.update()
-					}
-
-					Anim {
-						duration: Appearance.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardDecel
-						property: "scale"
-						target: icon
-						to: 1
-					}
-				}
-			}
-		}
-	}
-	Behavior on value {
-		Anim {
-			duration: Appearance.anim.durations.large
-		}
-	}
-
-	onPressedChanged: handle.moving = pressed
-	onValueChanged: {
-		if (!initialized) {
-			initialized = true;
-			oldValue = value;
-			return;
-		}
-
-		if (Math.abs(value - oldValue) < 0.01)
-			return;
-
-		oldValue = value;
-		handle.moving = true;
-		stateChangeDelay.restart();
-	}
-
-	Timer {
-		id: stateChangeDelay
-
-		interval: 500
-
-		onTriggered: {
-			if (!root.pressed)
-				handle.moving = false;
-		}
-	}
-}

Greeter/Components/CAnim.qml

@@ -1,8 +1,7 @@
 import QtQuick
-import qs.Config
+import ZShell.Config
 
 ColorAnimation {
-	duration: MaterialEasing.standardTime
+	duration: Tokens.anim.durations.expressiveSlowEffects
-	easing.bezierCurve: MaterialEasing.standard
+	easing: Tokens.anim.expressiveSlowEffects
-	easing.type: Easing.BezierSpline
 }

Greeter/Components/CircularIndicator.qml

@@ -1,7 +1,8 @@
-import qs.Config
+import ZShell.Config
 import ZShell.Internal
 import QtQuick
 import QtQuick.Templates
+import qs.Services
 
 BusyIndicator {
 	id: root
@@ -17,12 +18,12 @@ BusyIndicator {
 	}
 
 	property int animState
-	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: Colors.palette.m3secondaryContainer
-	property color fgColour: DynamicColors.palette.m3primary
+	property color fgColor: Colors.palette.m3primary
-	property real implicitSize: Appearance.font.size.normal * 3
+	property real implicitSize: Tokens.font.size.normal * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
-	property real strokeWidth: Appearance.padding.small * 0.8
+	property real strokeWidth: Tokens.padding.extraSmall * 0.8
 	property alias type: manager.indeterminateAnimationType
 
 	implicitHeight: implicitSize
@@ -31,8 +32,8 @@ BusyIndicator {
 
 	contentItem: CircularProgress {
 		anchors.fill: parent
-		bgColour: root.bgColour
+		bgColor: root.bgColor
-		fgColour: root.fgColour
+		fgColor: root.fgColor
 		padding: root.padding
 		rotation: manager.rotation
 		startAngle: manager.startFraction * 360
@@ -50,7 +51,7 @@ BusyIndicator {
 	}
 	transitions: Transition {
 		Anim {
-			duration: manager.completeEndDuration * Appearance.anim.durations.scale
+			duration: manager.completeEndDuration * Tokens.anim.durations.scale
 			properties: "opacity,internalStrokeWidth"
 		}
 	}
@@ -73,11 +74,10 @@ BusyIndicator {
 
 	CircularIndicatorManager {
 		id: manager
-
 	}
 
 	NumberAnimation {
-		duration: manager.duration * Appearance.anim.durations.scale
+		duration: manager.duration * Tokens.anim.durations.scale
 		from: 0
 		loops: Animation.Infinite
 		property: "progress"
@@ -87,7 +87,7 @@ BusyIndicator {
 	}
 
 	NumberAnimation {
-		duration: manager.completeEndDuration * Appearance.anim.durations.scale
+		duration: manager.completeEndDuration * Tokens.anim.durations.scale
 		from: 0
 		property: "completeEndProgress"
 		running: root.animState === CircularIndicator.Completing