initial commit, primitive loading of QML code outside of shell directory

.clang-format

@@ -1,58 +0,0 @@
----
-BasedOnStyle: LLVM
-AccessModifierOffset: 0
-AlignAfterOpenBracket: AlwaysBreak
-AlignConsecutiveAssignments: false
-AlignConsecutiveDeclarations: false
-AlignOperands: Align
-AllowAllParametersOfDeclarationOnNextLine: true
-AllowShortFunctionsOnASingleLine: Inline
-AllowShortIfStatementsOnASingleLine: WithoutElse
-AlwaysBreakBeforeMultilineStrings: false
-AlwaysBreakTemplateDeclarations: MultiLine
-BinPackArguments: false
-BinPackParameters: false
-BreakBeforeBraces: Attach
-BreakBeforeTernaryOperators: true
-BreakConstructorInitializers: BeforeComma
-ColumnLimit: 80
-ConstructorInitializerAllOnOneLineOrOnePerLine: true
-ConstructorInitializerIndentWidth: 4
-ContinuationIndentWidth: 4
-Cpp11BracedListStyle: true
-DerivePointerAlignment: false
-FixNamespaceComments: true
-IndentCaseLabels: false
-IndentWidth: 4
-KeepEmptyLinesAtTheStartOfBlocks: false
-Language: Cpp
-MaxEmptyLinesToKeep: 2
-NamespaceIndentation: None
-PenaltyBreakAssignment: 10
-PenaltyBreakBeforeFirstCallParameter: 100
-PenaltyBreakComment: 300
-PenaltyBreakFirstLessLess: 120
-PenaltyBreakString: 1000
-PenaltyExcessCharacter: 100
-PenaltyReturnTypeOnItsOwnLine: 200
-PointerAlignment: Left
-ReflowComments: false
-SortIncludes: false
-SpaceAfterCStyleCast: false
-SpaceAfterTemplateKeyword: true
-SpaceBeforeAssignmentOperators: true
-SpaceBeforeCpp11BracedList: false
-SpaceBeforeCtorInitializerColon: true
-SpaceBeforeInheritanceColon: true
-SpaceBeforeParens: ControlStatements
-SpaceBeforeRangeBasedForLoopColon: true
-SpaceInEmptyParentheses: false
-SpacesBeforeTrailingComments: 1
-SpacesInAngles: false
-SpacesInContainerLiterals: false
-SpacesInCStyleCastParentheses: false
-SpacesInParentheses: false
-SpacesInSquareBrackets: false
-Standard: c++20
-TabWidth: 4
-UseTab: Always

.clang-tidy

@@ -1,27 +0,0 @@
----
-Checks: >
-    -*,
-    bugprone-*,
-    -bugprone-throwing-static-initialization,
-    -bugprone-invalid-enum-default-initialization,
-    -bugprone-suspicious-include,
-    -bugprone-branch-clone,
-    -bugprone-easily-swappable-parameters,
-    -bugprone-narrowing-conversions,
-    -bugprone-implicit-widening-of-multiplication-result,
-    clang-analyzer-*,
-    cppcoreguidelines-init-variables,
-    misc-no-recursion,
-    concurrency-mt-unsafe,
-    readability-else-after-return,
-    readability-make-member-function-const,
-    readability-redundant-*,
-    -readability-redundant-inline-specifier,
-    readability-simplify-*,
-    modernize-use-override,
-    modernize-use-nullptr,
-    modernize-deprecated-headers,
-HeaderFilterRegex: ".*"
-FormatStyle: file
-
-...

.gitea/workflows/ci-image.yml

@@ -1,30 +0,0 @@
-name: Rebuild CI Image
-
-on:
-    schedule:
-        - cron: "0 6 * * 1"
-    workflow_dispatch:
-
-jobs:
-    build:
-        runs-on: alpine
-        container:
-            image: node:26-alpine
-        env:
-            IMAGE: git.aramjonghu.dev/aramjonghu/zshell-ci:latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install Docker CLI
-              run: apk add --no-cache docker-cli
-
-            - name: Login to registry
-              run: echo "${{ secrets.REGISTRY_TOKEN }}" | docker login git.aramjonghu.dev --username aramjonghu --password-stdin
-
-            - name: Build image
-              run: docker build -t "$IMAGE" -f ci/Dockerfile .
-
-            - name: Push image
-              run: docker push "$IMAGE"

.gitea/workflows/cpp.yml

@@ -1,62 +0,0 @@
-name: C++
-
-on:
-    pull_request:
-
-jobs:
-    fmt:
-        runs-on: alpine
-        container:
-            image: git.aramjonghu.dev/aramjonghu/zshell-ci:latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Format check
-              run: |
-                  find . \( -name '*.cpp' -o -name '*.h' -o -name '*.hpp' \) \
-                    -not -path './build/*' \
-                    -exec clang-format -i --style=file {} +
-                  git diff --exit-code && echo "clang-format: passed"
-
-    build:
-        runs-on: alpine
-        container:
-            image: git.aramjonghu.dev/aramjonghu/zshell-ci:latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-
-            - name: Configure
-              run: cmake -B build -G Ninja -DENABLE_MODULES=plugin -DCMAKE_BUILD_TYPE=Release
-
-            - name: Build
-              run: ninja -C build
-
-    clang-tidy:
-        runs-on: alpine
-        container:
-            image: git.aramjonghu.dev/aramjonghu/zshell-ci:latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-
-            - name: Configure
-              run: cmake -B build -G Ninja -DENABLE_MODULES=plugin -DCMAKE_BUILD_TYPE=Release
-
-            - name: Build
-              run: ninja -C build
-
-            - name: clang-tidy
-              run: |
-                  sed -i 's/-mno-direct-extern-access //g' build/compile_commands.json
-                  set -o pipefail
-                  run-clang-tidy -p build -j $(nproc) -header-filter="Plugins/.*" 2>&1 | \
-                    grep -v 'Suppressed\|non-user\|non-system\|unknown argument.*mno-direct\|Found compiler error\|warnings generated\.\|^Use -header-filter'

.gitea/workflows/lint-js.yml

@@ -1,10 +1,10 @@
-name: JS/TS
+name: Lint & Format (JS/TS)
 
 on:
     pull_request:
 
 jobs:
-    fmt:
+    lint-format:
         runs-on: alpine
         container: node:26-alpine
 
@@ -18,6 +18,7 @@ jobs:
                     git
 
             - name: Prettier
+              continue-on-error: true
               run: |
                   if [ -n "$(find . \( -iname "*.js" -o -iname "*.jsx" -o -iname "*.ts" -o -iname "*.tsx" -o -iname "*.mjs" -o -iname "*.cjs" \) -print -quit)" ]; then
                     npx --yes prettier --check "**/*.{js,jsx,ts,tsx,mjs,cjs}" --ignore-path .prettierignore
@@ -25,19 +26,6 @@ jobs:
                     echo "No JS/TS files found"
                   fi
 
-    lint:
-        runs-on: alpine
-        container: node:26-alpine
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git
-
             - name: ESLint
               run: |
                   if [ -n "$(find . \( -iname "*.js" -o -iname "*.jsx" -o -iname "*.ts" -o -iname "*.tsx" -o -iname "*.mjs" -o -iname "*.cjs" \) -print -quit)" ]; then

.gitea/workflows/lint-python.yml

@@ -4,7 +4,7 @@ on:
     pull_request:
 
 jobs:
-    fmt:
+    lint-format:
         runs-on: alpine
         container: node:26-alpine
 
@@ -23,28 +23,11 @@ jobs:
                   pip install --no-cache-dir ruff
 
             - name: Format check
+              continue-on-error: true
               run: |
                   . .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
@@ -80,30 +63,3 @@ jobs:
                   . .venv/bin/activate
                   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/

.gitea/workflows/lint-rust.yml

@@ -0,0 +1,72 @@
+name: Lint & Format (Rust)
+
+on:
+    pull_request:
+
+jobs:
+    lint-format:
+        runs-on: alpine
+        container: node:26-alpine
+        env:
+            CARGO_HOME: ${{ github.workspace }}/.cargo
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Cache cargo packages
+              uses: actions/cache@v4
+              env:
+                  cache-name: cache-cargo-packages
+              with:
+                  path: |
+                      .cargo/registry
+                      .cargo/git
+                      target
+                  key: rust-${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/Cargo.lock') }}
+                  restore-keys: |
+                      rust-${{ runner.os }}-build-${{ env.cache-name }}-
+                      rust-${{ runner.os }}-build-
+                      rust-
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                    git \
+                    cargo \
+                    rust \
+                    rustfmt \
+                    rust-clippy
+
+            - name: Format check
+              continue-on-error: true
+              run: |
+                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
+                    for manifest in $(find . -name "Cargo.toml"); do
+                      cargo fmt --manifest-path "$manifest" --check && \
+                        echo "$manifest: formatting OK" || \
+                        echo "$manifest: needs formatting"
+                    done
+                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
+                    echo "Rust files found but no Cargo.toml"
+                    exit 1
+                  else
+                    echo "No Rust project found"
+                  fi
+
+            - name: Clippy
+              run: |
+                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
+                    status=0
+                    for manifest in $(find . -name "Cargo.toml"); do
+                      cargo clippy --manifest-path "$manifest" --all-targets --all-features -- -D warnings && \
+                        echo "$manifest: Clippy passed" || \
+                        { echo "$manifest: Clippy failed"; status=1; }
+                    done
+                    exit $status
+                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
+                    echo "Rust files found but no Cargo.toml"
+                    exit 1
+                  else
+                    echo "No Rust project found"
+                  fi

.gitea/workflows/rust.yml

@@ -1,152 +0,0 @@
-name: Rust
-
-on:
-    pull_request:
-
-jobs:
-    build:
-        runs-on: alpine
-        container: node:26-alpine
-        env:
-            CARGO_HOME: ${{ github.workspace }}/.cargo
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Cache cargo packages
-              uses: actions/cache@v4
-              env:
-                  cache-name: cache-cargo-packages
-              with:
-                  path: |
-                      .cargo/registry
-                      .cargo/git
-                      target
-                  key: rust-build-${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/Cargo.lock') }}
-                  restore-keys: |
-                      rust-${{ runner.os }}-build-${{ env.cache-name }}-
-                      rust-${{ runner.os }}-build-
-                      rust-
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git \
-                    cargo \
-                    rust
-
-            - name: Cargo check
-              run: |
-                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
-                    for manifest in $(find . -name "Cargo.toml"); do
-                      cargo check --manifest-path "$manifest" && \
-                        echo "$manifest: check passed" || \
-                        { echo "$manifest: check failed"; exit 1; }
-                    done
-                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
-                    echo "Rust files found but no Cargo.toml"
-                    exit 1
-                  else
-                    echo "No Rust project found"
-                  fi
-
-    fmt:
-        runs-on: alpine
-        container: node:26-alpine
-        env:
-            CARGO_HOME: ${{ github.workspace }}/.cargo
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Cache cargo packages
-              uses: actions/cache@v4
-              env:
-                  cache-name: cache-cargo-packages
-              with:
-                  path: |
-                      .cargo/registry
-                      .cargo/git
-                      target
-                  key: rust-fmt-${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/Cargo.lock') }}
-                  restore-keys: |
-                      rust-${{ runner.os }}-build-${{ env.cache-name }}-
-                      rust-${{ runner.os }}-build-
-                      rust-
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git \
-                    cargo \
-                    rust \
-                    rustfmt
-
-            - name: Format check
-              run: |
-                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
-                    status=0
-                    for manifest in $(find . -name "Cargo.toml"); do
-                      cargo fmt --manifest-path "$manifest" --check && \
-                        echo "$manifest: formatting OK" || \
-                        { echo "$manifest: needs formatting"; status=1; }
-                    done
-                    exit $status
-                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
-                    echo "Rust files found but no Cargo.toml"
-                    exit 1
-                  else
-                    echo "No Rust project found"
-                  fi
-
-    clippy:
-        runs-on: alpine
-        container: node:26-alpine
-        env:
-            CARGO_HOME: ${{ github.workspace }}/.cargo
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Cache cargo packages
-              uses: actions/cache@v4
-              env:
-                  cache-name: cache-cargo-packages
-              with:
-                  path: |
-                      .cargo/registry
-                      .cargo/git
-                      target
-                  key: rust-clippy-${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/Cargo.lock') }}
-                  restore-keys: |
-                      rust-${{ runner.os }}-build-${{ env.cache-name }}-
-                      rust-${{ runner.os }}-build-
-                      rust-
-
-            - name: Install tools
-              run: |
-                  apk add --no-cache \
-                    git \
-                    cargo \
-                    rust \
-                    rust-clippy
-
-            - name: Clippy
-              run: |
-                  if [ -n "$(find . -name "Cargo.toml" -print -quit)" ]; then
-                    status=0
-                    for manifest in $(find . -name "Cargo.toml"); do
-                      cargo clippy --manifest-path "$manifest" --all-targets --all-features -- -D warnings && \
-                        echo "$manifest: Clippy passed" || \
-                        { echo "$manifest: Clippy failed"; status=1; }
-                    done
-                    exit $status
-                  elif [ -n "$(find . -name "*.rs" -print -quit)" ]; then
-                    echo "Rust files found but no Cargo.toml"
-                    exit 1
-                  else
-                    echo "No Rust project found"
-                  fi

.gitignore

@@ -13,5 +13,3 @@ uv.lock
 .qtcreator/
 dist/
 **/target/
-**/test-plugins/
-**/Charts/

CMakeLists.txt

@@ -1,163 +1,36 @@
 cmake_minimum_required(VERSION 3.19)
 
-if(NOT DEFINED VERSION)
-	execute_process(
-		COMMAND git describe --tags --abbrev=0
-		WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
-		OUTPUT_VARIABLE GIT_LAST_TAG
-		OUTPUT_STRIP_TRAILING_WHITESPACE
-		ERROR_QUIET
-	)
-
-	if (GIT_LAST_TAG)
-		string(REGEX REPLACE "^v" "" GIT_LAST_TAG "${GIT_LAST_TAG}")
-
-		string(REPLACE "." ";" VERSION_LIST "${GIT_LAST_TAG}")
-		list(GET VERSION_LIST 0 VERSION_MAJOR)
-		list(GET VERSION_LIST 1 VERSION_MINOR)
-
-		execute_process(
-			COMMAND git rev-list v${VERSION_MAJOR}.${VERSION_MINOR}.0..HEAD --count
-			WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
-			OUTPUT_VARIABLE VERSION_PATCH
-			OUTPUT_STRIP_TRAILING_WHITESPACE
-			ERROR_QUIET
-		)
-	endif()
-endif()
-
-set(VERSION "${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH}")
-
-project(ZShell VERSION ${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH})
-message(STATUS "ZShell version: ${VERSION}")
+project(ZShell)
 
 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" CACHE STRING "Modules to build/install")
 
 set(INSTALL_LIBDIR "usr/lib/ZShell" CACHE STRING "Library install dir")
 set(INSTALL_QMLDIR "usr/lib/qt6/qml" CACHE STRING "QML install dir")
 set(INSTALL_QSCONFDIR "etc/xdg/quickshell/zshell" CACHE STRING "Quickshell config install dir")
 set(INSTALL_GREETERCONFDIR "etc/xdg/quickshell/zshell-greeter" CACHE STRING "Quickshell greeter install dir")
 
-set(CMAKE_INSTALL_MESSAGE NEVER)
-
 add_compile_options(
-	-Wall -Wextra -Wpedantic -Wshadow -Wconversion
-	-Wold-style-cast -Wnull-dereference -Wdouble-promotion
-	-Wformat=2 -Wfloat-equal -Woverloaded-virtual
-	-Wsign-conversion -Wredundant-decls -Wswitch
-	-Wunreachable-code
+    -Wall -Wextra -Wpedantic -Wshadow -Wconversion
+    -Wold-style-cast -Wnull-dereference -Wdouble-promotion
+    -Wformat=2 -Wfloat-equal -Woverloaded-virtual
+    -Wsign-conversion -Wredundant-decls -Wswitch
+    -Wunreachable-code
 )
 
 
-if("shell" 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")
-	set(ZSHELL_CLI_SRC "${CMAKE_SOURCE_DIR}/cli/src/zshell")
-
-	find_program(NUITKA_EXECUTABLE nuitka)
-
-	if(NUITKA_EXECUTABLE)
-		file(GLOB_RECURSE ZSHELL_CLI_SOURCES CONFIGURE_DEPENDS
-			"${ZSHELL_CLI_SRC}/*.py"
-		)
-		file(GLOB_RECURSE ZSHELL_CLI_ASSETS CONFIGURE_DEPENDS
-			"${ZSHELL_CLI_SRC}/assets/*"
-		)
-
-		add_custom_command(
-			OUTPUT "${ZSHELL_CLI_DIST}/zshell-cli"
-			COMMAND ${CMAKE_COMMAND} -E make_directory "${ZSHELL_CLI_BUILD_DIR}"
-			COMMAND ${CMAKE_COMMAND} -E rm -rf "${ZSHELL_CLI_DIST}"
-
-			COMMAND
-				${NUITKA_EXECUTABLE}
-				--standalone
-				--include-data-dir=${CMAKE_SOURCE_DIR}/cli/src/zshell/assets=zshell/assets
-				--output-dir=${ZSHELL_CLI_BUILD_DIR}
-				--output-filename=zshell-cli
-				${CMAKE_SOURCE_DIR}/cli/src/zshell/
-
-			WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}/cli
-			DEPENDS ${ZSHELL_CLI_SOURCES} ${ZSHELL_CLI_ASSETS}
-		)
-
-		add_custom_target(zshell-cli ALL DEPENDS "${ZSHELL_CLI_DIST}/zshell-cli")
-
-		install(PROGRAMS "${ZSHELL_CLI_DIST}/zshell-cli" DESTINATION "${INSTALL_LIBDIR}/zshell-cli")
-		install(DIRECTORY "${ZSHELL_CLI_DIST}/" DESTINATION "${INSTALL_LIBDIR}/zshell-cli" PATTERN "zshell-cli" EXCLUDE)
-
-		configure_file(
-			"${CMAKE_SOURCE_DIR}/Plugins/cmake/zshell-cli.cmake.in"
-			"${CMAKE_BINARY_DIR}/Plugins/cmake/zshell-cli.cmake"
-			@ONLY
-		)
-		install(SCRIPT "${CMAKE_BINARY_DIR}/Plugins/cmake/zshell-cli.cmake")
-	else()
-		message(STATUS "Nuitka not found, building zshell-cli as a Python wheel instead")
-
-		find_package(Python3 COMPONENTS Interpreter REQUIRED)
-
-		set(ZSHELL_CLI_DIR "${CMAKE_SOURCE_DIR}")
-		set(ZSHELL_CLI_DIST_DIR "${ZSHELL_CLI_DIR}/dist")
-		set(ZSHELL_CLI_WHEEL_STAMP "${CMAKE_BINARY_DIR}/zshell-cli/wheel.stamp")
-
-		file(GLOB_RECURSE ZSHELL_CLI_SOURCES CONFIGURE_DEPENDS
-			"${ZSHELL_CLI_DIR}/src/zshell/*.py"
-		)
-		file(GLOB_RECURSE ZSHELL_CLI_ASSETS CONFIGURE_DEPENDS
-			"${ZSHELL_CLI_DIR}/src/zshell/assets/*"
-		)
-
-		add_custom_command(
-			OUTPUT "${ZSHELL_CLI_WHEEL_STAMP}"
-			COMMAND ${CMAKE_COMMAND} -E make_directory "${CMAKE_BINARY_DIR}/zshell-cli"
-			COMMAND ${CMAKE_COMMAND} -E rm -rf "${ZSHELL_CLI_DIST_DIR}"
-			COMMAND ${Python3_EXECUTABLE} -m build --wheel --no-isolation
-			COMMAND ${CMAKE_COMMAND} -E touch "${ZSHELL_CLI_WHEEL_STAMP}"
-			WORKING_DIRECTORY "${ZSHELL_CLI_DIR}"
-			DEPENDS ${ZSHELL_CLI_SOURCES} ${ZSHELL_CLI_ASSETS}
-			COMMENT "Building zshell-cli python wheel"
-		)
-
-		add_custom_target(zshell-cli ALL DEPENDS "${ZSHELL_CLI_WHEEL_STAMP}")
-
-		configure_file(
-			"${CMAKE_SOURCE_DIR}/Plugins/cmake/zshell-cli-python.cmake.in"
-			"${CMAKE_BINARY_DIR}/Plugins/cmake/zshell-cli-python.cmake"
-			@ONLY
-		)
-		install(SCRIPT "${CMAKE_BINARY_DIR}/Plugins/cmake/zshell-cli-python.cmake")
-	endif()
-endif()
-
 if("plugin" IN_LIST ENABLE_MODULES)
 	add_subdirectory(Plugins)
 endif()
 
 if("shell" IN_LIST ENABLE_MODULES)
 	foreach(dir assets scripts Components Config Modules Daemons Drawers Effects Helpers Paths)
-		install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
-	endforeach()
+        install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
+    endforeach()
 
 	# Disable watching for changes
 	file(READ shell.qml SHELL_QML)
@@ -168,22 +41,3 @@ if("shell" IN_LIST ENABLE_MODULES)
 	# Greeter
 	install(DIRECTORY Greeter/ DESTINATION "${INSTALL_GREETERCONFDIR}")
 endif()
-
-if("m3shapes" IN_LIST ENABLE_MODULES)
-	message(STATUS "Fetching M3Shapes module")
-	include(FetchContent)
-	set(M3SHAPES_REV bdc327b29f95394a732baf3c9b19658ba23755b6)
-	FetchContent_Declare(
-		m3shapes_external
-		GIT_REPOSITORY https://github.com/soramanew/m3shapes.git
-		GIT_TAG        ${M3SHAPES_REV}
-		SOURCE_DIR     "${CMAKE_BINARY_DIR}/_deps/m3shapes-${M3SHAPES_REV}"
-	)
-	FetchContent_MakeAvailable(m3shapes_external)
-	message(STATUS "Done fetching M3Shapes module")
-
-	# Fix m3shapes wrong rpath
-	if(TARGET m3shapesplugin)
-		set_target_properties(m3shapesplugin PROPERTIES INSTALL_RPATH "$ORIGIN")
-	endif()
-endif()

Components/AnchorAnim.qml

@@ -1,51 +0,0 @@
-import QtQuick
-import qs.Config
-
-AnchorAnimation {
-	enum Type {
-		StandardSmall = 0,
-		Standard,
-		StandardLarge,
-		StandardExtraLarge,
-		EmphasizedSmall,
-		Emphasized,
-		EmphasizedLarge,
-		EmphasizedExtraLarge,
-		FastSpatial,
-		DefaultSpatial,
-		SlowSpatial
-	}
-
-	property int type: AnchorAnim.DefaultSpatial
-
-	duration: {
-		if (type < AnchorAnim.StandardSmall || type > AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
-
-		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
-		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
-		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.durations.large;
-
-		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
-		return Appearance.anim.durations[types[idx]];
-	}
-	easing.bezierCurve: {
-		if (type == AnchorAnim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
-		if (type == AnchorAnim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
-		if (type == AnchorAnim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
-
-		if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge)
-			return Appearance.anim.curves.standard;
-		if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
-
-		return Appearance.anim.curves.expressiveDefaultSpatial;
-	}
-}

Components/Anim.qml

@@ -2,62 +2,7 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	enum Type {
-		StandardSmall = 0,
-		Standard,
-		StandardLarge,
-		StandardExtraLarge,
-		EmphasizedSmall,
-		Emphasized,
-		EmphasizedLarge,
-		EmphasizedExtraLarge,
-		FastSpatial,
-		DefaultSpatial,
-		SlowSpatial,
-		FastEffects,
-		DefaultEffects,
-		SlowEffects
-	}
-
-	property int type: Anim.DefaultSpatial
-
-	duration: {
-		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
-			return Appearance.anim.durations.normal;
-
-		if (type === Anim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
-		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
-		if (type === Anim.SlowSpatial)
-			return Appearance.anim.durations.large;
-		if (type === Anim.FastEffects)
-			return Appearance.anim.durations.expressiveFastEffects;
-		if (type === Anim.DefaultEffects)
-			return Appearance.anim.durations.expressiveEffects;
-		if (type === Anim.SlowEffects)
-			return Appearance.anim.durations.expressiveSlowEffects;
-
-		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4;
-		return Appearance.anim.durations[types[idx]];
-	}
-	easing.bezierCurve: {
-		if (type === Anim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
-		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
-		if (type === Anim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
-		if (type === Anim.FastEffects)
-			return Appearance.anim.curves.expressiveFastEffects;
-		if (type === Anim.DefaultEffects)
-			return Appearance.anim.curves.expressiveDefaultEffects;
-		if (type === Anim.SlowEffects)
-			return Appearance.anim.curves.expressiveSlowEffects;
-
-		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
-		return Appearance.anim.curves.standard;
-	}
+	duration: Appearance.anim.durations.normal
+	easing.bezierCurve: Appearance.anim.curves.standard
+	easing.type: Easing.BezierSpline
 }

Components/BaseStyledSlider.qml

@@ -12,8 +12,11 @@ Slider {
 	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 {

Components/ButtonBase.qml

@@ -1,87 +0,0 @@
-import QtQuick
-import qs.Config
-
-CustomRect {
-	id: root
-
-	enum ButtonType {
-		Filled,
-		Tonal,
-		Text
-	}
-
-	property color activeColor
-	property color activeOnColor
-	property bool checked
-	property real checkedRadius: Appearance.rounding.medium
-	property real defaultRadius: Appearance.rounding.large
-	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color disabledOnColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
-	property bool fillWidth
-	property font font: ({
-			family: Appearance.font.family.sans,
-			pointSize: Appearance.font.size.larger,
-			bold: false
-		})
-	property real horizontalPadding: padding
-	readonly property alias hovered: stateLayer.containsMouse
-	required implicitHeight
-	required implicitWidth
-	property color inactiveColor
-	property color inactiveOnColor
-	property bool internalChecked
-	property bool isRound
-	property bool isToggle
-	readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor
-	property real padding
-	readonly property alias pressed: stateLayer.pressed
-	property real pressedRadius: Appearance.rounding.small
-	readonly property alias radiusAnim: radiusAnim
-	property bool radiusMorph: true
-	property alias shapeMorph: stateLayer.shapeMorph
-	property real shapeMorphExpansion: shapeMorph && pressed ? 24 : 0
-	readonly property alias stateLayer: stateLayer
-	property int type: ButtonBase.Filled
-	property real verticalPadding: padding
-
-	signal clicked
-
-	color: type === ButtonBase.Text ? "transparent" : !enabled ? disabledColor : internalChecked ? activeColor : inactiveColor
-	radius: {
-		if (radiusMorph && pressed)
-			return pressedRadius;
-		if (internalChecked)
-			return checkedRadius;
-		if (isRound)
-			return (height || implicitHeight) / 2 * Math.min(1, Appearance.rounding.scale);
-		return defaultRadius;
-	}
-
-	Behavior on radius {
-		Anim {
-			id: radiusAnim
-
-			type: Anim.DefaultEffects
-		}
-	}
-	Behavior on shapeMorphExpansion {
-		Anim {
-			type: Anim.FastSpatial
-		}
-	}
-
-	onCheckedChanged: internalChecked = checked
-
-	StateLayer {
-		id: stateLayer
-
-		color: root.internalChecked ? root.activeOnColor : root.inactiveOnColor
-		enabled: root.enabled
-
-		onClicked: {
-			if (root.isToggle)
-				root.internalChecked = !root.internalChecked;
-			root.clicked();
-		}
-	}
-}

Components/CircularIndicator.qml

@@ -17,8 +17,8 @@ BusyIndicator {
 	}
 
 	property int animState
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color fgColour: DynamicColors.palette.m3primary
 	property real implicitSize: Appearance.font.size.normal * 3
 	property real internalStrokeWidth: strokeWidth
 	readonly property alias progress: manager.progress
@@ -31,8 +31,8 @@ BusyIndicator {
 
 	contentItem: CircularProgress {
 		anchors.fill: parent
-		bgColor: root.bgColor
-		fgColor: root.fgColor
+		bgColour: root.bgColour
+		fgColour: root.fgColour
 		padding: root.padding
 		rotation: manager.rotation
 		startAngle: manager.startFraction * 360
@@ -73,6 +73,7 @@ BusyIndicator {
 
 	CircularIndicatorManager {
 		id: manager
+
 	}
 
 	NumberAnimation {

Components/CircularProgress.qml

@@ -1,116 +1,66 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Shapes
-import ZShell.Components
 import qs.Config
 
-Item {
+Shape {
 	id: root
 
-	readonly property real arcRadius: (size - padding - strokeWidth * (1 + waveAmplitude * 2)) / 2
-	property color bgColor: DynamicColors.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
+	readonly property real arcRadius: (size - padding - strokeWidth) / 2
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color fgColour: DynamicColors.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 startAngle: -90
-	property int strokeWidth: Appearance.padding.small
-	property int sweepAngle: 360
-	readonly property real thickness: strokeWidth * (1 + waveAmplitude) * 2
+	property int strokeWidth: Appearance.padding.smaller
+	readonly property real vValue: value || 1 / 360
 	property real value
-	property alias waveAmplitude: wave.amplitudeMultiplier
-	property alias waveDuration: waveProgAnim.duration
-	property alias waveFrequency: wave.frequency
-	property bool wavePaused
-	property bool wavy: false
 
-	implicitHeight: implicitSize
-	implicitWidth: implicitSize
+	asynchronous: true
+	preferredRendererType: Shape.CurveRenderer
 
-	Shape {
-		asynchronous: true
-		opacity: Math.min(1, remainingArc.sweepAngle)
-		preferredRendererType: Shape.CurveRenderer
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.bgColour
+		strokeWidth: root.strokeWidth
 
-		ShapePath {
-			capStyle: ShapePath.RoundCap
-			fillColor: "transparent"
-			strokeColor: root.bgColor
-			strokeWidth: Math.min(1, remainingArc.sweepAngle) * root.strokeWidth
-
-			Behavior on strokeColor {
-				CAnim {
-				}
-			}
-
-			PathAngleArc {
-				id: remainingArc
-
-				centerX: root.size / 2
-				centerY: root.size / 2
-				radiusX: root.arcRadius
-				radiusY: root.arcRadius
-				startAngle: root.startAngle + root.clampedVal * root.sweepAngle + root.gapAngle
-				sweepAngle: Math.max(1 / 360, root.sweepAngle * (1 - root.clampedVal) - root.gapAngle * (root.sweepAngle < 360 ? 1 : 2))
-			}
-		}
-	}
-
-	WavyLine {
-		id: wave
-
-		amplitudeMultiplier: root.wavy ? 0.5 : 0
-		anchors.fill: parent
-		anchors.margins: -lineWidth * amplitudeMultiplier
-		color: root.fgColor
-		frequency: 8
-		fullAngle: root.sweepAngle
-		lineWidth: root.strokeWidth
-		pathType: WavyLine.Arc
-		radius: root.arcRadius
-		startAngle: root.startAngle
-		value: root.clampedVal
-
-		Behavior on amplitudeMultiplier {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on color {
+		Behavior on strokeColor {
 			CAnim {
+				duration: Appearance.anim.durations.large
 			}
 		}
-		Anim on waveProgress {
-			id: waveProgAnim
 
-			duration: 2000
-			easing.type: Easing.Linear
-			from: 0
-			loops: Animation.Infinite
-			paused: root.wavePaused || wave.amplitudeMultiplier === 0
-			running: true
-			to: 1
+		PathAngleArc {
+			centerX: root.size / 2
+			centerY: root.size / 2
+			radiusX: root.arcRadius
+			radiusY: root.arcRadius
+			startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
+			sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
 		}
 	}
 
-	Loader {
-		id: dot
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.fgColour
+		strokeWidth: root.strokeWidth
 
-		x: root.size / 2 + root.arcRadius * Math.cos(root.dotAngleRad) - width / 2
-		y: root.size / 2 + root.arcRadius * Math.sin(root.dotAngleRad) - height / 2
+		Behavior on strokeColor {
+			CAnim {
+				duration: Appearance.anim.durations.large
+			}
+		}
 
-		sourceComponent: CustomRect {
-			color: root.fgColor
-			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
+		PathAngleArc {
+			centerX: root.size / 2
+			centerY: root.size / 2
+			radiusX: root.arcRadius
+			radiusY: root.arcRadius
+			startAngle: root.startAngle
+			sweepAngle: 360 * root.vValue
 		}
 	}
 }

Components/CollapsibleSection.qml

@@ -0,0 +1,135 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	default property alias content: contentColumn.data
+	property string description: ""
+	property bool expanded: false
+	property bool nested: false
+	property bool showBackground: false
+	required property string title
+
+	signal toggleRequested
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.small
+
+	Item {
+		id: sectionHeaderItem
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: Math.max(titleRow.implicitHeight + Appearance.padding.normal * 2, 48)
+
+		RowLayout {
+			id: titleRow
+
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.normal
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.normal
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: Appearance.spacing.normal
+
+			CustomText {
+				font.pointSize: Appearance.font.size.larger
+				font.weight: 500
+				text: root.title
+			}
+
+			Item {
+				Layout.fillWidth: true
+			}
+
+			MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.normal
+				rotation: root.expanded ? 180 : 0
+				text: "expand_more"
+
+				Behavior on rotation {
+					Anim {
+						duration: Appearance.anim.durations.small
+						easing.bezierCurve: Appearance.anim.curves.standard
+					}
+				}
+			}
+		}
+
+		StateLayer {
+			function onClicked(): void {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3onSurface
+			radius: Appearance.rounding.normal
+			showHoverBackground: false
+		}
+	}
+
+	Item {
+		id: contentWrapper
+
+		Layout.fillWidth: true
+		Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Appearance.spacing.small * 2) : 0
+		clip: true
+
+		Behavior on Layout.preferredHeight {
+			Anim {
+				easing.bezierCurve: Appearance.anim.curves.standard
+			}
+		}
+
+		CustomRect {
+			id: backgroundRect
+
+			anchors.fill: parent
+			color: DynamicColors.transparency.enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? DynamicColors.palette.m3surfaceContainerHigh : DynamicColors.palette.m3surfaceContainer)
+			opacity: root.showBackground && root.expanded ? 1.0 : 0.0
+			radius: Appearance.rounding.normal
+			visible: root.showBackground
+
+			Behavior on opacity {
+				Anim {
+					easing.bezierCurve: Appearance.anim.curves.standard
+				}
+			}
+		}
+
+		ColumnLayout {
+			id: contentColumn
+
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.normal
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.normal
+			opacity: root.expanded ? 1.0 : 0.0
+			spacing: Appearance.spacing.small
+			y: Appearance.spacing.small
+
+			Behavior on opacity {
+				Anim {
+					easing.bezierCurve: Appearance.anim.curves.standard
+				}
+			}
+
+			CustomText {
+				id: descriptionText
+
+				Layout.bottomMargin: root.description !== "" ? Appearance.spacing.small : 0
+				Layout.fillWidth: true
+				Layout.topMargin: root.description !== "" ? Appearance.spacing.smaller : 0
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.small
+				text: root.description
+				visible: root.description !== ""
+				wrapMode: Text.Wrap
+			}
+		}
+	}
+}

Components/ColorArcPicker.qml

@@ -45,10 +45,10 @@ Item {
 	}
 
 	function syncFromPenColor() {
-		if (!drawing.drawingState)
+		if (!drawing)
 			return;
 
-		const c = drawing.drawingState.penColor;
+		const c = drawing.penColor;
 
 		if (c.hsvSaturation > 0) {
 			currentHue = c.hsvHue;
@@ -85,20 +85,12 @@ 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.penColor = Qt.hsva(currentHue, drawing.penColor.hsvSaturation, drawing.penColor.hsvValue, drawing.penColor.a);
 	}
 
 	implicitHeight: 180
 	implicitWidth: 220
 
-	Behavior on currentHue {
-		enabled: !root.dragActive
-
-		Anim {
-			type: Anim.StandardLarge
-		}
-	}
-
 	Component.onCompleted: syncFromPenColor()
 	onCurrentHueChanged: canvas.requestPaint()
 	onDrawingChanged: syncFromPenColor()
@@ -111,7 +103,7 @@ Item {
 			root.syncFromPenColor();
 		}
 
-		target: root.drawing.drawingState
+		target: root.drawing
 	}
 
 	Canvas {
@@ -149,21 +141,6 @@ Item {
 		}
 	}
 
-	CustomRect {
-		anchors.centerIn: parent
-		color: root.drawing?.drawingState.penColor
-		implicitHeight: implicitWidth
-		implicitWidth: canvas.height - root.handleSize - Appearance.padding.extraLarge * 2
-		radius: Appearance.rounding.full
-
-		Behavior on color {
-			enabled: false
-
-			CAnim {
-			}
-		}
-	}
-
 	Item {
 		id: handle
 
@@ -197,7 +174,7 @@ Item {
 
 			Rectangle {
 				anchors.centerIn: parent
-				color: Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
+				color: root.drawing ? root.drawing.penColor : Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
 				height: width
 				radius: width / 2
 				width: parent.width - 12

Components/CustomAudioSlider.qml

@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+
+Slider {
+	id: root
+
+	property color nonPeakColor: DynamicColors.tPalette.m3primary
+	required property real peak
+	property color peakColor: DynamicColors.palette.m3primary
+
+	background: Item {
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: root.implicitHeight / 3
+			anchors.left: parent.left
+			anchors.top: parent.top
+			anchors.topMargin: root.implicitHeight / 3
+			bottomRightRadius: root.implicitHeight / 15
+			color: root.nonPeakColor
+			implicitWidth: root.handle.x - root.implicitHeight
+			radius: Appearance.rounding.full
+			topRightRadius: root.implicitHeight / 15
+
+			CustomRect {
+				anchors.bottom: parent.bottom
+				anchors.left: parent.left
+				anchors.top: parent.top
+				bottomRightRadius: root.implicitHeight / 15
+				color: root.peakColor
+				implicitWidth: parent.width * root.peak
+				radius: Appearance.rounding.full
+				topRightRadius: root.implicitHeight / 15
+
+				Behavior on implicitWidth {
+					Anim {
+						duration: 50
+					}
+				}
+			}
+		}
+
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: root.implicitHeight / 3
+			anchors.right: parent.right
+			anchors.top: parent.top
+			anchors.topMargin: root.implicitHeight / 3
+			bottomLeftRadius: root.implicitHeight / 15
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitWidth: root.implicitWidth - root.handle.x - root.handle.implicitWidth - root.implicitHeight
+			radius: Appearance.rounding.full
+			topLeftRadius: root.implicitHeight / 15
+		}
+	}
+	handle: CustomRect {
+		anchors.verticalCenter: parent.verticalCenter
+		color: DynamicColors.palette.m3primary
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: Appearance.rounding.full
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
+
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+		}
+	}
+}

Components/CustomBusyIndicator.qml

@@ -0,0 +1,69 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+BusyIndicator {
+	id: control
+
+	property int busySize: 64
+	property color color: delegate.color
+
+	contentItem: Item {
+		implicitHeight: control.busySize
+		implicitWidth: control.busySize
+
+		Item {
+			id: item
+
+			height: control.busySize
+			opacity: control.running ? 1 : 0
+			width: control.busySize
+			x: parent.width / 2 - (control.busySize / 2)
+			y: parent.height / 2 - (control.busySize / 2)
+
+			Behavior on opacity {
+				OpacityAnimator {
+					duration: 250
+				}
+			}
+
+			RotationAnimator {
+				duration: 1250
+				from: 0
+				loops: Animation.Infinite
+				running: control.visible && control.running
+				target: item
+				to: 360
+			}
+
+			Repeater {
+				id: repeater
+
+				model: 6
+
+				CustomRect {
+					id: delegate
+
+					required property int index
+
+					color: control.color
+					implicitHeight: 10
+					implicitWidth: 10
+					radius: 5
+					x: item.width / 2 - width / 2
+					y: item.height / 2 - height / 2
+
+					transform: [
+						Translate {
+							y: -Math.min(item.width, item.height) * 0.5 + 5
+						},
+						Rotation {
+							angle: delegate.index / repeater.count * 360
+							origin.x: 5
+							origin.y: 5
+						}
+					]
+				}
+			}
+		}
+	}
+}

Components/CustomButton.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+Button {
+	id: control
+
+	property color bgColor: DynamicColors.palette.m3primary
+	property int radius: Appearance.rounding.smallest / 2
+	property color textColor: DynamicColors.palette.m3onPrimary
+
+	background: CustomRect {
+		color: control.bgColor
+		opacity: control.enabled ? 1.0 : 0.5
+		radius: control.radius
+	}
+	contentItem: CustomText {
+		color: control.textColor
+		horizontalAlignment: Text.AlignHCenter
+		opacity: control.enabled ? 1.0 : 0.5
+		text: control.text
+		verticalAlignment: Text.AlignVCenter
+	}
+
+	StateLayer {
+		function onClicked(): void {
+			control.clicked();
+		}
+
+		radius: control.radius
+	}
+}

Components/CustomClippingWrapperRect.qml

@@ -1,13 +0,0 @@
-import Quickshell.Widgets
-import QtQuick
-
-ClippingWrapperRectangle {
-	id: root
-
-	color: "transparent"
-
-	Behavior on color {
-		CAnim {
-		}
-	}
-}

Components/CustomComboBox.qml

@@ -0,0 +1,169 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs.Config
+
+ComboBox {
+	id: root
+
+	property int cornerRadius: Appearance.rounding.normal
+	property int fieldHeight: 42
+	property bool filled: true
+	property real focusRingOpacity: 0.70
+	property int hPadding: 16
+	property int menuCornerRadius: 16
+	property int menuRowHeight: 46
+	property int menuVisibleRows: 7
+	property bool preferPopupWindow: false
+
+	hoverEnabled: true
+	implicitHeight: fieldHeight
+	implicitWidth: 240
+	spacing: 8
+
+	// ---------- Field background (filled/outlined + state layers + focus ring) ----------
+	background: Item {
+		anchors.fill: parent
+
+		CustomRect {
+			id: container
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3surfaceVariant
+			radius: root.cornerRadius
+
+			StateLayer {
+			}
+		}
+	}
+
+	// ---------- Content ----------
+	contentItem: RowLayout {
+		anchors.fill: parent
+		anchors.leftMargin: root.hPadding
+		anchors.rightMargin: root.hPadding
+		spacing: 12
+
+		// Display text
+		CustomText {
+			Layout.fillWidth: true
+			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+			font.pixelSize: 16
+			font.weight: Font.Medium
+			text: root.currentText
+			verticalAlignment: Text.AlignVCenter
+		}
+
+		// Indicator chevron (simple, replace with your icon system)
+		CustomText {
+			color: root.enabled ? DynamicColors.palette.m3onSurfaceVariant : DynamicColors.palette.m3onSurfaceVariant
+			rotation: root.popup.visible ? 180 : 0
+			text: "▾"
+			transformOrigin: Item.Center
+			verticalAlignment: Text.AlignVCenter
+
+			Behavior on rotation {
+				NumberAnimation {
+					duration: 140
+					easing.type: Easing.OutCubic
+				}
+			}
+		}
+	}
+	popup: Popup {
+		id: p
+
+		implicitHeight: list.contentItem.height + Appearance.padding.small * 2
+		implicitWidth: root.width
+		modal: true
+		popupType: root.preferPopupWindow ? Popup.Window : Popup.Item
+		y: -list.currentIndex * (root.menuRowHeight + Appearance.spacing.small) - Appearance.padding.small
+
+		background: CustomRect {
+			color: DynamicColors.palette.m3surface
+			radius: root.menuCornerRadius
+		}
+		contentItem: ListView {
+			id: list
+
+			anchors.bottomMargin: Appearance.padding.small
+			anchors.fill: parent
+			anchors.topMargin: Appearance.padding.small
+			clip: true
+			currentIndex: root.currentIndex
+			model: root.delegateModel
+			spacing: Appearance.spacing.small
+
+			delegate: CustomRect {
+				required property int index
+				required property var modelData
+
+				anchors.horizontalCenter: parent.horizontalCenter
+				color: (index === root.currentIndex) ? DynamicColors.palette.m3primary : "transparent"
+				implicitHeight: root.menuRowHeight
+				implicitWidth: p.implicitWidth - Appearance.padding.small * 2
+				radius: Appearance.rounding.normal - Appearance.padding.small
+
+				RowLayout {
+					anchors.fill: parent
+					spacing: 10
+
+					CustomText {
+						Layout.fillWidth: true
+						color: DynamicColors.palette.m3onSurface
+						elide: Text.ElideRight
+						font.pixelSize: 15
+						text: modelData
+						verticalAlignment: Text.AlignVCenter
+					}
+
+					CustomText {
+						color: DynamicColors.palette.m3onSurfaceVariant
+						text: "✓"
+						verticalAlignment: Text.AlignVCenter
+						visible: index === root.currentIndex
+					}
+				}
+
+				StateLayer {
+					onClicked: {
+						root.currentIndex = index;
+						p.close();
+					}
+				}
+			}
+		}
+
+		// Expressive-ish open/close motion: subtle scale+fade (tune to taste). :contentReference[oaicite:5]{index=5}
+		enter: Transition {
+			Anim {
+				from: 0
+				property: "opacity"
+				to: 1
+			}
+
+			Anim {
+				from: 0.98
+				property: "scale"
+				to: 1.0
+			}
+		}
+		exit: Transition {
+			Anim {
+				from: 1
+				property: "opacity"
+				to: 0
+			}
+		}
+
+		Elevation {
+			anchors.fill: parent
+			level: 2
+			radius: root.menuCornerRadius
+			z: -1
+		}
+	}
+}

Components/CustomFlickable.qml

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

Components/CustomListView.qml

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

Components/CustomProgressBar.qml

@@ -1,237 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Templates
-import ZShell
-import ZShell.Components
-import ZShell.Internal
-import qs.Config
-
-ProgressBar {
-	id: root
-
-	enum IndeterminateAnimState {
-		Running,
-		Completing,
-		Stopped
-	}
-
-	property color bgColor: DynamicColors.palette.m3secondaryContainer
-	property color fgColor: DynamicColors.palette.m3primary
-	property int indeterminateAnimState: CustomProgressBar.Stopped
-	property real waveAmplitude: 0.5
-	property int waveDuration: 1000
-	property int waveFrequency: 6
-	property bool wavePaused
-	property bool wavy
-
-	function toBounds(startFrac: real, endFrac: real, gapSize: real): point {
-		startFrac = ZUtils.clamp(startFrac, 0, 1);
-		endFrac = ZUtils.clamp(endFrac, 0, 1);
-
-		// Ramp down gap size
-		const GAP_RAMP_DOWN_THRESHOLD = 0.01;
-		gapSize += height / 2;
-		const startGapSize = (gapSize * ZUtils.clamp(startFrac, 0, GAP_RAMP_DOWN_THRESHOLD) / GAP_RAMP_DOWN_THRESHOLD);
-		const endGapSize = (gapSize * (1 - ZUtils.clamp(endFrac, 1 - GAP_RAMP_DOWN_THRESHOLD, 1)) / GAP_RAMP_DOWN_THRESHOLD);
-		const start = width * startFrac + startGapSize;
-		const end = width * endFrac - endGapSize;
-
-		return start >= end ? Qt.point(0, 0) : Qt.point(start, end);
-	}
-
-	function updateIAnimState(): void {
-		if (indeterminate) {
-			manager.completeEndProgress = 0;
-			indeterminateAnimState = CustomProgressBar.Running;
-		} else if (indeterminateAnimState === CustomProgressBar.Running) {
-			indeterminateAnimState = CustomProgressBar.Completing;
-		}
-	}
-
-	implicitHeight: 4
-	implicitWidth: 200
-
-	contentItem: Loader {
-		anchors.fill: parent
-		asynchronous: true
-		sourceComponent: root.indeterminate || root.indeterminateAnimState !== CustomProgressBar.Stopped ? indeterminateComp : determinateComp
-	}
-
-	Component.onCompleted: updateIAnimState()
-	onIndeterminateChanged: updateIAnimState()
-
-	LinearIndicatorManager {
-		id: manager
-
-		gap: Appearance.spacing.extraSmall
-
-		Anim on completeEndProgress {
-			duration: manager.completeEndDuration
-			running: root.indeterminateAnimState === CustomProgressBar.Completing
-			to: 1
-
-			onFinished: {
-				if (root.indeterminateAnimState === CustomProgressBar.Completing)
-					root.indeterminateAnimState = CustomProgressBar.Stopped;
-			}
-		}
-		Anim on progress {
-			duration: manager.duration
-			easing.type: Easing.Linear
-			from: 0
-			loops: Animation.Infinite
-			running: root.indeterminateAnimState !== CustomProgressBar.Stopped
-			to: 1
-		}
-	}
-
-	Component {
-		id: determinateComp
-
-		Item {
-			Line {
-				id: remaining
-
-				anchors.right: parent.right
-				implicitWidth: parent.width - wave.implicitWidth - Appearance.spacing.extraSmall
-			}
-
-			Line {
-				property real implicitSize
-
-				anchors.right: parent.right
-				anchors.rightMargin: (parent.height - implicitHeight) / 2
-				anchors.verticalCenter: parent.verticalCenter
-				color: root.fgColor
-				implicitHeight: implicitSize
-				implicitWidth: implicitSize
-				radius: Appearance.rounding.full
-
-				Behavior on implicitSize {
-					Anim {
-						type: Anim.FastSpatial
-					}
-				}
-
-				Component.onCompleted: implicitSize = Qt.binding(() => parent.width - wave.implicitWidth < parent.height ? parent.height : 4)
-			}
-
-			Wave {
-				id: wave
-
-				anchors.left: parent.left
-
-				Behavior on implicitWidth {
-					Anim {
-					}
-				}
-
-				Component.onCompleted: implicitWidth = Qt.binding(() => parent.width * root.visualPosition)
-			}
-		}
-	}
-
-	Component {
-		id: indeterminateComp
-
-		Item {
-			id: content
-
-			Line {
-				bounds: {
-					const i = manager.activeIndicators[0]; // qmllint disable unresolved-type
-					return i ? root.toBounds(0, i.startFraction, i.gapSize / 2) : Qt.point(0, 0);
-				}
-			}
-
-			Line {
-				bounds: {
-					const i = manager.activeIndicators[manager.activeIndicators.length - 1]; // qmllint disable unresolved-type
-					return i ? root.toBounds(i.endFraction, 1, i.gapSize / 2) : Qt.point(0, 0);
-				}
-			}
-
-			Instantiator {
-				model: Math.max(manager.activeIndicators.length, 1) - 1 // qmllint disable unresolved-type
-
-				delegate: Line {
-					readonly property LinearIndicatorSegment cur: manager.activeIndicators[index] // qmllint disable unresolved-type
-					required property int index
-					readonly property LinearIndicatorSegment next: manager.activeIndicators[index + 1 % manager.activeIndicators.length] // qmllint disable unresolved-type
-
-					bounds: root.toBounds(cur.endFraction, next.startFraction, cur.gapSize / 2)
-				}
-
-				onObjectAdded: (_, obj) => content.data.push(obj)
-				onObjectRemoved: (_, obj) => {
-					const idx = content.data.indexOf(obj);
-					if (idx !== -1)
-						content.data.splice(idx, 1);
-				}
-			}
-
-			Instantiator {
-				model: manager.activeIndicators // qmllint disable unresolved-type
-
-				delegate: Wave {
-					readonly property point bounds: root.toBounds(modelData.startFraction, modelData.endFraction, modelData.gapSize / 2)
-					required property LinearIndicatorSegment modelData
-
-					color: root.fgColor
-					implicitWidth: bounds.y - bounds.x
-					x: bounds.x
-				}
-
-				onObjectAdded: (_, obj) => content.data.push(obj)
-				onObjectRemoved: (_, obj) => {
-					const idx = content.data.indexOf(obj);
-					if (idx !== -1)
-						content.data.splice(idx, 1);
-				}
-			}
-		}
-	}
-
-	component Line: CustomRect {
-		property point bounds
-
-		anchors.verticalCenter: parent.verticalCenter
-		color: root.bgColor
-		implicitHeight: parent.height
-		implicitWidth: bounds.y - bounds.x
-		radius: Appearance.rounding.full
-		x: bounds.x
-	}
-	component Wave: WavyLine {
-		id: wave
-
-		amplitudeMultiplier: root.wavy ? root.waveAmplitude : 0
-		anchors.verticalCenter: parent.verticalCenter
-		color: root.fgColor
-		frequency: root.waveFrequency
-		fullLength: parent.width
-		implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
-		lineWidth: parent.height
-		startX: x
-
-		Behavior on amplitudeMultiplier {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on color {
-			CAnim {
-			}
-		}
-		Anim on waveProgress {
-			duration: root.waveDuration
-			easing.type: Easing.Linear
-			from: 0
-			loops: Animation.Infinite
-			paused: wave.amplitudeMultiplier === 0 || root.wavePaused
-			running: true
-			to: 1
-		}
-	}
-}

Components/CustomRadioButton.qml

@@ -33,13 +33,13 @@ RadioButton {
 		}
 
 		StateLayer {
+			function onClicked(): void {
+				root.click();
+			}
+
 			anchors.margins: -7
 			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
 			z: -1
-
-			onClicked: {
-				root.click();
-			}
 		}
 
 		CustomRect {

Components/CustomScrollBar.qml

@@ -1,25 +1,49 @@
+import qs.Config
 import QtQuick
 import QtQuick.Templates
-import qs.Helpers
-import qs.Config
 
 ScrollBar {
 	id: root
 
-	readonly property real effectiveSize: Math.max(nonAnimHeight, root.minimumSize)
-	readonly property real effectiveTravel: Math.max(0, 1 - root.effectiveSize)
+	property bool _updatingFromFlickable: false
+	property bool _updatingFromUser: false
+	property bool animating
 	required property Flickable flickable
-	readonly property real nonAnimHeight: flickable.height / flickable.contentHeight
-	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
+	property real nonAnimPosition
 	property bool shouldBeActive
-	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
 
-	enabled: !Visibilities.getForActive().isDrawing
-	implicitWidth: Appearance.padding.extraSmall * 2
+	implicitWidth: 8
 
-	contentItem: Item {
+	contentItem: CustomRect {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		color: DynamicColors.palette.m3secondary
+		opacity: {
+			if (root.size === 1)
+				return 0;
+			if (fullMouse.pressed)
+				return 1;
+			if (mouse.containsMouse)
+				return 0.8;
+			if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
+				return 0.6;
+			return 0;
+		}
+		radius: Appearance.rounding.full
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		MouseArea {
+			id: mouse
+
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
 	}
 	Behavior on position {
 		enabled: !fullMouse.pressed
@@ -28,15 +52,58 @@ ScrollBar {
 		}
 	}
 
+	Component.onCompleted: {
+		if (flickable) {
+			const contentHeight = flickable.contentHeight;
+			const height = flickable.height;
+			if (contentHeight > height) {
+				nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+			}
+		}
+	}
 	onHoveredChanged: {
 		if (hovered)
-			shouldBeActive = hovered;
+			shouldBeActive = true;
 		else
-			hideDelay.restart();
+			shouldBeActive = flickable.moving;
+	}
+
+	// Sync nonAnimPosition with Qt's automatic position binding
+	onPositionChanged: {
+		if (_updatingFromUser) {
+			_updatingFromUser = false;
+			return;
+		}
+		if (position === nonAnimPosition) {
+			animating = false;
+			return;
+		}
+		if (!animating && !_updatingFromFlickable && !fullMouse.pressed) {
+			nonAnimPosition = position;
+		}
+	}
+
+	// Sync nonAnimPosition with flickable when not animating
+	Connections {
+		function onContentYChanged() {
+			if (!animating && !fullMouse.pressed) {
+				_updatingFromFlickable = true;
+				const contentHeight = flickable.contentHeight;
+				const height = flickable.height;
+				if (contentHeight > height) {
+					nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+				} else {
+					nonAnimPosition = 0;
+				}
+				_updatingFromFlickable = false;
+			}
+		}
+
+		target: flickable
 	}
 
 	Connections {
-		function onMovingChanged() {
+		function onMovingChanged(): void {
 			if (root.flickable.moving)
 				root.shouldBeActive = true;
 			else
@@ -46,57 +113,6 @@ ScrollBar {
 		target: root.flickable
 	}
 
-	CustomClippingRect {
-		anchors.bottom: parent.bottom
-		anchors.right: parent.right
-		anchors.top: parent.top
-		implicitWidth: handle.implicitWidth
-		radius: Appearance.rounding.full
-
-		CustomRect {
-			id: handle
-
-			anchors.right: parent.right
-			color: DynamicColors.palette.m3secondary
-			implicitHeight: root.height * root.effectiveSize
-			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 {
-				Anim {
-				}
-			}
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-
-			MouseArea {
-				id: mouse
-
-				acceptedButtons: Qt.NoButton
-				anchors.fill: parent
-				cursorShape: Qt.PointingHandCursor
-				hoverEnabled: true
-			}
-		}
-	}
-
 	Timer {
 		id: hideDelay
 
@@ -108,55 +124,66 @@ ScrollBar {
 	CustomMouseArea {
 		id: fullMouse
 
-		property real pressOffset: 0
-
-		function contentYFromThumbTop(thumbTop) {
-			var visualPos = root.effectiveTravel > 0 ? thumbTop / root.travelScale : 0;
-
-			return root.reversed ? (visualPos - 1) * root.flickable.contentHeight : visualPos * root.flickable.contentHeight;
-		}
-
-		function updateFromEvent(event) {
-			var posInTrack = event.y / root.height;
-			var thumbTop = posInTrack - pressOffset;
-			thumbTop = Math.max(0, Math.min(root.effectiveTravel, thumbTop));
-
-			root.flickable.contentY = contentYFromThumbTop(thumbTop);
-		}
-
-		function visualThumbTop() {
-			const visualPos = root.reversed ? (1 + root.nonAnimY) : root.nonAnimY;
-			return visualPos * root.travelScale;
+		function onWheel(event: WheelEvent): void {
+			root.animating = true;
+			root._updatingFromUser = true;
+			let newPos = root.nonAnimPosition;
+			if (event.angleDelta.y > 0)
+				newPos = Math.max(0, root.nonAnimPosition - 0.1);
+			else if (event.angleDelta.y < 0)
+				newPos = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
 		}
 
 		anchors.fill: parent
-		cursorShape: undefined
-		hoverEnabled: true
 		preventStealing: true
 
 		onPositionChanged: event => {
-			if (pressed)
-				updateFromEvent(event);
+			root._updatingFromUser = true;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
 		}
 		onPressed: event => {
-			var currentTop = visualThumbTop();
-			var currentBottom = currentTop + root.effectiveSize;
-			var clickPos = event.y / root.height;
-
-			var clickedInsideThumb = clickPos >= currentTop && clickPos <= currentBottom;
-
-			if (clickedInsideThumb) {
-				pressOffset = clickPos - currentTop;
-			} else {
-				pressOffset = root.effectiveSize / 2;
+			root.animating = true;
+			root._updatingFromUser = true;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
 			}
-
-			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

@@ -1,201 +1,47 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Templates
-import ZShell.Components
-import ZShell
-import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	property bool animateWave
-	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.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 string insetIcon: ""
-	property real pos: visualPosition
-	property int radius: Appearance.rounding.small
-	property int waveDuration: 1000
-	property real waveFrequency: 6
-	property bool wavy
-
-	signal interaction(v: real)
-
-	implicitHeight: 12
-	implicitWidth: 200
-
-	contentItem: Item {
-		anchors.fill: parent
+	property color color: DynamicColors.palette.m3primary
 
+	background: Item {
 		CustomRect {
-			id: remaining
-
-			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.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
-		}
-
-		CustomRect {
-			anchors.right: parent.right
-			anchors.rightMargin: 4 * remaining.opacity
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: 4 * remaining.opacity
-			implicitWidth: implicitHeight
-			opacity: remaining.opacity
-			radius: Appearance.rounding.full
-		}
-
-		CustomRect {
-			id: handle
-
-			anchors.left: filled.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: {
-				const t = ZUtils.clamp((parent.height - 12) / 16, 0, 1);
-				const lerp = (a, b) => a + (b - a) * t;
-				return parent.height * (mouse.pressed ? lerp(3.5, 1.5) : lerp(3, 1.2));
-			}
-			implicitWidth: 4
-			radius: Appearance.rounding.full
-
-			Behavior on implicitHeight {
-				Anim {
-					type: Anim.FastSpatial
-				}
-			}
-		}
-
-		Loader {
-			id: filled
-
-			anchors.left: parent.left
-			anchors.verticalCenter: parent.verticalCenter
-			asynchronous: true
-			sourceComponent: root.wavy ? waveComp : lineComp
-		}
-
-		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
-			property real dockT: attached ? 1 : 0
-
 			anchors.bottom: parent.bottom
+			anchors.left: parent.left
 			anchors.top: parent.top
-			color: root.insetColor
-			font.pixelSize: Appearance.font.size.smaller * 2
-			text: root.insetIcon
-			verticalAlignment: Text.AlignVCenter
-			visible: !root.wavy && root.insetIcon !== ""
-			x: Appearance.spacing.extraSmall + dockT * (handle.x + Appearance.spacing.small)
-
-			Behavior on dockT {
-				Anim {
-				}
-			}
+			bottomRightRadius: root.implicitHeight / 6
+			color: root.color
+			implicitWidth: root.handle.x - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topRightRadius: root.implicitHeight / 6
 		}
 
-		Component {
-			id: lineComp
-
-			CustomRect {
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
-				color: root.fgColor
-				implicitHeight: root.height
-				implicitWidth: root.filledWidth
-				radius: root.radius
-				topRightRadius: Appearance.rounding.extraSmall / 2
-			}
-		}
-
-		Component {
-			id: waveComp
-
-			WavyLine {
-				color: root.fgColor
-				frequency: root.waveFrequency
-				fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
-				implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
-				implicitWidth: root.filledWidth
-				lineWidth: root.height * 0.7
-				startX: x
-
-				Behavior on color {
-					CAnim {
-					}
-				}
-				Anim on waveProgress {
-					duration: root.waveDuration
-					easing.type: Easing.Linear
-					from: 0
-					loops: Animation.Infinite
-					paused: !root.animateWave
-					running: true
-					to: 1
-				}
-			}
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.top: parent.top
+			bottomLeftRadius: root.implicitHeight / 6
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topLeftRadius: root.implicitHeight / 6
 		}
 	}
-	Behavior on filledWidth {
-		id: widthBehavior
-
-		Anim {
-		}
-	}
-
-	Component.onCompleted: {
-		filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos);
-	}
-
-	Binding {
-		id: posBinding
-
-		property: "pos"
-		target: root
-		value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
-		when: mouse.pressed
-	}
-
-	MouseArea {
-		id: mouse
-
-		property real dragMovement
-		property real pressStartPos
-		property real pressStartX
-
-		anchors.left: parent.left
-		anchors.right: parent.right
+	handle: CustomRect {
 		anchors.verticalCenter: parent.verticalCenter
-		implicitHeight: handle.implicitHeight
-		preventStealing: true
+		color: root.color
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: Appearance.rounding.full
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		onPositionChanged: e => {
-			dragMovement = (e.x - pressStartX) / width;
-			root.interaction(posBinding.value);
-		}
-		onPressed: e => {
-			widthBehavior.enabled = false;
-			pressStartX = e.x;
-			pressStartPos = root.visualPosition;
-		}
-		onReleased: e => {
-			root.interaction(posBinding.value);
-			widthBehavior.enabled = true;
-			dragMovement = 0;
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
 		}
 	}
 }

Components/CustomSpinBox.qml

@@ -1,132 +1,169 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
-import QtQuick.Templates
+import QtQuick.Layouts
 import qs.Config
 
-DoubleSpinBox {
+RowLayout {
 	id: root
 
-	property int cLayer: 1
-	property int repeatDecay: 50
-	property int repeatRate: 400
+	property string displayText: root.value.toString()
+	property bool isEditing: false
+	property real max: Infinity
+	property real min: -Infinity
+	property alias repeatRate: timer.interval
+	property real step: 1
+	property real value
 
-	function decrease(): void {
-		let newValue = Math.max(from, value - stepSize);
-		const decimals = stepSize < 1 ? Math.max(1, Math.ceil(-Math.log10(stepSize))) : 0;
-		newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
-		value = newValue;
-		valueModified();
-	}
+	signal valueModified(value: real)
 
-	function increase(): void {
-		let newValue = Math.min(to, value + stepSize);
-		const decimals = stepSize < 1 ? Math.max(1, Math.ceil(-Math.log10(stepSize))) : 0;
-		newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
-		value = newValue;
-		valueModified();
-	}
-
-	decimals: stepSize < 1 ? Math.max(1, Math.ceil(-Math.log10(stepSize))) : 0
-	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
-	rightPadding: down.indicator.implicitWidth + Appearance.spacing.extraSmall / 2
 	spacing: Appearance.spacing.small
 
-	contentItem: TextFieldBase {
-		horizontalAlignment: TextField.AlignHCenter
-		implicitWidth: 65
+	onValueChanged: {
+		if (!root.isEditing) {
+			root.displayText = root.value.toString();
+		}
+	}
+
+	CustomTextField {
+		id: textField
+
+		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Appearance.padding.larger
-		readOnly: !root.editable
-		rightPadding: Appearance.padding.larger
-		text: root.textFromValue(root.value, root.locale)
-		validator: root.validator
+		leftPadding: Appearance.padding.normal
+		padding: Appearance.padding.small
+		rightPadding: Appearance.padding.normal
+		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-			radius: Appearance.rounding.extraSmall
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			implicitWidth: 100
+			radius: Appearance.rounding.full
+		}
+		validator: DoubleValidator {
+			bottom: root.min
+			decimals: root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0
+			top: root.max
+		}
+
+		onAccepted: {
+			const numValue = parseFloat(text);
+			if (!isNaN(numValue)) {
+				const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
+				root.value = clampedValue;
+				root.displayText = clampedValue.toString();
+				root.valueModified(clampedValue);
+			} else {
+				text = root.displayText;
+			}
+			root.isEditing = false;
+		}
+		onActiveFocusChanged: {
+			if (activeFocus) {
+				root.isEditing = true;
+			} else {
+				root.isEditing = false;
+				root.displayText = root.value.toString();
+			}
+		}
+		onEditingFinished: {
+			if (text !== root.displayText) {
+				const numValue = parseFloat(text);
+				if (!isNaN(numValue)) {
+					const clampedValue = Math.max(root.min, Math.min(root.max, numValue));
+					root.value = clampedValue;
+					root.displayText = clampedValue.toString();
+					root.valueModified(clampedValue);
+				} else {
+					text = root.displayText;
+				}
+			}
+			root.isEditing = false;
 		}
 	}
-	down.indicator: IconButton {
-		id: downButton
 
-		bottomRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
-		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
-		icon: "remove"
-		isRound: true
-		label.anchors.horizontalCenterOffset: pressed ? 0 : 2
-		padding: Appearance.padding.extraSmall
-		topRightRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
-		type: IconButton.Text
-
-		Behavior on bottomRightRadius {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on label.anchors.horizontalCenterOffset {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on topRightRadius {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-	}
-	up.indicator: IconButton {
+	CustomRect {
 		id: upButton
 
-		anchors.right: parent.right
-		bottomLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
-		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		disabledColor: Qt.alpha(DynamicColors.palette.m3surfaceContainerHighest, 0.4)
-		icon: "add"
-		isRound: true
-		label.anchors.horizontalCenterOffset: pressed ? 0 : -2
-		padding: Appearance.padding.extraSmall
-		topLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
-		type: IconButton.Text
+		color: DynamicColors.palette.m3primary
+		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
+		implicitWidth: implicitHeight
+		radius: Appearance.rounding.full
 
-		Behavior on bottomLeftRadius {
-			Anim {
-				type: Anim.DefaultEffects
+		StateLayer {
+			id: upState
+
+			function onClicked(): void {
+				let newValue = Math.min(root.max, root.value + root.step);
+				// Round to avoid floating point precision errors
+				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
+				newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+				root.value = newValue;
+				root.displayText = newValue.toString();
+				root.valueModified(newValue);
 			}
+
+			color: DynamicColors.palette.m3onPrimary
+
+			onPressAndHold: timer.start()
+			onReleased: timer.stop()
 		}
-		Behavior on label.anchors.horizontalCenterOffset {
-			Anim {
-				type: Anim.DefaultEffects
-			}
+
+		MaterialIcon {
+			id: upIcon
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3onPrimary
+			text: "keyboard_arrow_up"
 		}
-		Behavior on topLeftRadius {
-			Anim {
-				type: Anim.DefaultEffects
+	}
+
+	CustomRect {
+		color: DynamicColors.palette.m3primary
+		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
+		implicitWidth: implicitHeight
+		radius: Appearance.rounding.full
+
+		StateLayer {
+			id: downState
+
+			function onClicked(): void {
+				let newValue = Math.max(root.min, root.value - root.step);
+				// Round to avoid floating point precision errors
+				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
+				newValue = Math.round(newValue * Math.pow(10, decimals)) / Math.pow(10, decimals);
+				root.value = newValue;
+				root.displayText = newValue.toString();
+				root.valueModified(newValue);
 			}
+
+			color: DynamicColors.palette.m3onPrimary
+
+			onPressAndHold: timer.start()
+			onReleased: timer.stop()
+		}
+
+		MaterialIcon {
+			id: downIcon
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3onPrimary
+			text: "keyboard_arrow_down"
 		}
 	}
 
 	Timer {
 		id: timer
 
-		interval: root.repeatRate
+		interval: 100
 		repeat: true
-		running: upButton.pressed || downButton.pressed
 		triggeredOnStart: true
 
-		onRunningChanged: {
-			if (!running)
-				interval = root.repeatRate;
-		}
 		onTriggered: {
-			if (upButton.pressed)
-				root.increase();
-			else if (downButton.pressed)
-				root.decrease();
-			if (interval > root.repeatDecay)
-				interval -= root.repeatDecay;
+			if (upState.pressed)
+				upState.onClicked();
+			else if (downState.pressed)
+				downState.onClicked();
 		}
 	}
 }

Components/CustomSplitButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Config
+import qs.Helpers
 
 Row {
 	id: root
@@ -12,44 +13,65 @@ Row {
 
 	property alias active: menu.active
 	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property bool disabled
 	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
 	property color disabledTextColor: Qt.alpha(DynamicColors.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
-	readonly property alias iconLabel: iconLabel
-	readonly property alias label: label
-	readonly property alias menu: menu
+	property real horizontalPadding: Appearance.padding.normal
+	property alias iconLabel: iconLabel
+	property alias label: label
+	property alias menu: menu
 	property alias menuItems: menu.items
 	property bool menuOnTop
-	property real minLeftWidth
-	readonly property alias stateLayer: stateLayer
+	property alias stateLayer: stateLayer
 	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
-	readonly property alias textRow: textRow
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.small
+	property real verticalPadding: Appearance.padding.smaller
 
-	spacing: Math.floor(Appearance.spacing.extraSmall)
+	function closeDropdown(): void {
+		SettingsDropdowns.close(menu);
+	}
+
+	function openDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.open(menu, root);
+	}
+
+	function toggleDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.toggle(menu, root);
+	}
+
+	spacing: Math.floor(Appearance.spacing.small / 2)
+
+	onExpandedChanged: {
+		if (!expanded)
+			SettingsDropdowns.forget(menu);
+	}
 
 	CustomRect {
 		bottomRightRadius: Appearance.rounding.small / 2
-		color: !root.enabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColor : root.color
 		implicitHeight: expandBtn.implicitHeight
-		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
+		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
 		topRightRadius: Appearance.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
 
-			bottomRightRadius: parent.bottomRightRadius
-			color: root.textColor
-			enabled: root.enabled
-			topRightRadius: parent.topRightRadius
+			function onClicked(): void {
+				root.active?.clicked();
+			}
 
-			onClicked: root.active?.clicked()
+			color: root.textColor
+			disabled: root.disabled
+			rect.bottomRightRadius: parent.bottomRightRadius
+			rect.topRightRadius: parent.topRightRadius
 		}
 
 		RowLayout {
@@ -64,7 +86,7 @@ Row {
 
 				Layout.alignment: Qt.AlignVCenter
 				animate: true
-				color: !root.enabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColor : root.textColor
 				fill: 1
 				text: root.active?.activeIcon ?? root.fallbackIcon
 			}
@@ -76,12 +98,12 @@ Row {
 				Layout.preferredWidth: implicitWidth
 				animate: true
 				clip: true
-				color: !root.enabled ? root.disabledTextColor : root.textColor
+				color: root.disabled ? root.disabledTextColor : root.textColor
 				text: root.active?.activeText ?? root.fallbackText
 
 				Behavior on Layout.preferredWidth {
 					Anim {
-						type: Anim.Emphasized
+						easing.bezierCurve: Appearance.anim.curves.emphasized
 					}
 				}
 			}
@@ -94,7 +116,7 @@ Row {
 		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
 
 		bottomLeftRadius: rad
-		color: !root.enabled ? root.disabledColor : root.color
+		color: root.disabled ? root.disabledColor : root.color
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -108,12 +130,14 @@ Row {
 		StateLayer {
 			id: expandStateLayer
 
+			function onClicked(): void {
+				root.toggleDropdown();
+			}
+
 			color: root.textColor
-			enabled: root.enabled
+			disabled: root.disabled
 			rect.bottomLeftRadius: parent.bottomLeftRadius
 			rect.topLeftRadius: parent.topLeftRadius
-
-			onClicked: root.expanded = !root.expanded
 		}
 
 		MaterialIcon {
@@ -121,7 +145,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: !root.enabled ? root.disabledTextColor : root.textColor
+			color: root.disabled ? root.disabledTextColor : root.textColor
 			rotation: root.expanded ? 180 : 0
 			text: "expand_more"
 
@@ -134,14 +158,24 @@ Row {
 				}
 			}
 		}
-	}
 
-	Menu {
-		id: menu
+		Menu {
+			id: menu
 
-		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
-		attachTo: expandBtn
-		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
-		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.right: parent.right
+			anchors.top: parent.bottom
+			anchors.topMargin: Appearance.spacing.small
+
+			states: State {
+				when: root.menuOnTop
+
+				AnchorChanges {
+					anchors.bottom: expandBtn.top
+					anchors.top: undefined
+					target: menu
+				}
+			}
+		}
 	}
 }

Components/CustomSplitButtonRow.qml

@@ -9,6 +9,7 @@ Item {
 
 	property alias active: splitButton.active
 	property alias buttonAlias: splitButton
+	property bool enabled: true
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
@@ -24,7 +25,7 @@ Item {
 	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
 	opacity: shouldBeActive ? 1 : 0
 	scale: shouldBeActive ? 1 : 0.8
-	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+	z: root.expanded ? expandedZ : -1
 
 	Behavior on opacity {
 		Anim {
@@ -49,6 +50,7 @@ Item {
 			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
 			font.pointSize: Appearance.font.size.larger
 			text: root.label
+			z: root.expanded ? root.expandedZ : -1
 		}
 
 		CustomSplitButton {
@@ -56,13 +58,14 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: 2
+			z: root.expanded ? root.expandedZ : -1
 
 			menu.onItemSelected: item => {
 				root.selected(item);
+				splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.expanded = !splitButton.expanded;
+				splitButton.toggleDropdown();
 			}
 		}
 	}

Components/CustomSwitch.qml

@@ -1,6 +1,6 @@
 import QtQuick
-import QtQuick.Shapes
 import QtQuick.Templates
+import QtQuick.Shapes
 import qs.Config
 
 Switch {
@@ -12,41 +12,38 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
+		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		implicitHeight: 13 + 7 * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Appearance.rounding.full
 
 		CustomRect {
-			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
+			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
+			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			implicitHeight: parent.implicitHeight - 10
 			implicitWidth: nonAnimWidth
 			radius: Appearance.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
 
 			Behavior on implicitWidth {
 				Anim {
-					type: Anim.FastSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
-					type: Anim.FastSpatial
 				}
 			}
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
 				Behavior on opacity {
 					Anim {
-						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -66,14 +63,14 @@ Switch {
 				}
 				property point end2: {
 					if (root.pressed)
-						return Qt.point(width * 0.8, height / 2);
+						return Qt.point(width, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.85, height * 0.2);
 					return Qt.point(width * 0.85, height * 0.15);
 				}
 				property point start1: {
 					if (root.pressed)
-						return Qt.point(width * 0.2, height / 2);
+						return Qt.point(width * 0.1, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.15, height / 2);
 					return Qt.point(width * 0.15, height * 0.15);
@@ -91,7 +88,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.larger
+				height: parent.implicitHeight - Appearance.padding.small * 2
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -113,11 +110,11 @@ Switch {
 				}
 
 				ShapePath {
-					capStyle: ShapePath.RoundCap
+					capStyle: Appearance.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: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
 					strokeWidth: Appearance.font.size.larger * 0.15
 
 					Behavior on strokeColor {
@@ -151,7 +148,8 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: Appearance.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+		duration: MaterialEasing.expressiveEffectsTime
+		easing.bezierCurve: MaterialEasing.expressiveEffects
+		easing.type: Easing.BezierSpline
 	}
 }

Components/CustomText.qml

@@ -27,25 +27,24 @@ Text {
 		enabled: root.animate
 
 		SequentialAnimation {
-			TAnim {
-				target: root
+			Anim {
+				easing.bezierCurve: MaterialEasing.standardAccel
 				to: root.animateFrom
-				type: Anim.FastEffects
 			}
 
 			PropertyAction {
 			}
 
-			TAnim {
-				target: root
+			Anim {
+				easing.bezierCurve: MaterialEasing.standardDecel
 				to: root.animateTo
-				type: Anim.DefaultEffects
 			}
 		}
 	}
 
-	component TAnim: Anim {
+	component Anim: NumberAnimation {
 		duration: root.animateDuration / 2
+		easing.type: Easing.BezierSpline
 		properties: root.animateProp.split(",").length > 1 ? root.animateProp : ""
 		property: root.animateProp.split(",").length === 1 ? root.animateProp : ""
 		target: root

Components/CustomTextField.qml

@@ -1,295 +1,75 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Shapes
+import QtQuick.Controls
 import qs.Config
 
-TextFieldBase {
+TextField {
 	id: root
 
-	enum TextFieldType {
-		Outlined,
-		Filled
-	}
+	background: null
+	color: DynamicColors.palette.m3onSurface
+	cursorVisible: !readOnly
+	font.family: Appearance.font.family.sans
+	font.pointSize: Appearance.font.size.smaller
+	placeholderTextColor: DynamicColors.palette.m3outline
+	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 
-	readonly property int clampedRadius: Math.min(horizontalPadding, Math.min(width, height) / 2, radius)
-	readonly property string effectiveSupportingText: isError && errorText ? errorText : supportingText
-	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
-	leftPadding: horizontalPadding + leadingOffset
-	rightPadding: horizontalPadding + trailingOffset
-	topPadding: Appearance.padding.large + filledOffset
-
-	background: Loader {
-		anchors.bottomMargin: root.supportingTextOffset
-		anchors.fill: parent
-		sourceComponent: root.type === CustomTextField.Filled ? filledComp : outlineComp
-
-		StateLayer {
-			id: stateLayer
-
-			cursorShape: Qt.IBeamCursor
-			enabled: !root.activeFocus
-			manualPressOverride: tapHandler.pressed
-			radius: root.type === CustomTextField.Outlined ? root.clampedRadius : 0
-			topLeftRadius: root.clampedRadius
-			topRightRadius: root.clampedRadius
-
-			onClicked: root.focus = true
-		}
-	}
-	Behavior on outlineGapScale {
-		Anim {
-			type: Anim.DefaultEffects
+	Behavior on color {
+		CAnim {
 		}
 	}
+	cursorDelegate: CustomRect {
+		id: cursor
 
-	onEditingFinished: {
-		if (!valid)
-			isError = true;
-	}
-	onPressed: {
-		if (stateLayer.enabled)
-			stateLayer.press(stateLayer.mouseX, stateLayer.mouseY);
-	}
-	onTextEdited: {
-		if (isError)
-			isError = false;
-	}
+		property bool disableBlink
 
-	Item {
-		id: contentWrapper
+		color: DynamicColors.palette.m3primary
+		implicitWidth: 2
+		radius: Appearance.rounding.normal
 
-		anchors.bottomMargin: root.supportingTextOffset
-		anchors.fill: parent
-
-		CustomText {
-			id: placeholder
-
-			anchors.left: parent.left
-			anchors.leftMargin: root.leftPadding
-			anchors.topMargin: Appearance.padding.extraSmall
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : root.text ? DynamicColors.palette.m3outline : root.placeholderTextColor)
-			font.family: root.font.family
-			font.pointSize: root.font.pointSize
-			font.variableAxes: root.font.variableAxes
-			font.weight: root.font.weight
-			renderType: Text.QtRendering
-			text: root.placeholderText
-
-			states: [
-				State {
-					name: "smallOutlined"
-					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.scale: root.smallFontScale
-					}
-
-					AnchorChanges {
-						anchors.verticalCenter: contentWrapper.top
-						target: placeholder
-					}
-				},
-				State {
-					name: "smallFilled"
-					when: root.type === CustomTextField.Filled && (root.activeFocus || root.text)
-
-					PropertyChanges {
-						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding + root.leadingOffset
-						placeholder.scale: root.smallFontScale
-					}
-
-					AnchorChanges {
-						anchors.top: contentWrapper.top
-						anchors.verticalCenter: undefined
-						target: placeholder
-					}
-				}
-			]
-			transitions: Transition {
-				Anim {
-					properties: "scale,leftMargin"
-					type: Anim.DefaultEffects
-				}
-
-				AnchorAnim {
-					duration: Appearance.anim.durations.expressiveEffects
-					easing: Appearance.anim.curves.expressiveDefaultEffects
-				}
+		Behavior on opacity {
+			Anim {
+				duration: Appearance.anim.durations.small
 			}
 		}
 
-		Loader {
-			id: leadingIconLoader
-
-			active: root.leadingIcon
-			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.larger
-			anchors.verticalCenter: parent.verticalCenter
-
-			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
-				text: root.leadingIcon
-			}
-		}
-
-		Loader {
-			id: trailingIconLoader
-
-			active: root.trailingIcon
-			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.larger
-			anchors.verticalCenter: parent.verticalCenter
-
-			sourceComponent: MaterialIcon {
-				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
-				text: root.trailingIcon
-			}
-		}
-	}
-
-	Loader {
-		id: supportingTextLoader
-
-		active: root.effectiveSupportingText
-		anchors.bottom: parent.bottom
-		anchors.left: parent.left
-		anchors.leftMargin: root.horizontalPadding
-
-		sourceComponent: CustomText {
-			color: root.isError ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.small
-			text: root.effectiveSupportingText
-		}
-	}
-
-	TapHandler {
-		id: tapHandler
-	}
-
-	Component {
-		id: outlineComp
-
-		Shape {
-			id: bg
-
-			asynchronous: true
-			preferredRendererType: Shape.CurveRenderer
-
-			ShapePath {
-				capStyle: ShapePath.RoundCap
-				fillColor: "transparent"
-				startX: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2 + root.outlineGap * root.outlineGapScale
-				strokeColor: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
-				strokeWidth: root.activeFocus ? 2 : 1
-
-				Behavior on strokeColor {
-					CAnim {
-					}
-				}
-				Behavior on strokeWidth {
-					Anim {
-					}
-				}
-
-				PathLine {
-					x: bg.width - root.clampedRadius
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: bg.width
-					y: root.clampedRadius
-				}
-
-				PathLine {
-					x: bg.width
-					y: bg.height - root.clampedRadius
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: bg.width - root.clampedRadius
-					y: bg.height
-				}
-
-				PathLine {
-					x: root.clampedRadius
-					y: bg.height
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: 0
-					y: bg.height - root.clampedRadius
-				}
-
-				PathLine {
-					x: 0
-					y: root.clampedRadius
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: root.clampedRadius
-					y: 0
-				}
-
-				PathLine {
-					x: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2
+		Connections {
+			function onCursorPositionChanged(): void {
+				if (root.activeFocus && root.cursorVisible) {
+					cursor.opacity = 1;
+					cursor.disableBlink = true;
+					enableBlink.restart();
 				}
 			}
+
+			target: root
+		}
+
+		Timer {
+			id: enableBlink
+
+			interval: 100
+
+			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
 		}
 	}
-
-	Component {
-		id: filledComp
-
-		CustomRect {
-			color: root.activeFocus ? DynamicColors.tPalette.m3surfaceContainerHighest : DynamicColors.tPalette.m3surfaceContainerHigh
-			topLeftRadius: root.clampedRadius
-			topRightRadius: root.clampedRadius
-
-			CustomRect {
-				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)
-				implicitHeight: root.activeFocus ? 2 : 1
-
-				Behavior on implicitHeight {
-					Anim {
-					}
-				}
-			}
+	Behavior on placeholderTextColor {
+		CAnim {
 		}
 	}
 }

Components/CustomTooltip.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Components
+
+ToolTip {
+	id: root
+
+	property bool alternativeVisibleCondition: false
+	property bool extraVisibleCondition: true
+	readonly property bool internalVisibleCondition: (extraVisibleCondition && (parent.hovered === undefined || parent?.hovered)) || alternativeVisibleCondition
+
+	background: null
+	horizontalPadding: 10
+	verticalPadding: 5
+	visible: internalVisibleCondition
+
+	contentItem: CustomTooltipContent {
+		id: contentItem
+
+		horizontalPadding: root.horizontalPadding
+		shown: root.internalVisibleCondition
+		text: root.text
+		verticalPadding: root.verticalPadding
+	}
+}

Components/CustomTooltipContent.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	property real horizontalPadding: 10
+	property bool isVisible: backgroundRectangle.implicitHeight > 0
+	property bool shown: false
+	required property string text
+	property real verticalPadding: 5
+
+	implicitHeight: tooltipTextObject.implicitHeight + 2 * root.verticalPadding
+	implicitWidth: tooltipTextObject.implicitWidth + 2 * root.horizontalPadding
+
+	Rectangle {
+		id: backgroundRectangle
+
+		clip: true
+		color: DynamicColors.tPalette.m3inverseSurface ?? "#3C4043"
+		implicitHeight: shown ? (tooltipTextObject.implicitHeight + 2 * root.verticalPadding) : 0
+		implicitWidth: shown ? (tooltipTextObject.implicitWidth + 2 * root.horizontalPadding) : 0
+		opacity: shown ? 1 : 0
+		radius: Appearance.rounding.smallest
+
+		Behavior on implicitHeight {
+			Anim {
+			}
+		}
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		anchors {
+			bottom: root.bottom
+			horizontalCenter: root.horizontalCenter
+		}
+
+		CustomText {
+			id: tooltipTextObject
+
+			anchors.centerIn: parent
+			color: DynamicColors.palette.m3inverseOnSurface ?? "#FFFFFF"
+			text: root.text
+			wrapMode: Text.Wrap
+		}
+	}
+}

Components/Elevation.qml

@@ -1,6 +1,6 @@
+import qs.Config
 import QtQuick
 import QtQuick.Effects
-import qs.Config
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
@@ -13,7 +13,6 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
-			type: Anim.SlowEffects
 		}
 	}
 }

Components/ExtraIndicator.qml

@@ -0,0 +1,44 @@
+import qs.Config
+import QtQuick
+
+CustomRect {
+	required property int extra
+
+	anchors.margins: 8
+	anchors.right: parent.right
+	color: DynamicColors.palette.m3tertiary
+	implicitHeight: count.implicitHeight + 4 * 2
+	implicitWidth: count.implicitWidth + 8 * 2
+	opacity: extra > 0 ? 1 : 0
+	radius: Appearance.rounding.smallest
+	scale: extra > 0 ? 1 : 0.5
+
+	Behavior on opacity {
+		Anim {
+			duration: MaterialEasing.expressiveEffectsTime
+		}
+	}
+	Behavior on scale {
+		Anim {
+			duration: MaterialEasing.expressiveEffectsTime
+			easing.bezierCurve: MaterialEasing.expressiveEffects
+		}
+	}
+
+	Elevation {
+		anchors.fill: parent
+		level: 2
+		opacity: parent.opacity
+		radius: parent.radius
+		z: -1
+	}
+
+	CustomText {
+		id: count
+
+		anchors.centerIn: parent
+		animate: parent.opacity > 0
+		color: DynamicColors.palette.m3onTertiary
+		text: qsTr("+%1").arg(parent.extra)
+	}
+}

Components/FadeImage.qml

@@ -1,79 +0,0 @@
-import QtQuick
-import Quickshell
-import qs.Config
-
-Image {
-	id: root
-
-	property int fadeInAnim: Anim.DefaultEffects
-	property int fadeInLargeAnim: Anim.StandardLarge
-	property int fadeOutAnim: Anim.FastEffects
-	property bool fadingOut
-	property bool hadPrevious
-	property bool preventInit
-
-	function maybeStartInAnim(): void {
-		if (!preventInit && !opacityInAnim.running && status === Image.Ready) {
-			opacityInAnim.type = hadPrevious ? fadeInAnim : fadeInLargeAnim;
-			opacityInAnim.start();
-		}
-	}
-
-	asynchronous: true
-	fillMode: Image.PreserveAspectCrop
-	opacity: 0
-	retainWhileLoading: true
-	sourceSize: {
-		const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
-		return Qt.size(width * dpr, height * dpr);
-	}
-
-	Anim on opacity {
-		id: opacityInAnim
-
-		running: false
-		to: 1
-	}
-	Behavior on source {
-		SequentialAnimation {
-			ScriptAction {
-				script: opacityInAnim.stop()
-			}
-
-			PropertyAction {
-				property: "fadingOut"
-				target: root
-				value: true
-			}
-
-			Anim {
-				property: "opacity"
-				target: root
-				to: 0
-				type: root.fadeOutAnim
-			}
-
-			PropertyAction {
-				property: "fadingOut"
-				target: root
-				value: false
-			}
-
-			PropertyAction {
-				property: "hadPrevious"
-				target: root
-				value: root.source
-			}
-
-			PropertyAction {
-			}
-
-			ScriptAction {
-				script: root.maybeStartInAnim()
-			}
-		}
-	}
-
-	onPreventInitChanged: maybeStartInAnim()
-	onStatusChanged: maybeStartInAnim()
-}

Components/IconButton.qml

@@ -1,45 +1,78 @@
-import QtQuick
 import qs.Config
+import QtQuick
 
-ButtonBase {
+CustomRect {
 	id: root
 
-	property alias icon: label.text
-	readonly property alias label: label
-
-	activeColor: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
-	activeOnColor: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
-	implicitHeight: {
-		const h = label.implicitHeight + padding * 2;
-		if (h % 2 !== 0)
-			return h + 1;
-		return h;
+	enum Type {
+		Filled,
+		Tonal,
+		Text
 	}
-	implicitWidth: implicitHeight
-	inactiveColor: {
-		if (!isToggle && type === IconButton.Filled)
+
+	property color activeColour: type === IconButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
+	property color activeOnColour: type === IconButton.Filled ? DynamicColors.palette.m3onPrimary : type === IconButton.Tonal ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3primary
+	property bool checked
+	property bool disabled
+	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledOnColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
+	property alias font: label.font
+	property alias icon: label.text
+	property color inactiveColour: {
+		if (!toggle && type === IconButton.Filled)
 			return DynamicColors.palette.m3primary;
 		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
 	}
-	inactiveOnColor: {
-		if (!isToggle && type === IconButton.Filled)
+	property color inactiveOnColour: {
+		if (!toggle && type === IconButton.Filled)
 			return DynamicColors.palette.m3onPrimary;
 		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
 	}
-	padding: type === IconButton.Text ? Appearance.padding.extraSmall / 2 : Appearance.padding.small
+	property bool internalChecked
+	property alias label: label
+	property real padding: type === IconButton.Text ? 10 / 2 : 7
+	property alias radiusAnim: radiusAnim
+	property alias stateLayer: stateLayer
+	property bool toggle
+	property int type: IconButton.Filled
+
+	signal clicked
+
+	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
+	implicitHeight: label.implicitHeight + padding * 2
+	implicitWidth: implicitHeight
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
+
+	Behavior on radius {
+		Anim {
+			id: radiusAnim
+		}
+	}
+
+	onCheckedChanged: internalChecked = checked
+
+	StateLayer {
+		id: stateLayer
+
+		function onClicked(): void {
+			if (root.toggle)
+				root.internalChecked = !root.internalChecked;
+			root.clicked();
+		}
+
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+	}
 
 	MaterialIcon {
 		id: label
 
 		anchors.centerIn: parent
-		anchors.verticalCenterOffset: 1
-		color: root.onColor
-		fill: !root.isToggle || root.internalChecked ? 1 : 0
-		font.pointSize: root.font.pointSize
+		color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		fill: !root.toggle || root.internalChecked ? 1 : 0
 
 		Behavior on fill {
 			Anim {
-				type: Anim.DefaultEffects
 			}
 		}
 	}

Components/IconTextButton.qml

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

Components/LoadingIndicator.qml

@@ -1,114 +0,0 @@
-import QtQuick
-import Quickshell
-import M3Shapes
-import qs.Config
-
-MaterialShape {
-	id: root
-
-	property bool animated: true
-	property real cRotation
-	property bool containsIcon
-	property real dampingRatio: 0.6
-	property real lRotation
-	property int morphAnimRotation: 60
-	property real morphScale: 0.14
-	property alias rotateAnimDuration: rotateAnim.duration
-	property int shapeIndex
-	property list<int> shapes: {
-		if (containsIcon)
-			return [MaterialShape.SoftBurst, MaterialShape.Cookie9Sided, MaterialShape.Pill, MaterialShape.Sunny, MaterialShape.Cookie4Sided, MaterialShape.Oval];
-		return [MaterialShape.SoftBurst, MaterialShape.Cookie9Sided, MaterialShape.Pentagon, MaterialShape.Pill, MaterialShape.Sunny, MaterialShape.Cookie4Sided, MaterialShape.Oval];
-	}
-	readonly property real springDuration: {
-		const wn = Math.sqrt(stiffness);
-		const r = -dampingRatio * wn;
-		const c = 1 / Math.sqrt(1 - dampingRatio * dampingRatio);
-		return Math.log(visibilityThreshold / c) / r;
-	}
-	readonly property real springMaxVelocity: {
-		const wn = Math.sqrt(stiffness);
-		const factor = Math.exp(-z * Math.acos(z) / Math.sqrt(1 - z * z));
-		return wn * factor;
-	}
-	property bool springSettled: true
-	property real stiffness: 180
-	property real thisLRotation
-	property real visibilityThreshold: 0.075
-
-	function spring(t: real): var {
-		const wn = Math.sqrt(stiffness);
-		const za = dampingRatio * wn;
-
-		const wd = wn * Math.sqrt(1 - dampingRatio * dampingRatio);
-		const r = za / wd;
-		const pos = 1 - Math.exp(-za * t) * (Math.cos(wd * t) + r * Math.sin(wd * t));
-		const vel = Math.exp(-za * t) * (wn * wn / wd) * Math.sin(wd * t);
-
-		return [pos, vel];
-	}
-
-	color: DynamicColors.palette.m3primary
-	implicitSize: 38
-	toShape: shapes[0]
-
-	RotationAnimation on cRotation {
-		id: rotateAnim
-
-		duration: 4666
-		easing.type: Easing.Linear
-		from: 0
-		loops: Animation.Infinite
-		running: root.animated
-		to: 360
-	}
-	Behavior on color {
-		CAnim {
-		}
-	}
-
-	ElapsedTimer {
-		id: timer
-	}
-
-	FrameAnimation {
-		running: root.animated && !root.springSettled
-
-		onTriggered: {
-			const t = timer.elapsed();
-
-			if (t >= root.springDuration) {
-				root.springSettled = true;
-			} else {
-				const [pos, vel] = root.spring(t);
-				root.morphProgress = Math.min(1, pos); // Overshooting the morph looks weird
-				root.thisLRotation = pos * root.morphAnimRotation;
-				root.scale = 1 + vel * root.morphScale / root.springMaxVelocity;
-			}
-		}
-	}
-
-	Timer {
-		interval: 650
-		repeat: true
-		running: root.animated
-		triggeredOnStart: true
-
-		onTriggered: {
-			root.beginBatchUpdate();
-			root.fromShape = root.toShape;
-			root.shapeIndex = (root.shapeIndex + 1) % root.shapes.length;
-			root.toShape = root.shapes[root.shapeIndex];
-			root.morphProgress = 0;
-
-			root.rotation = root.rotation;
-			root.lRotation = (root.lRotation + root.thisLRotation) % 360;
-			root.thisLRotation = 0;
-			root.rotation = Qt.binding(() => root.cRotation + root.lRotation + root.thisLRotation);
-
-			root.springSettled = false;
-			timer.restart();
-			root.endBatchUpdate();
-		}
-	}
-}

Components/MaterialIcon.qml

@@ -1,26 +1,15 @@
 import qs.Config
 
 CustomText {
-	id: root
-
-	readonly property list<int> allowed: [20, 24, 40, 48]
-	property real fill: 0
+	property real fill
 	property int grade: DynamicColors.light ? 0 : -25
-	readonly property int opsz: clampOpsz(optical)
-	property int optical: fontInfo.pixelSize
-
-	function clampOpsz(value): int {
-		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,
+			FILL: fill.toFixed(1),
 			GRAD: grade,
-			opsz: opsz,
+			opsz: fontInfo.pixelSize,
 			wght: fontInfo.weight
 		})
 }

Components/Menu.qml

@@ -2,186 +2,109 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import qs.Config
-import qs.Drawers
 
-MouseArea {
+Elevation {
 	id: root
 
-	enum Side {
-		Top,
-		Bottom,
-		Left,
-		Right
-	}
-
 	property MenuItem active: items[0] ?? null
-	property int attachSideX: Menu.Right
-	property int attachSideY: Menu.Bottom
-	required property Item attachTo
 	property bool expanded
 	property list<MenuItem> items
-	property real marginX
-	property real marginY
-	property int thisSideX: Menu.Right
-	property int thisSideY: Menu.Top
 
 	signal itemSelected(item: MenuItem)
 
-	anchors.fill: parent
-	cursorShape: expanded ? Qt.ArrowCursor : undefined
-	enabled: expanded
-	hoverEnabled: expanded
-	layer.enabled: opacity < 1
-	opacity: expanded ? 1 : 0
-	parent: {
-		const win = QsWindow.window;
-		const contentWin = win as Windows;
-		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-	}
+	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
+	implicitWidth: Math.max(200, column.implicitWidth)
+	level: 2
+	opacity: root.expanded ? 1 : 0
+	radius: Appearance.rounding.normal
 
+	Behavior on implicitHeight {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
 	Behavior on opacity {
 		Anim {
-			type: Anim.DefaultEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
 		}
 	}
 
-	onClicked: expanded = false
-	onExpandedChanged: {
-		const win = QsWindow.window;
-		const contentWin = win as Windows;
-		if (expanded) {
-			contentWin.menuRegion.x = menu.x;
-			contentWin.menuRegion.y = menu.y;
-			contentWin.menuRegion.width = menu.width;
-			contentWin.menuRegion.height = menu.height;
-		} else {
-			contentWin.menuRegion.x = 0;
-			contentWin.menuRegion.y = 0;
-			contentWin.menuRegion.width = 0;
-			contentWin.menuRegion.height = 0;
-		}
-	}
+	CustomClippingRect {
+		anchors.fill: parent
+		color: DynamicColors.palette.m3surfaceContainer
+		radius: parent.radius
 
-	TransformWatcher {
-		id: watcher
+		ColumnLayout {
+			id: column
 
-		a: root.parent
-		b: root.attachTo
-	}
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 5
 
-	Elevation {
-		id: menu
+			Repeater {
+				model: root.items
 
-		implicitHeight: column.implicitHeight + column.anchors.margins * 2
-		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
-		level: 2
-		radius: Appearance.rounding.medium
-		x: {
-			watcher.transform;
-			const item = root.attachTo;
-			let off = root.attachSideX === Menu.Left ? 0 : item.width;
-			if (root.thisSideX === Menu.Right)
-				off -= width;
-			return item.mapToItem(root.parent, off, 0).x + root.marginX;
-		}
-		y: {
-			watcher.transform;
-			const item = root.attachTo;
-			let off = root.attachSideY === Menu.Top ? 0 : item.height;
-			if (root.thisSideY === Menu.Bottom)
-				off -= height;
-			return item.mapToItem(root.parent, 0, off).y + root.marginY;
-		}
+				CustomRect {
+					id: item
 
-		transform: Scale {
-			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
-			yScale: root.expanded ? 1 : 0.1
+					readonly property bool active: modelData === root.active
+					required property int index
+					required property MenuItem modelData
 
-			Behavior on yScale {
-				Anim {
-				}
-			}
-		}
-
-		CustomRect {
-			anchors.fill: parent
-			color: DynamicColors.palette.m3surfaceContainerLow
-			radius: parent.radius
-
-			ColumnLayout {
-				id: column
-
-				anchors.fill: parent
-				anchors.margins: Appearance.padding.extraSmall
-				spacing: Appearance.spacing.extraSmall
-
-				Repeater {
-					id: repeater
-
-					model: root.items
+					Layout.fillWidth: true
+					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
+					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
 
 					CustomRect {
-						id: item
-
-						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)
-						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
-						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
-						radius: Appearance.rounding.small
-
-						Behavior on radius {
-							Anim {
-							}
-						}
+						anchors.fill: parent
+						anchors.leftMargin: Appearance.padding.small
+						anchors.rightMargin: Appearance.padding.small
+						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
+						radius: Appearance.rounding.normal - Appearance.padding.small
 
 						StateLayer {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
-							enabled: root.expanded
-
-							onClicked: {
+							function onClicked(): void {
 								root.itemSelected(item.modelData);
 								root.active = item.modelData;
-								item.modelData.clicked();
 								root.expanded = false;
 							}
+
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+						}
+					}
+
+					RowLayout {
+						id: menuOptionRow
+
+						anchors.fill: parent
+						anchors.margins: Appearance.padding.normal
+						spacing: Appearance.spacing.small
+
+						MaterialIcon {
+							Layout.alignment: Qt.AlignVCenter
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant
+							text: item.modelData.icon
 						}
 
-						RowLayout {
-							id: menuOptionRow
+						CustomText {
+							Layout.alignment: Qt.AlignVCenter
+							Layout.fillWidth: true
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							text: item.modelData.text
+						}
 
-							anchors.fill: parent
-							anchors.margins: Appearance.padding.larger
-							spacing: Appearance.spacing.small
+						Loader {
+							Layout.alignment: Qt.AlignVCenter
+							active: item.modelData.trailingIcon.length > 0
+							visible: active
 
-							MaterialIcon {
-								Layout.alignment: Qt.AlignVCenter
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
-								text: item.modelData.icon
-							}
-
-							CustomText {
-								Layout.alignment: Qt.AlignVCenter
-								Layout.fillWidth: true
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
-								text: item.modelData.text
-							}
-
-							Loader {
-								Layout.alignment: Qt.AlignVCenter
-								active: item.modelData.trailingIcon.length > 0
-								asynchronous: true
-								visible: active
-
-								sourceComponent: MaterialIcon {
-									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
-									text: item.modelData.trailingIcon
-								}
+							sourceComponent: MaterialIcon {
+								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+								text: item.modelData.trailingIcon
 							}
 						}
 					}

Components/PathMenu.qml

@@ -0,0 +1,76 @@
+import QtQuick
+
+Path {
+	id: root
+
+	required property real viewHeight
+	required property real viewWidth
+
+	startX: root.viewWidth / 2
+	startY: 0
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.25
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (1 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.45
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (2 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.70
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (3 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 1.00
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (4 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.70
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight * (5 / 6)
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.45
+	}
+
+	PathLine {
+		x: root.viewWidth / 2
+		y: root.viewHeight
+	}
+
+	PathAttribute {
+		name: "itemOpacity"
+		value: 0.25
+	}
+}

Components/PathViewMenu.qml

@@ -0,0 +1,180 @@
+import QtQuick
+import QtQuick.Effects
+import qs.Config
+
+Elevation {
+	id: root
+
+	required property int currentIndex
+	property bool expanded
+	required property int from
+	property color insideTextColor: DynamicColors.palette.m3onPrimary
+	property int itemHeight
+	property int listHeight: 200
+	property color outsideTextColor: DynamicColors.palette.m3onSurfaceVariant
+	readonly property var spinnerModel: root.range(root.from, root.to)
+	required property int to
+	property Item triggerItem
+
+	signal itemSelected(item: int)
+
+	function range(first, last) {
+		let out = [];
+		for (let i = first; i <= last; ++i)
+			out.push(i);
+		return out;
+	}
+
+	implicitHeight: root.expanded ? view.implicitHeight : 0
+	level: root.expanded ? 2 : 0
+	radius: itemHeight / 2
+	visible: implicitHeight > 0
+	z: root.expanded ? 100 : 0
+
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+
+	onExpandedChanged: {
+		if (!root.expanded)
+			root.itemSelected(view.currentIndex + 1);
+	}
+
+	Component {
+		id: spinnerDelegate
+
+		Item {
+			id: wrapper
+
+			readonly property color delegateTextColor: wrapper.PathView.view ? wrapper.PathView.view.delegateTextColor : "white"
+			required property var modelData
+
+			height: root.itemHeight
+			opacity: wrapper.PathView.itemOpacity
+			visible: wrapper.PathView.onPath
+			width: wrapper.PathView.view ? wrapper.PathView.view.width : 0
+			z: wrapper.PathView.isCurrentItem ? 100 : Math.round(wrapper.PathView.itemScale * 100)
+
+			CustomText {
+				anchors.centerIn: parent
+				color: wrapper.delegateTextColor
+				font.pointSize: Appearance.font.size.large
+				text: wrapper.modelData
+			}
+		}
+	}
+
+	CustomClippingRect {
+		anchors.fill: parent
+		color: DynamicColors.palette.m3surfaceContainer
+		radius: parent.radius
+		z: root.z
+
+		// Main visible spinner: normal/outside text color
+		PathView {
+			id: view
+
+			property color delegateTextColor: root.outsideTextColor
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			clip: true
+			currentIndex: root.currentIndex - 1
+			delegate: spinnerDelegate
+			dragMargin: width
+			highlightRangeMode: PathView.StrictlyEnforceRange
+			implicitHeight: root.listHeight
+			model: root.spinnerModel
+			pathItemCount: 7
+			preferredHighlightBegin: 0.5
+			preferredHighlightEnd: 0.5
+			snapMode: PathView.SnapToItem
+
+			path: PathMenu {
+				viewHeight: view.height
+				viewWidth: view.width
+			}
+		}
+
+		// The selection rectangle itself
+		CustomRect {
+			id: selectionRect
+
+			anchors.verticalCenter: parent.verticalCenter
+			color: DynamicColors.palette.m3primary
+			height: root.itemHeight
+			radius: root.itemHeight / 2
+			width: parent.width
+			z: 2
+		}
+
+		// Hidden source: same PathView, but with the "inside selection" text color
+		Item {
+			id: selectedTextSource
+
+			anchors.fill: parent
+			layer.enabled: true
+			visible: false
+
+			PathView {
+				id: selectedTextView
+
+				property color delegateTextColor: root.insideTextColor
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				clip: true
+				currentIndex: view.currentIndex
+				delegate: spinnerDelegate
+				dragMargin: view.dragMargin
+				highlightRangeMode: view.highlightRangeMode
+				implicitHeight: root.listHeight
+				interactive: false
+				model: view.model
+
+				// Keep this PathView visually locked to the real one
+				offset: view.offset
+				pathItemCount: view.pathItemCount
+				preferredHighlightBegin: view.preferredHighlightBegin
+				preferredHighlightEnd: view.preferredHighlightEnd
+				snapMode: view.snapMode
+
+				path: PathMenu {
+					viewHeight: selectedTextView.height
+					viewWidth: selectedTextView.width
+				}
+			}
+		}
+
+		// Mask matching the selection rectangle
+		Item {
+			id: selectionMask
+
+			anchors.fill: parent
+			layer.enabled: true
+			visible: false
+
+			CustomRect {
+				color: "white"
+				height: selectionRect.height
+				radius: selectionRect.radius
+				width: selectionRect.width
+				x: selectionRect.x
+				y: selectionRect.y
+			}
+		}
+
+		// Only show the "inside selection" text where the mask exists
+		MultiEffect {
+			anchors.fill: selectedTextSource
+			maskEnabled: true
+			maskInverted: false
+			maskSource: selectionMask
+			source: selectedTextSource
+			z: 3
+		}
+	}
+}

Components/SearchBar.qml

@@ -1,94 +0,0 @@
-import QtQuick
-import qs.Config
-
-TextFieldBase {
-	id: root
-
-	readonly property alias bg: bg
-	readonly property alias clearIcon: clearIcon
-	readonly property alias searchIcon: searchIcon
-
-	bottomPadding: Appearance.padding.large
-	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Appearance.spacing.small
-	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Appearance.spacing.small
-	topPadding: Appearance.padding.large
-
-	background: CustomRect {
-		id: bg
-
-		anchors.fill: parent
-		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: Appearance.rounding.full
-
-		StateLayer {
-			id: stateLayer
-
-			cursorShape: Qt.IBeamCursor
-			enabled: !root.activeFocus
-			manualPressOverride: tapHandler.pressed
-
-			onClicked: root.focus = true
-		}
-	}
-
-	onPressed: {
-		if (stateLayer.enabled)
-			stateLayer.press(stateLayer.mouseX, stateLayer.mouseY);
-	}
-
-	CustomText {
-		id: placeholder
-
-		anchors.left: parent.left
-		anchors.leftMargin: root.leftPadding
-		anchors.verticalCenter: parent.verticalCenter
-		color: root.placeholderTextColor
-		font: root.font
-		opacity: root.text ? 0 : 1
-		text: root.placeholderText
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-	}
-
-	MaterialIcon {
-		id: searchIcon
-
-		anchors.left: parent.left
-		anchors.leftMargin: Appearance.padding.large
-		anchors.verticalCenter: parent.verticalCenter
-		color: DynamicColors.palette.m3onSurfaceVariant
-		font.pointSize: Appearance.font.size.large
-		text: "search"
-	}
-
-	IconButton {
-		id: clearIcon
-
-		anchors.right: parent.right
-		anchors.rightMargin: Appearance.padding.larger
-		anchors.verticalCenter: parent.verticalCenter
-		enabled: root.text
-		icon: "clear"
-		opacity: root.text ? 1 : 0
-		radius: Appearance.rounding.full
-		radiusMorph: false
-		stateLayer.hoverEnabled: enabled
-		type: IconButton.Text
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-
-		onClicked: root.clear()
-	}
-
-	TapHandler {
-		id: tapHandler
-	}
-}

Components/SpinBoxRow.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+
+CustomRect {
+	id: root
+
+	required property string label
+	required property real max
+	required property real min
+	property var onValueModified: function (value) {}
+	property real step: 1
+	required property real value
+
+	Layout.fillWidth: true
+	color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
+	implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+	radius: Appearance.rounding.normal
+
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.large
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.normal
+
+		CustomText {
+			Layout.fillWidth: true
+			text: root.label
+		}
+
+		CustomSpinBox {
+			max: root.max
+			min: root.min
+			step: root.step
+			value: root.value
+
+			onValueModified: value => {
+				root.onValueModified(value);
+			}
+		}
+	}
+}

Components/StateLayer.qml

@@ -1,199 +1,95 @@
-import QtQuick
-import QtQuick.Shapes
-import ZShell
-import ZShell.Components
-import qs.Helpers
 import qs.Config
+import QtQuick
 
 MouseArea {
 	id: root
 
-	property alias bottomLeftRadius: base.bottomLeftRadius
-	property alias bottomRightRadius: base.bottomRightRadius
-	property real circleRadius
-	property alias color: base.color
-	readonly property real endRadius: {
-		const d1 = distSq(0, 0);
-		const d2 = distSq(width, 0);
-		const d3 = distSq(0, height);
-		const d4 = distSq(width, height);
-		return (Math.sqrt(Math.max(d1, d2, d3, d4)) + (shapeMorph ? 24 : 0)) * 1.3;
-	}
-	property real endRadiusAtPress
-	property bool manualHoverOverride
-	property bool manualPressOverride
-	property real pressX: width / 2
-	property real pressY: height / 2
-	property alias radius: base.radius
-	readonly property alias rect: base
-	property bool shapeMorph
-	property bool showHoverBackground: true
-	property real stateOpacity: containsMouse || manualHoverOverride ? 0.08 : 0
-	property alias topLeftRadius: base.topLeftRadius
-	property alias topRightRadius: base.topRightRadius
+	property color color: DynamicColors.palette.m3onSurface
+	property bool disabled
+	property real radius: parent?.radius ?? 0
+	property alias rect: hoverLayer
 
-	function clamp(r: real): real {
-		return Math.max(0, Math.min(r, width / 2, height / 2));
-	}
-
-	function distSq(x: real, y: real): real {
-		return (pressX - x) ** 2 + (pressY - y) ** 2;
-	}
-
-	function press(x: real, y: real): void {
-		pressX = x;
-		pressY = y;
-		fadeAnim.complete();
-		circleRadius = 0;
-		circle.opacity = 0.1;
-		rippleAnim.restart();
-		endRadiusAtPress = endRadius;
+	function onClicked(): void {
 	}
 
 	anchors.fill: parent
-	cursorShape: !enabled ? undefined : Qt.PointingHandCursor
-	enabled: parent.enabled && !Visibilities.getForActive()?.isDrawing
+	cursorShape: disabled ? undefined : Qt.PointingHandCursor
+	enabled: !disabled
 	hoverEnabled: true
 
-	Behavior on stateOpacity {
+	onClicked: event => !disabled && onClicked(event)
+	onPressed: event => {
+		if (disabled)
+			return;
+
+		rippleAnim.x = event.x;
+		rippleAnim.y = event.y;
+
+		const dist = (ox, oy) => ox * ox + oy * oy;
+		rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
+
+		rippleAnim.restart();
+	}
+
+	SequentialAnimation {
+		id: rippleAnim
+
+		property real radius
+		property real x
+		property real y
+
+		PropertyAction {
+			property: "x"
+			target: ripple
+			value: rippleAnim.x
+		}
+
+		PropertyAction {
+			property: "y"
+			target: ripple
+			value: rippleAnim.y
+		}
+
+		PropertyAction {
+			property: "opacity"
+			target: ripple
+			value: 0.08
+		}
+
 		Anim {
-			type: Anim.DefaultEffects
+			easing.bezierCurve: MaterialEasing.standardDecel
+			from: 0
+			properties: "implicitWidth,implicitHeight"
+			target: ripple
+			to: rippleAnim.radius * 2
+		}
+
+		Anim {
+			property: "opacity"
+			target: ripple
+			to: 0
 		}
 	}
 
-	onCircleRadiusChanged: {
-		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
-			fadeAnim.start();
-	}
-	onManualPressOverrideChanged: {
-		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
-			fadeAnim.start();
-	}
-	onPressed: e => press(e.x, e.y)
-	onPressedChanged: {
-		if (!(pressed || manualPressOverride) && !rippleAnim.running && circle.opacity > 0)
-			fadeAnim.start();
-	}
-
-	Anim {
-		id: rippleAnim
-
-		alwaysRunToEnd: true
-		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		easing.bezierCurve: Appearance.anim.curves.standard
-		property: "circleRadius"
-		target: root
-		to: root.endRadius
-	}
-
-	Anim {
-		id: fadeAnim
-
-		property: "opacity"
-		target: circle
-		to: 0
-		type: Anim.SlowEffects
-	}
-
-	CustomRect {
-		id: base
+	CustomClippingRect {
+		id: hoverLayer
 
 		anchors.fill: parent
-		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
-		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
-		topLeftRadius: root.parent?.topLeftRadius ?? radius ?? 0
-		topRightRadius: root.parent?.topRightRadius ?? radius ?? 0
-		// qmllint enable missing-property
-	}
+		border.pixelAligned: false
+		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+		radius: root.radius
 
-	Shape {
-		id: circle
+		CustomRect {
+			id: ripple
 
-		anchors.fill: parent
-		opacity: 0
-		preferredRendererType: Shape.CurveRenderer
+			border.pixelAligned: false
+			color: root.color
+			opacity: 0
+			radius: Appearance.rounding.full
 
-		ShapePath {
-			fillColor: base.color
-			startX: root.clamp(base.topLeftRadius)
-			startY: 0
-			strokeColor: "transparent"
-			strokeWidth: 0
-
-			fillGradient: RadialGradient {
-				centerRadius: root.circleRadius
-				centerX: root.pressX
-				centerY: root.pressY
-				focalX: centerX
-				focalY: centerY
-
-				GradientStop {
-					color: Qt.alpha(base.color, 1)
-					position: 0
-				}
-
-				GradientStop {
-					color: Qt.alpha(base.color, 1)
-					position: ZUtils.clamp(1 - 0.2 * root.endRadius / root.circleRadius, 0.01, 0.99)
-				}
-
-				GradientStop {
-					color: Qt.alpha(base.color, ZUtils.clamp((root.circleRadius / root.endRadius - 0.9) / 0.1, 0, 1))
-					position: 1
-				}
-			}
-
-			PathLine {
-				x: root.width - root.clamp(base.topRightRadius)
-				y: 0
-			}
-
-			PathArc {
-				radiusX: root.clamp(base.topRightRadius)
-				radiusY: root.clamp(base.topRightRadius)
-				relativeX: root.clamp(base.topRightRadius)
-				relativeY: root.clamp(base.topRightRadius)
-			}
-
-			PathLine {
-				x: root.width
-				y: root.height - root.clamp(base.bottomRightRadius)
-			}
-
-			PathArc {
-				radiusX: root.clamp(base.bottomRightRadius)
-				radiusY: root.clamp(base.bottomRightRadius)
-				relativeX: -root.clamp(base.bottomRightRadius)
-				relativeY: root.clamp(base.bottomRightRadius)
-			}
-
-			PathLine {
-				x: root.clamp(base.bottomLeftRadius)
-				y: root.height
-			}
-
-			PathArc {
-				radiusX: root.clamp(base.bottomLeftRadius)
-				radiusY: root.clamp(base.bottomLeftRadius)
-				relativeX: -root.clamp(base.bottomLeftRadius)
-				relativeY: -root.clamp(base.bottomLeftRadius)
-			}
-
-			PathLine {
-				x: 0
-				y: root.clamp(base.topLeftRadius)
-			}
-
-			PathArc {
-				radiusX: root.clamp(base.topLeftRadius)
-				radiusY: root.clamp(base.topLeftRadius)
-				x: root.clamp(base.topLeftRadius)
-				y: 0
+			transform: Translate {
+				x: -ripple.width / 2
+				y: -ripple.height / 2
 			}
 		}
 	}

Components/TextButton.qml

@@ -1,40 +0,0 @@
-import QtQuick
-import qs.Config
-
-ButtonBase {
-	id: root
-
-	readonly property alias label: label
-	property alias text: label.text
-
-	activeColor: type === TextButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondary
-	activeOnColor: {
-		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondary;
-	}
-	horizontalPadding: Appearance.padding.normal
-	implicitHeight: label.implicitHeight + verticalPadding * 2
-	implicitWidth: label.implicitWidth + horizontalPadding * 2
-	inactiveColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
-	}
-	inactiveOnColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return DynamicColors.palette.m3onPrimary;
-		if (type === TextButton.Text)
-			return DynamicColors.palette.m3primary;
-		return type === TextButton.Filled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSecondaryContainer;
-	}
-	verticalPadding: Appearance.padding.small
-
-	CustomText {
-		id: label
-
-		anchors.centerIn: parent
-		color: root.onColor
-		font: root.font
-	}
-}

Components/TextFieldBase.qml

@@ -1,88 +0,0 @@
-import QtQuick
-import QtQuick.Templates
-import qs.Config
-
-TextField {
-	id: root
-
-	color: DynamicColors.palette.m3onSurface
-	cursorVisible: !readOnly
-	font.pointSize: Appearance.font.size.small
-	implicitHeight: contentHeight + topPadding + bottomPadding
-	implicitWidth: contentWidth + leftPadding + rightPadding
-	placeholderTextColor: DynamicColors.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)
-	verticalAlignment: TextInput.AlignVCenter
-
-	Behavior on color {
-		CAnim {
-		}
-	}
-	cursorDelegate: Item {
-	}
-	Behavior on selectionColor {
-		CAnim {
-		}
-	}
-
-	CustomRect {
-		id: cursor
-
-		property bool disableBlink
-
-		color: DynamicColors.palette.m3primary
-		implicitHeight: root.cursorRectangle.height
-		implicitWidth: 1.5
-		radius: Appearance.rounding.large
-		x: root.cursorRectangle.x
-		y: root.cursorRectangle.y
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.StandardSmall
-			}
-		}
-		Behavior on x {
-			Anim {
-				duration: Appearance.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/VerticalFadeFlickable.qml

@@ -1,71 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import qs.Effects
-
-CustomFlickable {
-	id: root
-
-	property real bottomFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
-	property real fadeAmount: 0.1
-	property real topFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
-
-	function fadeShouldBeActive(isStart: bool): bool {
-		// When content is smaller than flickable size, hide fade when rebound starts
-		if (contentHeight + topMargin + bottomMargin < height && rebound.running && ((isStart ? verticalOvershoot > 0 : verticalOvershoot < 0)))
-			return false;
-
-		if (isStart)
-			return visibleArea.yPosition > 0;
-		return visibleArea.yPosition + visibleArea.heightRatio < 1;
-	}
-
-	flickableDirection: Flickable.VerticalFlick
-	layer.enabled: true
-
-	Behavior on bottomFadeOpacity {
-		Anim {
-			type: Anim.SlowEffects
-		}
-	}
-	layer.effect: Mask {
-		maskSource: mask
-
-		Rectangle {
-			id: mask
-
-			anchors.fill: parent
-			layer.enabled: true
-			visible: false
-
-			gradient: Gradient {
-				orientation: Gradient.Vertical
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, root.topFadeOpacity)
-					position: 0
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, 1)
-					position: root.fadeAmount
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, 1)
-					position: 1 - root.fadeAmount
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, root.bottomFadeOpacity)
-					position: 1
-				}
-			}
-		}
-	}
-	Behavior on topFadeOpacity {
-		Anim {
-			type: Anim.SlowEffects
-		}
-	}
-}

Components/VerticalFadeListView.qml

@@ -1,102 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import qs.Effects
-
-CustomListView {
-	id: root
-
-	property real endFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
-	property real fadeAmount: 0.1
-	readonly property bool horizontal: orientation === ListView.Horizontal
-	property real startFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
-
-	function contentSize(): real {
-		return horizontal ? contentWidth : contentHeight;
-	}
-
-	function fadeShouldBeActive(isStart: bool): bool {
-		// When content is smaller than flickable size, hide fade when rebound starts.
-		if (contentSize() + marginStart() + marginEnd() < viewportSize() && rebound.running && ((isStart ? overshootStart() > 0 : overshootStart() < 0))) {
-			return false;
-		}
-
-		if (isStart)
-			return visibleStart() > 0;
-
-		return visibleStart() + visibleRatio() < 1;
-	}
-
-	function marginEnd(): real {
-		return horizontal ? rightMargin : bottomMargin;
-	}
-
-	function marginStart(): real {
-		return horizontal ? leftMargin : topMargin;
-	}
-
-	function overshootStart(): real {
-		return horizontal ? horizontalOvershoot : verticalOvershoot;
-	}
-
-	function viewportSize(): real {
-		return horizontal ? width : height;
-	}
-
-	function visibleRatio(): real {
-		return horizontal ? visibleArea.widthRatio : visibleArea.heightRatio;
-	}
-
-	function visibleStart(): real {
-		return horizontal ? visibleArea.xPosition : visibleArea.yPosition;
-	}
-
-	flickableDirection: horizontal ? Flickable.HorizontalFlick : Flickable.VerticalFlick
-	layer.enabled: true
-
-	Behavior on endFadeOpacity {
-		Anim {
-			type: Anim.SlowEffects
-		}
-	}
-	layer.effect: Mask {
-		maskSource: mask
-
-		Rectangle {
-			id: mask
-
-			anchors.fill: parent
-			layer.enabled: true
-			visible: false
-
-			gradient: Gradient {
-				orientation: root.horizontal ? Gradient.Horizontal : Gradient.Vertical
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, root.startFadeOpacity)
-					position: 0
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, 1)
-					position: root.fadeAmount
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, 1)
-					position: 1 - root.fadeAmount
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, root.endFadeOpacity)
-					position: 1
-				}
-			}
-		}
-	}
-	Behavior on startFadeOpacity {
-		Anim {
-			type: Anim.SlowEffects
-		}
-	}
-}

Components/WavyTopRect.qml

@@ -1,46 +0,0 @@
-import QtQuick
-import QtQuick.Shapes
-import qs.Config
-
-Shape {
-	id: root
-
-	property real amplitude: 3
-	property color color: DynamicColors.palette.m3surfaceContainer
-	readonly property real waveHeight: amplitude * 2
-	property int waves: 4
-
-	asynchronous: true
-	preferredRendererType: Shape.CurveRenderer
-
-	ShapePath {
-		fillColor: root.color
-		strokeColor: "transparent"
-		strokeWidth: 0
-
-		Behavior on fillColor {
-			CAnim {
-			}
-		}
-
-		PathSvg {
-			path: {
-				const w = root.width;
-				const h = root.height;
-				const a = root.amplitude;
-				const n = Math.max(1, root.waves);
-				const wl = w / n;
-				const half = wl / 2;
-
-				let d = `M 0,${a} `;
-				for (let i = 0; i < n; ++i) {
-					const x = i * wl;
-					d += `Q ${x + half / 2},${-a} ${x + half},${a} `;
-					d += `Q ${x + half + half / 2},${3 * a} ${x + wl},${a} `;
-				}
-				d += `L ${w},${h} L 0,${h} Z`;
-				return d;
-			}
-		}
-	}
-}

Config/Appearance.qml

@@ -7,6 +7,8 @@ Singleton {
 	readonly property AppearanceConf.Deform deform: Config.appearance.deform
 	readonly property AppearanceConf.FontStuff font: Config.appearance.font
 	readonly property AppearanceConf.Padding padding: Config.appearance.padding
+	// Literally just here to shorten accessing stuff :woe:
+	// Also kinda so I can keep accessing it with `Appearance.xxx` instead of `Conf.appearance.xxx`
 	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

@@ -28,13 +28,9 @@ 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]
@@ -42,9 +38,7 @@ JsonObject {
 	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
@@ -63,8 +57,7 @@ JsonObject {
 	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 larger: 15 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -77,30 +70,23 @@ JsonObject {
 		}
 	}
 	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 int large: 15 * scale
+		property int larger: 13 * scale
+		property int normal: 9 * 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

Config/BarConfig.qml

@@ -59,8 +59,6 @@ JsonObject {
 	}
 	property int rounding: 8
 	property int smoothing: 32
-	property Tray tray: Tray {
-	}
 
 	component Popouts: JsonObject {
 		property bool activeWindow: true
@@ -71,15 +69,4 @@ JsonObject {
 		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/Config.qml

@@ -12,59 +12,23 @@ Singleton {
 
 	property alias appearance: adapter.appearance
 	property alias background: adapter.background
-	property alias bar: adapter.bar
-	property alias clipboard: adapter.clipboard
+	property alias barConfig: adapter.barConfig
 	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 alias plugins: adapter.plugins
 	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;
@@ -75,6 +39,333 @@ Singleton {
 		saveTimer.restart();
 	}
 
+	function serializeAppearance(): var {
+		return {
+			rounding: {
+				scale: appearance.rounding.scale
+			},
+			spacing: {
+				scale: appearance.spacing.scale
+			},
+			padding: {
+				scale: appearance.padding.scale
+			},
+			deform: {
+				scale: appearance.deform.scale
+			},
+			font: {
+				family: {
+					sans: appearance.font.family.sans,
+					mono: appearance.font.family.mono,
+					material: appearance.font.family.material,
+					clock: appearance.font.family.clock
+				},
+				size: {
+					scale: appearance.font.size.scale
+				}
+			},
+			anim: {
+				mediaGifSpeedAdjustment: appearance.anim.mediaGifSpeedAdjustment,
+				sessionGifSpeed: appearance.anim.sessionGifSpeed,
+				durations: {
+					scale: appearance.anim.durations.scale
+				}
+			},
+			transparency: {
+				enabled: appearance.transparency.enabled,
+				base: appearance.transparency.base,
+				layers: appearance.transparency.layers
+			}
+		};
+	}
+
+	function serializeBackground(): var {
+		return {
+			wallFadeDuration: background.wallFadeDuration,
+			enabled: background.enabled,
+			alignX: background.alignX,
+			sourceClipX: background.sourceClipX,
+			sourceClipY: background.sourceClipY,
+			sourceClipW: background.sourceClipW,
+			sourceClipH: background.sourceClipH,
+			alignY: background.alignY,
+			zoom: background.zoom
+		};
+	}
+
+	function serializeBar(): var {
+		return {
+			autoHide: barConfig.autoHide,
+			hideWhenNotif: barConfig.hideWhenNotif,
+			rounding: barConfig.rounding,
+			border: barConfig.border,
+			smoothing: barConfig.smoothing,
+			height: barConfig.height,
+			popouts: {
+				tray: barConfig.popouts.tray,
+				audio: barConfig.popouts.audio,
+				activeWindow: barConfig.popouts.activeWindow,
+				resources: barConfig.popouts.resources,
+				clock: barConfig.popouts.clock,
+				network: barConfig.popouts.network,
+				upower: barConfig.popouts.upower
+			},
+			entries: barConfig.entries
+		};
+	}
+
+	function serializeColors(): var {
+		return {
+			schemeType: colors.schemeType,
+			presets: {
+				name: colors.presets.name,
+				variant: colors.presets.variant,
+				accent: colors.presets.accent
+			}
+		};
+	}
+
+	function serializeConfig(): var {
+		return {
+			barConfig: serializeBar(),
+			lock: serializeLock(),
+			general: serializeGeneral(),
+			services: serializeServices(),
+			notifs: serializeNotifs(),
+			sidebar: serializeSidebar(),
+			utilities: serializeUtilities(),
+			dashboard: serializeDashboard(),
+			appearance: serializeAppearance(),
+			osd: serializeOsd(),
+			background: serializeBackground(),
+			launcher: serializeLauncher(),
+			colors: serializeColors(),
+			dock: serializeDock(),
+			screenshot: serializeScreenshot(),
+			plugins: serializePlugins()
+		};
+	}
+
+	function serializeDashboard(): var {
+		return {
+			enabled: dashboard.enabled,
+			mediaUpdateInterval: dashboard.mediaUpdateInterval,
+			resourceUpdateInterval: dashboard.resourceUpdateInterval,
+			dragThreshold: dashboard.dragThreshold,
+			performance: {
+				showBattery: dashboard.performance.showBattery,
+				showGpu: dashboard.performance.showGpu,
+				showCpu: dashboard.performance.showCpu,
+				showMemory: dashboard.performance.showMemory,
+				showStorage: dashboard.performance.showStorage,
+				showNetwork: dashboard.performance.showNetwork
+			},
+			sizes: {
+				tabIndicatorHeight: dashboard.sizes.tabIndicatorHeight,
+				tabIndicatorSpacing: dashboard.sizes.tabIndicatorSpacing,
+				infoWidth: dashboard.sizes.infoWidth,
+				infoIconSize: dashboard.sizes.infoIconSize,
+				dateTimeWidth: dashboard.sizes.dateTimeWidth,
+				mediaWidth: dashboard.sizes.mediaWidth,
+				mediaProgressSweep: dashboard.sizes.mediaProgressSweep,
+				mediaProgressThickness: dashboard.sizes.mediaProgressThickness,
+				resourceProgessThickness: dashboard.sizes.resourceProgessThickness,
+				weatherWidth: dashboard.sizes.weatherWidth,
+				mediaCoverArtSize: dashboard.sizes.mediaCoverArtSize,
+				mediaVisualiserSize: dashboard.sizes.mediaVisualiserSize,
+				resourceSize: dashboard.sizes.resourceSize
+			}
+		};
+	}
+
+	function serializeDock(): var {
+		return {
+			enable: dock.enable,
+			height: dock.height,
+			hoverToReveal: dock.hoverToReveal,
+			pinnedApps: dock.pinnedApps,
+			pinnedOnStartup: dock.pinnedOnStartup,
+			ignoredAppRegexes: dock.ignoredAppRegexes
+		};
+	}
+
+	function serializeGeneral(): var {
+		return {
+			logo: general.logo,
+			wallpaperPath: general.wallpaperPath,
+			desktopIcons: general.desktopIcons,
+			dateFormat: general.dateFormat,
+			color: {
+				mode: general.color.mode,
+				smart: general.color.smart,
+				scheduleDark: general.color.scheduleDark,
+				scheduleHyprsunset: general.color.scheduleHyprsunset,
+				scheduleHyprsunsetStart: general.color.scheduleHyprsunsetStart,
+				hyprsunsetTemp: general.color.hyprsunsetTemp,
+				scheduleHyprsunsetEnd: general.color.scheduleHyprsunsetEnd,
+				schemeGeneration: general.color.schemeGeneration,
+				scheduleDarkStart: general.color.scheduleDarkStart,
+				scheduleDarkEnd: general.color.scheduleDarkEnd,
+				neovimColors: general.color.neovimColors
+			},
+			apps: {
+				terminal: general.apps.terminal,
+				audio: general.apps.audio,
+				playback: general.apps.playback,
+				explorer: general.apps.explorer
+			},
+			idle: {
+				timeouts: general.idle.timeouts
+			}
+		};
+	}
+
+	function serializeLauncher(): var {
+		return {
+			maxAppsShown: launcher.maxAppsShown,
+			maxWallpapers: launcher.maxWallpapers,
+			uwsm: launcher.uwsm,
+			actionPrefix: launcher.actionPrefix,
+			specialPrefix: launcher.specialPrefix,
+			useFuzzy: {
+				apps: launcher.useFuzzy.apps,
+				actions: launcher.useFuzzy.actions,
+				schemes: launcher.useFuzzy.schemes,
+				variants: launcher.useFuzzy.variants,
+				wallpapers: launcher.useFuzzy.wallpapers
+			},
+			sizes: {
+				itemWidth: launcher.sizes.itemWidth,
+				itemHeight: launcher.sizes.itemHeight,
+				wallpaperWidth: launcher.sizes.wallpaperWidth,
+				wallpaperHeight: launcher.sizes.wallpaperHeight
+			},
+			actions: launcher.actions
+		};
+	}
+
+	function serializeLock(): var {
+		return {
+			recolorLogo: lock.recolorLogo,
+			enableFprint: lock.enableFprint,
+			showNotifContent: lock.showNotifContent,
+			showNotifIcon: lock.showNotifIcon,
+			maxFprintTries: lock.maxFprintTries,
+			blurAmount: lock.blurAmount,
+			sizes: {
+				heightMult: lock.sizes.heightMult,
+				ratio: lock.sizes.ratio,
+				centerWidth: lock.sizes.centerWidth
+			}
+		};
+	}
+
+	function serializeNotifs(): var {
+		return {
+			expire: notifs.expire,
+			defaultExpireTimeout: notifs.defaultExpireTimeout,
+			appNotifCooldown: notifs.appNotifCooldown,
+			clearThreshold: notifs.clearThreshold,
+			expandThreshold: notifs.expandThreshold,
+			actionOnClick: notifs.actionOnClick,
+			groupPreviewNum: notifs.groupPreviewNum,
+			sizes: {
+				width: notifs.sizes.width,
+				image: notifs.sizes.image,
+				badge: notifs.sizes.badge
+			}
+		};
+	}
+
+	function serializeOsd(): var {
+		return {
+			enabled: osd.enabled,
+			hideDelay: osd.hideDelay,
+			enableBrightness: osd.enableBrightness,
+			enableMicrophone: osd.enableMicrophone,
+			allMonBrightness: osd.allMonBrightness,
+			sizes: {
+				sliderWidth: osd.sizes.sliderWidth,
+				sliderHeight: osd.sizes.sliderHeight
+			}
+		};
+	}
+
+	function serializePlugins(): var {
+		return {
+			enabled: plugins.enabled,
+			entries: plugins.entries
+		};
+	}
+
+	function serializeScreenshot(): var {
+		return {
+			enable_pp: screenshot.enable_pp,
+			mode: screenshot.mode,
+			corner_radius: screenshot.corner_radius,
+			drop_shadow: screenshot.drop_shadow,
+			rounded_corners: screenshot.rounded_corners,
+			shadow_blur_radius: screenshot.shadow_blur_radius,
+			shadow_color: screenshot.shadow_color,
+			shadow_offset_x: screenshot.shadow_offset_x,
+			shadow_offset_y: screenshot.shadow_offset_y
+		};
+	}
+
+	function serializeServices(): var {
+		return {
+			weatherLocation: services.weatherLocation,
+			updates: services.updates,
+			useFahrenheit: services.useFahrenheit,
+			ddcutilService: services.ddcutilService,
+			useTwelveHourClock: services.useTwelveHourClock,
+			gpuType: services.gpuType,
+			audioIncrement: services.audioIncrement,
+			brightnessIncrement: services.brightnessIncrement,
+			maxVolume: services.maxVolume,
+			defaultPlayer: services.defaultPlayer,
+			playerAliases: services.playerAliases,
+			visualizerBars: services.visualizerBars
+		};
+	}
+
+	function serializeSidebar(): var {
+		return {
+			enabled: sidebar.enabled,
+			sizes: {
+				width: sidebar.sizes.width
+			}
+		};
+	}
+
+	function serializeUtilities(): var {
+		return {
+			enabled: utilities.enabled,
+			maxToasts: utilities.maxToasts,
+			sizes: {
+				width: utilities.sizes.width,
+				toastWidth: utilities.sizes.toastWidth
+			},
+			toasts: {
+				configLoaded: utilities.toasts.configLoaded,
+				chargingChanged: utilities.toasts.chargingChanged,
+				gameModeChanged: utilities.toasts.gameModeChanged,
+				dndChanged: utilities.toasts.dndChanged,
+				audioOutputChanged: utilities.toasts.audioOutputChanged,
+				audioInputChanged: utilities.toasts.audioInputChanged,
+				capsLockChanged: utilities.toasts.capsLockChanged,
+				numLockChanged: utilities.toasts.numLockChanged,
+				kbLayoutChanged: utilities.toasts.kbLayoutChanged,
+				vpnChanged: utilities.toasts.vpnChanged,
+				nowPlaying: utilities.toasts.nowPlaying
+			},
+			vpn: {
+				enabled: utilities.vpn.enabled,
+				provider: utilities.vpn.provider
+			}
+		};
+	}
+
 	ElapsedTimer {
 		id: timer
 	}
@@ -86,7 +377,20 @@ Singleton {
 
 		onTriggered: {
 			timer.restart();
-			fileView.writeAdapter();
+			try {
+				let config = {};
+				try {
+					config = JSON.parse(fileView.text());
+				} catch (e) {
+					config = {};
+				}
+
+				config = root.serializeConfig();
+
+				fileView.setText(JSON.stringify(config, null, 4));
+			} catch (e) {
+				Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
+			}
 		}
 	}
 
@@ -106,10 +410,6 @@ Singleton {
 		path: `${Paths.config}/config.json`
 		watchChanges: true
 
-		onAdapterUpdated: {
-			if (!root.migratingLegacyBar)
-				root.save();
-		}
 		onFileChanged: {
 			if (!root.recentlySaved) {
 				timer.restart();
@@ -126,11 +426,7 @@ Singleton {
 			ModeScheduler.checkStartup();
 			Hyprsunset.checkStartup();
 			try {
-				const raw = JSON.parse(text());
-				const migrated = root.migrateLegacyBarConfig(raw);
-				if (migrated)
-					root.save();
-
+				JSON.parse(text());
 				const elapsed = timer.elapsedMs();
 
 				if (adapter.utilities.toasts.configLoaded && !root.recentlySaved) {
@@ -151,9 +447,7 @@ Singleton {
 			}
 			property BackgroundConfig background: BackgroundConfig {
 			}
-			property BarConfig bar: BarConfig {
-			}
-			property ClipboardConfig clipboard: ClipboardConfig {
+			property BarConfig barConfig: BarConfig {
 			}
 			property Colors colors: Colors {
 			}
@@ -173,6 +467,8 @@ Singleton {
 			}
 			property Overview overview: Overview {
 			}
+			property PluginConfig plugins: PluginConfig {
+			}
 			property Screenshot screenshot: Screenshot {
 			}
 			property Services services: Services {

Config/DashboardConfig.qml

@@ -1,6 +1,7 @@
 import Quickshell.Io
 
 JsonObject {
+	property int dragThreshold: 50
 	property bool enabled: true
 	property int mediaUpdateInterval: 500
 	property Performance performance: Performance {
@@ -10,14 +11,12 @@ JsonObject {
 	}
 
 	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
@@ -26,7 +25,7 @@ JsonObject {
 		readonly property int mediaCoverArtSize: 150
 		readonly property int mediaProgressSweep: 180
 		readonly property int mediaProgressThickness: 8
-		readonly property int mediaVisualizerSize: 200
+		readonly property int mediaVisualiserSize: 80
 		readonly property int mediaWidth: 200
 		readonly property int resourceProgessThickness: 10
 		readonly property int resourceSize: 200

Config/DynamicColors.qml

@@ -115,10 +115,6 @@ Singleton {
 		Config.save();
 	}
 
-	function swapRG(c: color): color {
-		return Qt.rgba(c.g, c.r, c.b, c.a);
-	}
-
 	Component.onCompleted: debounceTimer.triggered()
 
 	Connections {

Config/General.qml

@@ -4,8 +4,6 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
-	property Battery battery: Battery {
-	}
 	property Color color: Color {
 	}
 	property string dateFormat: "ddd d MMM - hh:mm:ss"
@@ -13,30 +11,14 @@ JsonObject {
 	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"

Config/Launcher.qml

@@ -84,11 +84,6 @@ JsonObject {
 			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 {

Config/NotifConfig.qml

@@ -9,7 +9,6 @@ JsonObject {
 	property bool expire: true
 	property int groupPreviewNum: 3
 	property bool openExpanded: false
-	property bool showInFullscreen: true
 	property Sizes sizes: Sizes {
 	}
 

Config/PluginConfig.qml

@@ -0,0 +1,11 @@
+import Quickshell.Io
+
+JsonObject {
+	property bool enabled: false
+	property list<var> entries: [
+		{
+			id: "Plugin",
+			enabled: false
+		},
+	]
+}

Config/Screenshot.qml

@@ -1,12 +1,12 @@
 import Quickshell.Io
 
 JsonObject {
+	property real corner_radius: 12.0
+	property bool drop_shadow: true
 	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 bool rounded_corners: false
+	property real shadow_blur_radius: 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

@@ -8,7 +8,6 @@ JsonObject {
 	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",

Config/SidebarConfig.qml

@@ -1,7 +1,6 @@
 import Quickshell.Io
 
 JsonObject {
-	property int dragThreshold: 30
 	property bool enabled: true
 	property Sizes sizes: Sizes {
 	}

Daemons/BatteryService.qml

@@ -1,70 +0,0 @@
-import Quickshell
-import Quickshell.Services.UPower
-import QtQuick
-import ZShell
-import qs.Config
-import qs.Components.Toast
-import qs.Helpers
-
-Scope {
-	id: root
-
-	readonly property list<var> popupThresholds: [...Config.general.battery.popupThresholds].sort((a, b) => b.perc - a.perc)
-
-	function nearestThresholdAbove(p: real): var {
-		const thresholds = [...root.popupThresholds];
-		for (const perc of thresholds) {
-			if (p < perc.perc)
-				return perc;
-		}
-
-		return null;
-	}
-
-	Connections {
-		function onOnBatteryChanged(): void {
-			if (!Battery.ready)
-				return;
-
-			if (Battery.onBattery) {
-				if (Config.utilities.toasts.chargingChanged)
-					Toaster.toast(qsTr("Charger unplugged"), qsTr("Battery is discharging"), "power_off");
-				const p = Battery.currentPerc * 100;
-				const perc = root.nearestThresholdAbove(p);
-				if (perc)
-					Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
-			} else {
-				if (Config.utilities.toasts.chargingChanged)
-					Toaster.toast(qsTr("Charger plugged in"), qsTr("Battery is charging"), "power");
-			}
-		}
-
-		target: Battery
-	}
-
-	Connections {
-		function onCurrentPercChanged(): void {
-			if (!Battery.onBattery)
-				return;
-
-			const p = Battery.currentPerc * 100;
-			for (const perc of root.popupThresholds) {
-				if (p == perc.perc) {
-					Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery perc is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
-				}
-			}
-		}
-
-		function onReadyChanged(): void {
-			if (!Battery.ready)
-				return;
-
-			const p = Battery.currentPerc * 100;
-			const perc = root.nearestThresholdAbove(p);
-			if (perc)
-				Toaster.toast(perc.title ?? qsTr("Battery warning"), perc.message ?? qsTr("Battery is low"), perc.icon ?? "battery_android_alert", perc.critical ? Toast.Error : Toast.Warning);
-		}
-
-		target: Battery
-	}
-}

Daemons/NotifServer.qml

@@ -25,7 +25,7 @@ Singleton {
 	property alias server: server
 
 	function shouldThrottle(appName: string): bool {
-		if (props.dnd || [...Visibilities.screens.values()].some(v => v.sidebar))
+		if (props.dnd)
 			return false;
 
 		const key = (appName || "unknown").trim().toLowerCase();
@@ -49,6 +49,11 @@ Singleton {
 		if (loaded) {
 			saveTimer.restart();
 		}
+		if (root.list.length > 0) {
+			HasNotifications.hasNotifications = true;
+		} else {
+			HasNotifications.hasNotifications = false;
+		}
 	}
 
 	Timer {
@@ -174,8 +179,6 @@ Singleton {
 		property string appIcon
 		property string appName
 		property string body
-		property string cachedImageSource: ""
-		property bool cachingImage: false
 		property bool closed
 		readonly property Connections conn: Connections {
 			function onActionsChanged(): void {
@@ -210,14 +213,10 @@ Singleton {
 				notif.hasActionIcons = notif.notification.hasActionIcons;
 			}
 
-			function onHintsChanged(): void {
-				notif.hints = notif.notification.hints;
-			}
-
 			function onImageChanged(): void {
-				notif.imageSource = notif.notification.image || "";
-				notif.image = notif.imageSource;
-				notif.cacheImageIfNeeded();
+				notif.image = notif.notification.image;
+				if (notif.notification?.image)
+					notif.dummyImageLoader.active = true;
 			}
 
 			function onResidentChanged(): void {
@@ -234,13 +233,60 @@ Singleton {
 
 			target: notif.notification
 		}
+		readonly property LazyLoader dummyImageLoader: LazyLoader {
+			active: false
+
+			PanelWindow {
+				color: "transparent"
+				implicitHeight: Config.notifs.sizes.image
+				implicitWidth: Config.notifs.sizes.image
+
+				mask: Region {
+				}
+
+				Image {
+					function tryCache(): void {
+						if (status !== Image.Ready || width != Config.notifs.sizes.image || height != Config.notifs.sizes.image)
+							return;
+
+						const cacheKey = notif.appName + notif.summary + notif.id;
+						let h1 = 0xdeadbeef, h2 = 0x41c6ce57, ch;
+						for (let i = 0; i < cacheKey.length; i++) {
+							ch = cacheKey.charCodeAt(i);
+							h1 = Math.imul(h1 ^ ch, 2654435761);
+							h2 = Math.imul(h2 ^ ch, 1597334677);
+						}
+						h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
+						h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+						h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
+						h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+						const hash = (h2 >>> 0).toString(16).padStart(8, 0) + (h1 >>> 0).toString(16).padStart(8, 0);
+
+						const cache = `${Paths.notifimagecache}/${hash}.png`;
+						ZShellIo.saveItem(this, Qt.resolvedUrl(cache), () => {
+							notif.image = cache;
+							notif.dummyImageLoader.active = false;
+						});
+					}
+
+					anchors.fill: parent
+					asynchronous: true
+					cache: false
+					fillMode: Image.PreserveAspectCrop
+					opacity: 0
+					source: Qt.resolvedUrl(notif.image)
+
+					onHeightChanged: tryCache()
+					onStatusChanged: tryCache()
+					onWidthChanged: tryCache()
+				}
+			}
+		}
 		property real expireTimeout: 5
 		property bool hasActionIcons
-		property var hints
+		property string id
 		property string image
-		property string imageSource
 		property var locks: new Set()
-		property string notifId
 		property Notification notification
 		property bool popup
 		property bool resident
@@ -283,26 +329,6 @@ Singleton {
 		}
 		property int urgency: NotificationUrgency.Normal
 
-		function cacheImageIfNeeded(): void {
-			const source = imageSource;
-
-			if (!source || cachingImage)
-				return;
-
-			if (cachedImageSource === source)
-				return;
-
-			cachingImage = true;
-
-			ZShellIo.cacheImage(Qt.resolvedUrl(source), Paths.notifimagecache, (path, url) => {
-				cachedImageSource = source;
-				image = path;
-				cachingImage = false;
-			}, () => {
-				cachingImage = false;
-			});
-		}
-
 		function close(): void {
 			closed = true;
 			if (locks.size === 0 && root.list.includes(this)) {
@@ -326,14 +352,14 @@ Singleton {
 			if (!notification)
 				return;
 
-			notifId = notification.id;
+			id = notification.id;
 			summary = notification.summary;
 			body = notification.body;
 			appIcon = notification.appIcon;
 			appName = notification.appName;
-			imageSource = notification.image || "";
-			image = imageSource;
-			hints = notification.hints;
+			image = notification.image;
+			if (notification?.image)
+				dummyImageLoader.active = true;
 			expireTimeout = notification.expireTimeout;
 			urgency = notification.urgency;
 			resident = notification.resident;
@@ -343,8 +369,6 @@ Singleton {
 						text: a.text,
 						invoke: () => a.invoke()
 					}));
-
-			cacheImageIfNeeded();
 		}
 	}
 }

Drawers/Backgrounds.qml

@@ -0,0 +1,107 @@
+import Quickshell
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Config
+import qs.Modules as Modules
+import qs.Modules.Notifications as Notifications
+import qs.Modules.Notifications.Sidebar as Sidebar
+import qs.Modules.Notifications.Sidebar.Utils as Utils
+import qs.Modules.Dashboard as Dashboard
+import qs.Modules.Osd as Osd
+import qs.Modules.Launcher as Launcher
+import qs.Modules.Resources as Resources
+import qs.Modules.Drawing as Drawing
+import qs.Modules.Settings as Settings
+import qs.Modules.Dock as Dock
+
+Shape {
+	id: root
+
+	required property Item bar
+	required property Panels panels
+	required property PersistentProperties visibilities
+
+	anchors.fill: parent
+	anchors.margins: Config.barConfig.border
+	anchors.topMargin: bar.implicitHeight
+	asynchronous: true
+	preferredRendererType: Shape.CurveRenderer
+
+	Drawing.Background {
+		startX: 0
+		startY: wrapper.y - rounding
+		wrapper: root.panels.drawing
+	}
+
+	Resources.Background {
+		startX: 0 - rounding
+		startY: 0
+		wrapper: root.panels.resources
+	}
+
+	Osd.Background {
+		startX: root.width - root.panels.sidebar.width
+		startY: (root.height - wrapper.height) / 2 - rounding
+		wrapper: root.panels.osd
+	}
+
+	Modules.Background {
+		invertBottomRounding: wrapper.x <= 0
+		rounding: root.panels.popouts.currentName.startsWith("updates") || root.panels.popouts.currentName.startsWith("audio") ? Appearance.rounding.normal : Appearance.rounding.smallest
+		startX: wrapper.x - rounding
+		startY: wrapper.y
+		wrapper: root.panels.popouts
+	}
+
+	Notifications.Background {
+		sidebar: sidebar
+		startX: root.width
+		startY: 0
+		wrapper: root.panels.notifications
+	}
+
+	Launcher.Background {
+		startX: (root.width - wrapper.width) / 2 - rounding
+		startY: root.height
+		wrapper: root.panels.launcher
+	}
+
+	Dashboard.Background {
+		startX: root.width - root.panels.dashboard.width - rounding
+		startY: 0
+		wrapper: root.panels.dashboard
+	}
+
+	Utils.Background {
+		sidebar: sidebar
+		startX: root.width
+		startY: root.height
+		wrapper: root.panels.utilities
+	}
+
+	Sidebar.Background {
+		id: sidebar
+
+		panels: root.panels
+		startX: root.width
+		startY: root.panels.notifications.height
+		wrapper: root.panels.sidebar
+	}
+
+	Settings.Background {
+		id: settings
+
+		startX: (root.width - wrapper.width) / 2 - rounding
+		startY: 0
+		wrapper: root.panels.settings
+	}
+
+	Dock.Background {
+		id: dock
+
+		startX: (root.width - wrapper.width) / 2 - rounding
+		startY: root.height
+		wrapper: root.panels.dock
+	}
+}

Drawers/Drawers.qml

@@ -1,25 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-
-Variants {
-	model: Quickshell.screens
-
-	Scope {
-		id: scope
-
-		required property ShellScreen modelData
-
-		Exclusions {
-			bar: content.bar
-			screen: scope.modelData
-		}
-
-		Windows {
-			id: content
-
-			screen: scope.modelData
-		}
-	}
-}

Drawers/Drawing.qml

@@ -1,30 +1,35 @@
-pragma ComponentBehavior: Bound
-
-import Quickshell
 import QtQuick
-import ZShell.Internal
 
-Item {
+Canvas {
 	id: root
 
-	readonly property alias content: contentLoader.item
-	readonly property PersistentProperties drawingState: PersistentProperties {
-		property color penColor: "white"
-		property int penWidth: 4
+	property color penColor: "white"
+	property real penWidth: 4
+	property var points: []
 
-		reloadableId: "drawingState"
+	function clear(): void {
+		var ctx = getContext('2d');
+		root.points = [];
+		ctx.reset();
+		root.requestPaint();
 	}
-	required property PersistentProperties visibilities
 
-	Loader {
-		id: contentLoader
+	renderStrategy: Canvas.Cooperative
 
-		active: root.visibilities.isDrawing
-		anchors.fill: parent
-
-		sourceComponent: StrokeCanvas {
-			penColor: root.drawingState.penColor
-			penWidth: root.drawingState.penWidth
-		}
+	onPaint: {
+		if (points.length < 2)
+			return;
+		var ctx = root.getContext('2d');
+		ctx.save();
+		ctx.lineWidth = root.penWidth;
+		ctx.strokeStyle = root.penColor;
+		ctx.lineCap = "round";
+		ctx.beginPath();
+		ctx.moveTo(points[0].x, points[0].y);
+		for (var i = 1; i < points.length; i++)
+			ctx.lineTo(points[i].x, points[i].y);
+		ctx.stroke();
+		points = points.slice(points.length - 2);
+		ctx.restore();
 	}
 }

Drawers/DrawingInput.qml

@@ -0,0 +1,60 @@
+import Quickshell
+import QtQuick
+import qs.Components
+import qs.Config
+
+CustomMouseArea {
+	id: root
+
+	required property var bar
+	required property Drawing drawing
+	required property Panels panels
+	required property var popout
+	required property PersistentProperties visibilities
+
+	function inLeftPanel(panel: Item, x: real, y: real): bool {
+		return x < panel.x + panel.width + Config.barConfig.border && withinPanelHeight(panel, x, y);
+	}
+
+	function withinPanelHeight(panel: Item, x: real, y: real): bool {
+		const panelY = panel.y + bar.implicitHeight;
+		return y >= panelY && y <= panelY + panel.height;
+	}
+
+	acceptedButtons: Qt.LeftButton | Qt.RightButton
+	anchors.fill: root.visibilities.isDrawing ? parent : undefined
+	hoverEnabled: true
+	visible: root.visibilities.isDrawing
+
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
+		}
+
+		if (root.inLeftPanel(root.popout, x, y)) {
+			root.z = -2;
+			root.panels.drawing.expanded = true;
+		}
+	}
+	onPressed: event => {
+		const x = event.x;
+		const y = event.y;
+
+		if (root.visibilities.isDrawing && (event.buttons & Qt.LeftButton)) {
+			root.panels.drawing.expanded = false;
+			root.drawing.points.push(Qt.point(x, y));
+			root.drawing.requestPaint();
+			return;
+		}
+
+		if (event.buttons & Qt.RightButton)
+			root.drawing.clear();
+	}
+	onReleased: {
+		root.drawing.points = [];
+	}
+}

Drawers/Exclusions.qml

@@ -44,7 +44,7 @@ Scope {
 	}
 
 	component ExclusionZone: CustomWindow {
-		exclusiveZone: Config.bar.border
+		exclusiveZone: Config.barConfig.border
 		implicitHeight: 1
 		implicitWidth: 1
 		name: "Bar-Exclusion"

Drawers/Interactions.qml

@@ -2,34 +2,33 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
-import qs.Helpers
 import qs.Modules as BarPopouts
 
-Item {
+CustomMouseArea {
 	id: root
 
 	required property Item bar
-	required property real borderThickness
 	property bool dashboardShortcutActive
+	property point dragStart
 	required property Drawing drawing
+	required property DrawingInput input
 	property bool osdShortcutActive
 	required property Panels panels
 	required property BarPopouts.Wrapper popouts
 	required property ShellScreen screen
-	property bool singleGestureTriggered: false
 	property bool utilitiesShortcutActive
 	required property PersistentProperties visibilities
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		return y > root.height - panel.height - Config.bar.border && withinPanelWidth(panel, x, y);
+		return y > root.height - panel.height - Config.barConfig.border && 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 + Config.barConfig.border && 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 - Config.barConfig.border && withinPanelHeight(panel, x, y);
 	}
 
 	function inTopPanel(panel: Item, x: real, y: real): bool {
@@ -48,181 +47,83 @@ Item {
 	}
 
 	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x + root.borderThickness;
+		const panelX = panel.x;
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
 	anchors.fill: parent
+	cursorShape: (pressed && dragStart.y < bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
+	hoverEnabled: true
+	propagateComposedEvents: false
 
-	DragHandler {
-		id: singleHandler
-
-		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-		dragThreshold: 0
-		enabled: !root.visibilities.isDrawing
-		grabPermissions: PointerHandler.CanTakeOverFromHandlersOfSameType | PointerHandler.ApprovesTakeOverByAnything
-		maximumPointCount: 1
-		minimumPointCount: 1
-		target: null
-
-		onActiveChanged: {
-			if (!active)
-				root.singleGestureTriggered = false;
-		}
-		onCentroidChanged: {
-			const x = centroid.position.x;
-			const y = centroid.position.y;
-			const dragX = x - centroid.pressPosition.x;
-			const dragY = y - centroid.pressPosition.y;
-
-			if (centroid.pressPosition.y >= root.screen.height - Config.bar.border && centroid.pressPosition.x > root.screen.width / 5 && dragY < -Config.launcher.dragThreshold)
-				root.visibilities.launcher = true;
-
-			if (root.singleGestureTriggered)
-				return;
-
-			if (centroid.pressPosition.y < root.bar.implicitHeight) {
-				if (dragY > 20) {
-					root.visibilities.settings = true;
-					root.singleGestureTriggered = true;
-				} else if (dragY < -20) {
-					root.visibilities.settings = false;
-					root.singleGestureTriggered = true;
-				}
+	onContainsMouseChanged: {
+		if (!containsMouse) {
+			if (!osdShortcutActive) {
+				visibilities.osd = false;
+				root.panels.osd.hovered = false;
 			}
 
-			if (centroid.pressPosition.y > root.screen.height - Config.bar.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
-				root.visibilities.clipboard = 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 (dragY < -10) {
-					root.visibilities.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) {
-				root.visibilities.sidebar = true;
-				root.singleGestureTriggered = true;
+			if (!popouts.currentName.startsWith("traymenu")) {
+				popouts.hasCurrent = false;
 			}
 
-			if (centroid.pressPosition.x >= root.screen.width - Config.bar.border && centroid.pressPosition.y > (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) {
-				Hypr.dispatch(`hl.dsp.focus({ workspace = 'r-1', on_current_monitor = true })`);
-				root.singleGestureTriggered = true;
-			}
+			if (Config.barConfig.autoHide)
+				bar.isHovered = false;
 		}
 	}
+	onPositionChanged: event => {
+		const x = event.x;
+		const y = event.y;
+		const dragX = x - dragStart.x;
+		const dragY = y - dragStart.y;
 
-	PointHandler {
-		id: drawingHandler
+		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
+			// root.input.z = 2;
+			root.panels.drawing.expanded = false;
+		}
 
-		property bool setInitialPoint: false
+		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
+			bar.isHovered = true;
 
-		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)
+		if (pressed && dragStart.y < bar.implicitHeight) {
+			if (dragY > 20)
+				visibilities.settings = true;
+			else if (dragY < -20)
+				visibilities.settings = false;
+		}
 
-		onActiveChanged: {
-			if (!active) {
-				setInitialPoint = false;
-				root.drawing.content.endStroke();
-			} else {
-				root.panels.drawing.collapse();
+		if (Config.dock.hoverToReveal && pressed && dragStart.y > root.screen.height - root.bar.implicitHeight)
+			if (dragY < -10)
+				visibilities.dock = true;
+
+		if (panels.sidebar.width === 0) {
+			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+
+			if (showOsd) {
+				osdShortcutActive = false;
+				root.panels.osd.hovered = true;
+			}
+		} else {
+			const outOfSidebar = x < width - panels.sidebar.width;
+			const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
+
+			if (!osdShortcutActive) {
+				visibilities.osd = showOsd;
+				root.panels.osd.hovered = showOsd;
+			} else if (showOsd) {
+				osdShortcutActive = false;
+				root.panels.osd.hovered = true;
 			}
 		}
-		onPointChanged: {
-			if (!active)
-				return;
-			const x = point.position.x;
-			const y = point.position.y;
-			const origX = point.pressPosition.x;
-			const origY = point.pressPosition.y;
 
-			if (point.pressedButtons & Qt.RightButton) {
-				root.drawing.content.clear();
-				return;
-			}
-			if (x === 0 && y === 0 && origX === 0 && origY === 0)
-				return;
+		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
+			visibilities.dock = true;
 
-			if (!setInitialPoint) {
-				setInitialPoint = true;
-				root.drawing.content.beginStroke(origX, origY);
-				return;
-			}
-
-			root.drawing.content.appendPoint(x, y);
-		}
-	}
-
-	HoverHandler {
-		id: hoverHandler
-
-		cursorShape: root.visibilities.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.panels.osd.hovered = false;
-				}
-
-				if (!root.popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover) {
-					root.popouts.hasCurrent = false;
-				}
-
-				if (Config.bar.autoHide)
-					root.bar.isHovered = false;
-			}
-		}
-		onPointChanged: {
-			const x = point.position.x;
-			const y = point.position.y;
-
-			if (root.visibilities.isDrawing) {
-				if (root.inLeftPanel(root.panels.drawing, x, y) && !(drawingHandler.point.pressedButtons & Qt.LeftButton)) {
-					root.panels.drawing.expand();
-					root.drawing.content.hideHover();
-					return;
-				}
-
-				root.drawing.content.showHover(x, y);
-				return;
-			}
-
-			if (!root.visibilities.bar && Config.bar.autoHide && y < root.bar.implicitHeight)
-				root.bar.isHovered = true;
-
-			if (root.panels.sidebar.offsetScale === 1) {
-				const showOsd = root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			} else {
-				const outOfSidebar = x < root.width - root.panels.sidebar.width * (1 - root.panels.sidebar.offsetScale);
-				const showOsd = outOfSidebar && root.inRightPanel(root.panels.osdWrapper, x, y);
-
-				if (!root.osdShortcutActive) {
-					root.visibilities.osd = showOsd;
-					root.panels.osd.hovered = showOsd;
-				} else if (showOsd) {
-					root.osdShortcutActive = false;
-					root.panels.osd.hovered = true;
-				}
-			}
-
-			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
-				root.visibilities.dock = true;
-
-			if (y < root.bar.implicitHeight)
-				root.bar.checkPopout(x);
+		if (y < root.bar.implicitHeight) {
+			root.bar.checkPopout(x);
 		}
 	}
+	onPressed: event => dragStart = Qt.point(event.x, event.y)
 
 	Connections {
 		function onDashboardChanged() {
@@ -231,8 +132,6 @@ Item {
 				if (!inDashboardArea) {
 					root.dashboardShortcutActive = true;
 				}
-				if (root.panels.launcher.x + root.panels.launcher.width > root.panels.dashboardWrapper.x)
-					root.visibilities.launcher = false;
 
 				root.visibilities.settings = false;
 				root.visibilities.sidebar = false;
@@ -262,10 +161,6 @@ Item {
 			}
 
 			if (root.visibilities.launcher) {
-				if (root.panels.dashboardWrapper.x < root.panels.launcher.x + root.panels.launcher.width) {
-					root.visibilities.dashboard = false;
-				}
-
 				root.visibilities.dock = false;
 				root.visibilities.settings = false;
 			}
@@ -298,8 +193,6 @@ Item {
 				root.visibilities.sidebar = false;
 				root.panels.popouts.hasCurrent = false;
 				root.visibilities.launcher = false;
-			} else {
-				Config.save();
 			}
 		}
 
@@ -311,6 +204,17 @@ Item {
 			}
 		}
 
+		function onUtilitiesChanged() {
+			if (root.visibilities.utilities) {
+				const inUtilitiesArea = root.inBottomPanel(root.panels.utilities, root.mouseX, root.mouseY);
+				if (!inUtilitiesArea) {
+					root.utilitiesShortcutActive = true;
+				}
+			} else {
+				root.utilitiesShortcutActive = false;
+			}
+		}
+
 		target: root.visibilities
 	}
 }

Drawers/Panels.qml

@@ -13,20 +13,17 @@ import qs.Modules.Resources as Resources
 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
 
 Item {
 	id: root
 
 	required property Item bar
-	required property real borderThickness
-	readonly property alias clipboard: clipboard
 	readonly property alias dashboard: dashboard
 	readonly property alias dashboardWrapper: dashboardWrapper
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
-	required property var drawingItem
+	required property Canvas drawingItem
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
@@ -44,7 +41,7 @@ Item {
 	required property PersistentProperties visibilities
 
 	anchors.fill: parent
-	anchors.margins: borderThickness
+	anchors.margins: Config.barConfig.border
 	anchors.topMargin: bar.implicitHeight
 
 	Item {
@@ -100,7 +97,6 @@ Item {
 		id: popouts
 
 		anchors.top: parent.top
-		borderThickness: root.borderThickness
 		screen: root.screen
 	}
 
@@ -184,14 +180,18 @@ Item {
 	Item {
 		id: settingsWrapper
 
-		anchors.fill: parent
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
 		clip: true
+		implicitHeight: settings.implicitHeight * (1 - settings.offsetScale)
+		implicitWidth: settings.implicitWidth
 
 		Settings.Wrapper {
 			id: settings
 
-			anchors.centerIn: parent
-			anchors.verticalCenterOffset: (-implicitHeight - 5 - ((root.height - implicitHeight) / 2)) * offsetScale
+			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.top: parent.top
+			// anchors.centerIn: parent
 			panels: root
 			screen: root.screen
 			visibilities: root.visibilities
@@ -207,13 +207,4 @@ Item {
 		screen: root.screen
 		visibilities: root.visibilities
 	}
-
-	Clipboard.Wrapper {
-		id: clipboard
-
-		anchors.bottom: parent.bottom
-		anchors.left: parent.left
-		screen: root.screen
-		visibilities: root.visibilities
-	}
 }

Drawers/Regions.qml

@@ -1,88 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import qs.Modules.Bar as Bar
-
-Region {
-	id: root
-
-	required property Bar.BarLoader bar
-	readonly property real borderThickness: win.borderThickness
-	readonly property alias menuPopoutRegion: menuPopoutRegion
-	required property Panels panels
-	required property var win
-
-	height: win.height - bar.implicitHeight - win.borderThickness - win.dragMaskPadding * 2
-	intersection: Intersection.Xor
-	width: win.width - win.borderThickness * 2 - win.dragMaskPadding * 2
-	x: win.borderThickness + win.dragMaskPadding
-	y: bar.implicitHeight + win.dragMaskPadding
-
-	R {
-		panel: root.panels.dashboardWrapper
-	}
-
-	R {
-		panel: root.panels.launcher
-	}
-
-	R {
-		id: sidebarRegion
-
-		panel: root.panels.sidebar
-		width: panel.width * (1 - root.panels.sidebar.offsetScale) + root.borderThickness
-		x: root.win.width - width
-	}
-
-	R {
-		panel: root.panels.osdWrapper
-		width: panel.width * (1 - root.panels.osd.offsetScale) + root.borderThickness
-	}
-
-	R {
-		panel: root.panels.notifications
-	}
-
-	R {
-		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.borderThickness
-		panel: root.panels.utilities
-		y: root.win.height - height
-	}
-
-	R {
-		panel: root.panels.popoutsWrapper
-	}
-
-	R {
-		panel: root.panels.resourcesWrapper
-	}
-
-	R {
-		panel: root.panels.settings
-	}
-
-	R {
-		panel: root.panels.dock
-	}
-
-	R {
-		panel: root.panels.clipboard
-	}
-
-	Region {
-		id: menuPopoutRegion
-
-		intersection: Intersection.Subtract
-	}
-
-	component R: Region {
-		required property Item panel
-
-		height: panel.height
-		intersection: Intersection.Subtract
-		width: panel.width
-		x: panel.x + root.borderThickness
-		y: panel.y + root.bar.implicitHeight
-	}
-}

Drawers/Windows.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Io
@@ -10,426 +9,383 @@ import Quickshell.Hyprland
 import ZShell.Blobs
 import qs.Daemons
 import qs.Components
+import qs.Modules
 import qs.Modules.Bar
 import qs.Config
 import qs.Helpers
 import qs.Drawers
 
-CustomWindow {
-	id: root
+Variants {
+	model: Quickshell.screens
 
-	readonly property alias bar: bar
-	readonly property real borderLayoutThickness: hasFullscreen ? 0 : Config.bar.border
-	readonly property real borderRounding: Config.bar.rounding * (1 - fsTransitionProg)
-	readonly property real borderThickness: Config.bar.border * (1 - fsTransitionProg)
-	readonly property int dragMaskPadding: {
-		if (focusGrab.active)
-			return 0;
+	Scope {
+		id: scope
 
-		if (monitor?.lastIpcObject.specialWorkspace?.name || monitor?.activeWorkspace?.lastIpcObject.windows > 0)
-			return 0;
+		required property var modelData
 
-		return 100;
-	}
-	property real fsTransitionProg: hasFullscreen ? 1 : 0
-	readonly property bool hasFullscreen: {
-		if (hasSpecialWorkspace) {
-			const specialName = monitor?.lastIpcObject.specialWorkspace?.name;
-			if (!specialName)
-				return false;
-			const specialWs = Hypr.workspaces.values.find(ws => ws.name === specialName);
-			return specialWs?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false;
-		}
-		return hasFullscreenOnNormalWs;
-	}
-	readonly property bool hasFullscreenOnNormalWs: monitor?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen > 1) ?? false
-	readonly property bool hasSpecialWorkspace: (monitor?.lastIpcObject.specialWorkspace?.name.length ?? 0) > 0
-	readonly property alias interactionWrapper: interactions
-	readonly property alias menuRegion: regions.menuPopoutRegion
-	readonly property HyprlandMonitor monitor: Hypr.monitorFor(screen)
-	property var root: Quickshell.shellDir
-	readonly property real sdfBorderOffset: 2 * fsTransitionProg
-	readonly property real shadowOpacity: 0.7 * (1 - fsTransitionProg)
-	property color surfaceColor: DynamicColors.tPalette.m3surface
-
-	WlrLayershell.exclusionMode: ExclusionMode.Ignore
-	WlrLayershell.keyboardFocus: visibilities.launcher || visibilities.settings ? 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)
-	name: "Bar"
-
-	Behavior on fsTransitionProg {
-		Anim {
-		}
-	}
-	Behavior on surfaceColor {
-		CAnim {
-		}
-	}
-
-	contentItem.Keys.onEscapePressed: {
-		if (Config.bar.autoHide)
-			visibilities.bar = false;
-		visibilities.launcher = false;
-		visibilities.sidebar = false;
-		visibilities.dashboard = false;
-		visibilities.osd = false;
-		visibilities.settings = false;
-		visibilities.resources = false;
-		visibilities.dock = false;
-		visibilities.clipboard = false;
-		panels.popouts.hasCurrent = false;
-	}
-	onHasFullscreenChanged: {
-		visibilities.launcher = false;
-		visibilities.sidebar = false;
-		visibilities.dashboard = false;
-		visibilities.osd = false;
-		visibilities.settings = false;
-		visibilities.resources = false;
-		visibilities.clipboard = false;
-		visibilities.dock = false;
-		panels.popouts.hasCurrent = false;
-	}
-
-	Region {
-		id: emptyRegion
-
-		height: panels.notifications.height
-		width: panels.notifications.width
-		x: panels.notifications.x + root.borderThickness
-		y: panels.notifications.y + bar.implicitHeight
-
-		Region {
-			height: panels.osd.height
-			width: panels.osdWrapper.width * (1 - panels.osd.offsetScale) + root.borderThickness
-			x: root.width - width
-			y: panels.osdWrapper.y + bar.implicitHeight
-		}
-	}
-
-	Regions {
-		id: regions
-
-		bar: bar
-		panels: panels
-		win: root
-	}
-
-	anchors {
-		bottom: true
-		left: true
-		right: true
-		top: true
-	}
-
-	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]
-
-		onCleared: {
-			visibilities.launcher = false;
-			visibilities.sidebar = false;
-			visibilities.dashboard = false;
-			visibilities.osd = false;
-			visibilities.settings = false;
-			visibilities.resources = false;
-			visibilities.clipboard = false;
-			visibilities.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
-		value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.bar.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
-		when: Config.bar.autoHide
-	}
-
-	Item {
-		id: surface
-
-		anchors.fill: parent
-		layer.enabled: true
-		opacity: root.surfaceColor.a
-
-		layer.effect: MultiEffect {
-			blurMax: 32
-			shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, Math.max(0, root.shadowOpacity))
-			shadowEnabled: true
+		Exclusions {
+			bar: bar
+			screen: scope.modelData
 		}
 
-		BlobGroup {
-			id: blobGroup
+		CustomWindow {
+			id: win
 
-			color: root.surfaceColor
-			smoothing: Config.bar.smoothing
-		}
+			readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
+			property var root: Quickshell.shellDir
 
-		BlobInvertedRect {
-			anchors.fill: parent
-			anchors.margins: -50
-			borderBottom: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderLeft: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderRight: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderTop: bar.implicitHeight - anchors.margins - root.sdfBorderOffset
-			group: blobGroup
-			radius: root.borderRounding
-		}
+			WlrLayershell.exclusionMode: ExclusionMode.Ignore
+			WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+			color: "transparent"
+			contentItem.focus: true
+			mask: visibilities.isDrawing ? null : region
+			name: "Bar"
+			screen: scope.modelData
 
-		PanelBg {
-			id: dashBg
+			contentItem.Keys.onEscapePressed: {
+				if (Config.barConfig.autoHide)
+					visibilities.bar = false;
+				visibilities.sidebar = false;
+				visibilities.dashboard = false;
+				visibilities.osd = false;
+				visibilities.settings = false;
+				visibilities.resources = false;
+			}
+			onHasFullscreenChanged: {
+				visibilities.launcher = false;
+				visibilities.dashboard = false;
+				visibilities.osd = false;
+				visibilities.settings = false;
+				visibilities.resources = false;
+			}
 
-			property real extraHeight: 0.2
+			Region {
+				id: region
 
-			deformAmount: 0.06
-			implicitHeight: panels.dashboard.height * (1 + extraHeight)
-			implicitWidth: panels.dashboard.width
-			panel: panels.dashboardWrapper
-			radius: Appearance.rounding.normal
-			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
-			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
-		}
+				height: win.height - bar.implicitHeight - Config.barConfig.border
+				intersection: Intersection.Xor
+				regions: popoutRegions.instances
+				width: win.width - Config.barConfig.border * 2
+				x: Config.barConfig.border
+				y: bar.implicitHeight
+			}
 
-		PanelBg {
-			id: launcherBg
+			anchors {
+				bottom: true
+				left: true
+				right: true
+				top: true
+			}
 
-			property real extraHeight: 0.2
+			Variants {
+				id: popoutRegions
 
-			deformAmount: 0.06
-			implicitHeight: panels.launcher.height * (1 + extraHeight)
-			panel: panels.launcher
-			radius: Appearance.rounding.smallest + 5
-			y: panels.launcher.y + bar.implicitHeight
-		}
+				model: panels.children
 
-		PanelBg {
-			id: sidebarBg
+				Region {
+					required property Item modelData
 
-			bottomLeftRadius: 0
-			deformAmount: 0.04
-			exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
-			implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
-			panel: panels.sidebar
-		}
-
-		PanelBg {
-			id: osdBg
-
-			deformAmount: 0.1
-			implicitHeight: panels.osd.height
-			implicitWidth: panels.osd.width
-			panel: panels.osdWrapper
-			radius: 20
-			x: panels.osdWrapper.x + panels.osd.x + root.borderThickness
-			y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
-		}
-
-		PanelBg {
-			id: notifsBg
-
-			panel: panels.notifications
-			radius: Appearance.rounding.normal
-		}
-
-		PanelBg {
-			id: utilsBg
-
-			deformAmount: 0.1
-			exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
-			panel: panels.utilities
-			topLeftRadius: 0
-		}
-
-		PanelBg {
-			id: popoutBg
-
-			property real extraHeight: 0.2
-
-			deformAmount: panels.popouts.currentName.startsWith("traymenu") ? 0.15 : 0.08
-			implicitHeight: panels.popouts.height * (1 + extraHeight)
-			implicitWidth: panels.popouts.width
-			panel: panels.popoutsWrapper
-			radius: panels.popouts.current?.panelRadius ?? Appearance.rounding.normal
-			x: panels.popoutsWrapper.x + panels.popouts.x + root.borderThickness
-			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
-
-			Behavior on extraHeight {
-				Anim {
+					height: modelData.height
+					intersection: Intersection.Subtract
+					width: modelData.width
+					x: modelData.x + Config.barConfig.border
+					y: modelData.y + bar.implicitHeight
 				}
 			}
-		}
 
-		PanelBg {
-			id: resourcesBg
+			HyprlandFocusGrab {
+				id: focusGrab
 
-			deformAmount: 0.05
-			implicitHeight: panels.resources.height
-			implicitWidth: panels.resources.width
-			panel: panels.resourcesWrapper
-			radius: Appearance.rounding.large
-			x: panels.resourcesWrapper.x + panels.resources.x + root.borderThickness
-			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
-		}
+				active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
+				windows: [win]
 
-		PanelBg {
-			id: settingsBg
-
-			deformAmount: 0.03
-			panel: panels.settings
-			radius: Appearance.rounding.large + Appearance.padding.normal
-		}
-
-		PanelBg {
-			id: dockBg
-
-			deformAmount: 0.08
-			panel: panels.dock
-			radius: Appearance.rounding.normal
-		}
-
-		PanelBg {
-			id: drawingBg
-
-			deformAmount: 0.08
-			panel: panels.drawing
-			radius: Appearance.rounding.normal
-		}
-
-		PanelBg {
-			id: clipboardBg
-
-			deformAmount: 0.03
-			panel: panels.clipboard
-			radius: 29
-		}
-	}
-
-	Drawing {
-		id: drawing
-
-		anchors.fill: parent
-		layer.enabled: true
-		visibilities: visibilities
-		z: 2
-
-		layer.effect: MultiEffect {
-			maskEnabled: true
-			maskInverted: true
-			maskSource: maskSource
-		}
-	}
-
-	Item {
-		id: maskSource
-
-		anchors.fill: parent
-		layer.enabled: true
-		visible: false
-
-		CustomRect {
-			readonly property int extraWidth: radius
-
-			color: "white"
-			implicitHeight: panels.drawing.height
-			implicitWidth: panels.drawing.width + extraWidth
-			radius: drawingBg.radius
-			x: -extraWidth + root.borderThickness + panels.drawing.x
-			y: panels.drawing.y + bar.implicitHeight
-		}
-	}
-
-	Interactions {
-		id: interactions
-
-		anchors.fill: parent
-		bar: bar
-		borderThickness: root.borderLayoutThickness
-		drawing: drawing
-		enabled: true
-		panels: panels
-		popouts: panels.popouts
-		screen: root.screen
-		visibilities: visibilities
-
-		Panels {
-			id: panels
-
-			bar: bar
-			borderThickness: root.borderThickness
-			drawingItem: drawing
-			screen: root.screen
-			visibilities: visibilities
-
-			clipboard.transform: Matrix4x4 {
-				matrix: clipboardBg.deformMatrix
+				onCleared: {
+					visibilities.launcher = false;
+					visibilities.sidebar = false;
+					visibilities.dashboard = false;
+					visibilities.osd = false;
+					visibilities.settings = false;
+					visibilities.resources = false;
+					visibilities.dock = false;
+					panels.popouts.hasCurrent = false;
+				}
 			}
-			dashboard.transform: Matrix4x4 {
-				matrix: dashBg.deformMatrix
-			}
-			dock.transform: Matrix4x4 {
-				matrix: dockBg.deformMatrix
-			}
-			launcher.transform: Matrix4x4 {
-				matrix: launcherBg.deformMatrix
-			}
-			notifications.transform: Matrix4x4 {
-				matrix: notifsBg.deformMatrix
-			}
-			osd.transform: Matrix4x4 {
-				matrix: osdBg.deformMatrix
-			}
-			popouts.transform: Matrix4x4 {
-				matrix: popoutBg.deformMatrix
-			}
-			resources.transform: Matrix4x4 {
-				matrix: resourcesBg.deformMatrix
-			}
-			settings.transform: Matrix4x4 {
-				matrix: settingsBg.deformMatrix
-			}
-			sidebar.transform: Matrix4x4 {
-				matrix: sidebarBg.deformMatrix
-			}
-			utilities.transform: Matrix4x4 {
-				matrix: utilsBg.deformMatrix
-			}
-		}
 
-		BarLoader {
-			id: bar
+			PersistentProperties {
+				id: visibilities
 
-			anchors.left: parent.left
-			anchors.right: parent.right
-			enabled: !visibilities.isDrawing
-			fullscreen: root.hasFullscreen
-			popouts: panels.popouts
-			popoutsWrapper: panels.popoutsWrapper
-			screen: root.screen
-			visibilities: visibilities
+				property bool bar
+				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(scope.modelData, this)
+			}
+
+			IpcHandler {
+				function toggleLauncher(fix: string): void {
+					visibilities.launcher = !visibilities.launcher;
+				}
+
+				target: "visibilities"
+			}
+
+			Binding {
+				property: "bar"
+				target: visibilities
+				value: visibilities.sidebar || visibilities.dashboard || visibilities.osd || (!Config.barConfig.hideWhenNotif && visibilities.notif) || visibilities.resources || visibilities.settings || bar.isHovered
+				when: Config.barConfig.autoHide
+			}
+
+			Item {
+				anchors.fill: parent
+				layer.enabled: true
+				opacity: Appearance.transparency.enabled ? DynamicColors.transparency.base : 1
+
+				layer.effect: MultiEffect {
+					blurMax: 32
+					shadowColor: Qt.alpha(DynamicColors.palette.m3shadow, 1)
+					shadowEnabled: true
+				}
+
+				BlobGroup {
+					id: blobGroup
+
+					color: DynamicColors.palette.m3surface
+					smoothing: Config.barConfig.smoothing
+
+					Behavior on color {
+						CAnim {
+						}
+					}
+				}
+
+				BlobInvertedRect {
+					anchors.fill: parent
+					anchors.margins: -50
+					borderBottom: Config.barConfig.border - anchors.margins
+					borderLeft: Config.barConfig.border - anchors.margins
+					borderRight: Config.barConfig.border - anchors.margins
+					borderTop: bar.implicitHeight - anchors.margins
+					group: blobGroup
+					radius: Config.barConfig.rounding
+				}
+
+				PanelBg {
+					id: dashBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.06
+					implicitHeight: panels.dashboard.height * (1 + extraHeight)
+					implicitWidth: panels.dashboard.width
+					panel: panels.dashboardWrapper
+					radius: Appearance.rounding.normal
+					x: panels.dashboardWrapper.x + panels.dashboard.x + Config.barConfig.border
+					y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+				}
+
+				PanelBg {
+					id: launcherBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.06
+					implicitHeight: panels.launcher.height * (1 + extraHeight)
+					panel: panels.launcher
+					radius: Appearance.rounding.smallest + 5
+					y: panels.launcher.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: sidebarBg
+
+					bottomLeftRadius: 0
+					deformAmount: 0.04
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
+					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
+					panel: panels.sidebar
+				}
+
+				PanelBg {
+					id: osdBg
+
+					deformAmount: 0.1
+					implicitHeight: panels.osd.height
+					implicitWidth: panels.osd.width
+					panel: panels.osdWrapper
+					radius: 20
+					x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
+					y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: notifsBg
+
+					panel: panels.notifications
+				}
+
+				PanelBg {
+					id: utilsBg
+
+					deformAmount: panels.sidebar.visible ? (0.1) : (0.1)
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
+					panel: panels.utilities
+					topLeftRadius: 0
+				}
+
+				PanelBg {
+					id: popoutBg
+
+					property real extraHeight: panels.popouts.isDetached ? 0 : 0.2
+
+					deformAmount: panels.popouts.isDetached ? 0.05 : panels.popouts.hasCurrent ? 0.15 : 0.1
+					implicitHeight: panels.popouts.height * (1 + extraHeight)
+					implicitWidth: panels.popouts.width
+					panel: panels.popoutsWrapper
+					radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : 20 * Appearance.rounding.scale
+					x: panels.popoutsWrapper.x + panels.popouts.x + Config.barConfig.border
+					y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+
+					Behavior on extraHeight {
+						Anim {
+						}
+					}
+				}
+
+				PanelBg {
+					id: resourcesBg
+
+					deformAmount: 0.05
+					implicitHeight: panels.resources.height
+					implicitWidth: panels.resources.width
+					panel: panels.resourcesWrapper
+					radius: Appearance.rounding.normal
+					x: panels.resourcesWrapper.x + panels.resources.x + Config.barConfig.border
+					y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+				}
+
+				PanelBg {
+					id: settingsBg
+
+					property real extraHeight: 0.2
+
+					deformAmount: 0.03
+					implicitHeight: panels.settings.height * (1 + extraHeight)
+					implicitWidth: panels.settings.width
+					panel: panels.settings
+					radius: Appearance.rounding.large
+					topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
+					topRightRadius: Appearance.rounding.large + Appearance.padding.smaller
+					x: panels.settingsWrapper.x + panels.settings.x + Config.barConfig.border
+					y: panels.settingsWrapper.y + panels.settings.y + bar.implicitHeight - panels.settings.height * extraHeight
+				}
+
+				PanelBg {
+					id: dockBg
+
+					deformAmount: 0.08
+					panel: panels.dock
+					radius: Appearance.rounding.normal
+				}
+
+				PanelBg {
+					id: drawingBg
+
+					deformAmount: 0.08
+					panel: panels.drawing
+					radius: Appearance.rounding.normal
+				}
+			}
+
+			Drawing {
+				id: drawing
+
+				anchors.fill: parent
+				z: 2
+			}
+
+			DrawingInput {
+				id: input
+
+				bar: bar
+				drawing: drawing
+				panels: panels
+				popout: panels.drawing
+				visibilities: visibilities
+				z: 2
+			}
+
+			Interactions {
+				id: mouseArea
+
+				anchors.fill: parent
+				bar: bar
+				drawing: drawing
+				input: input
+				panels: panels
+				popouts: panels.popouts
+				screen: scope.modelData
+				visibilities: visibilities
+				z: 1
+
+				Panels {
+					id: panels
+
+					bar: bar
+					drawingItem: drawing
+					screen: scope.modelData
+					visibilities: visibilities
+
+					dashboard.transform: Matrix4x4 {
+						matrix: dashBg.deformMatrix
+					}
+					dock.transform: Matrix4x4 {
+						matrix: dockBg.deformMatrix
+					}
+					launcher.transform: Matrix4x4 {
+						matrix: launcherBg.deformMatrix
+					}
+					notifications.transform: Matrix4x4 {
+						matrix: notifsBg.deformMatrix
+					}
+					osd.transform: Matrix4x4 {
+						matrix: osdBg.deformMatrix
+					}
+					popouts.transform: Matrix4x4 {
+						matrix: popoutBg.deformMatrix
+					}
+					resources.transform: Matrix4x4 {
+						matrix: resourcesBg.deformMatrix
+					}
+					settings.transform: Matrix4x4 {
+						matrix: settingsBg.deformMatrix
+					}
+					sidebar.transform: Matrix4x4 {
+						matrix: sidebarBg.deformMatrix
+					}
+					utilities.transform: Matrix4x4 {
+						matrix: utilsBg.deformMatrix
+					}
+				}
+
+				BarLoader {
+					id: bar
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					popouts: panels.popouts
+					popoutsWrapper: panels.popoutsWrapper
+					screen: scope.modelData
+					visibilities: visibilities
+				}
+			}
 		}
 	}
 
@@ -442,7 +398,7 @@ CustomWindow {
 		implicitHeight: panel.height
 		implicitWidth: panel.width
 		radius: Appearance.rounding.smallest
-		x: panel.x + root.borderThickness
+		x: panel.x + Config.barConfig.border
 		y: panel.y + bar.implicitHeight
 	}
 }

Effects/Mask.qml

@@ -1,7 +0,0 @@
-import QtQuick.Effects
-
-MultiEffect {
-	maskEnabled: true
-	maskSpreadAtMin: 1
-	maskThresholdMin: 0.5
-}

Extensions/FetchPlugins.qml

@@ -0,0 +1,18 @@
+pragma Singleton
+
+import Quickshell
+import ZShell.Models
+
+Singleton {
+	id: root
+
+	property alias plugins: plugins.entries
+
+	FileSystemModel {
+		id: plugins
+
+		nameFilters: ["*.qml"]
+		path: Quickshell.env("HOME") + "/.config/zshell"
+		recursive: false
+	}
+}

Extensions/LoadExtensions.qml

@@ -0,0 +1,17 @@
+import Quickshell
+import QtQuick
+import ZShell.Models
+import qs.Config
+
+Repeater {
+	model: FetchPlugins.plugins
+
+	LazyLoader {
+		required property FileSystemEntry modelData
+
+		activeAsync: Config.plugins.entries.some(p => {
+			return p.id === modelData.baseName && p.enabled;
+		})
+		source: modelData.path
+	}
+}

Greeter/Center.qml

@@ -118,12 +118,12 @@ ColumnLayout {
 		}
 
 		StateLayer {
-			cursorShape: Qt.IBeamCursor
-			hoverEnabled: false
-
-			onClicked: {
+			function onClicked(): void {
 				parent.forceActiveFocus();
 			}
+
+			cursorShape: Qt.IBeamCursor
+			hoverEnabled: false
 		}
 
 		RowLayout {
@@ -179,11 +179,11 @@ ColumnLayout {
 				radius: Appearance.rounding.full
 
 				StateLayer {
-					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-
-					onClicked: {
+					function onClicked(): void {
 						root.greeter.submit();
 					}
+
+					color: root.greeter.buffer && !root.greeter.launching ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 				}
 
 				MaterialIcon {

Greeter/Components/Anim.qml

@@ -2,62 +2,7 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	enum Type {
-		StandardSmall = 0,
-		Standard,
-		StandardLarge,
-		StandardExtraLarge,
-		EmphasizedSmall,
-		Emphasized,
-		EmphasizedLarge,
-		EmphasizedExtraLarge,
-		FastSpatial,
-		DefaultSpatial,
-		SlowSpatial,
-		FastEffects,
-		DefaultEffects,
-		SlowEffects
-	}
-
-	property int type: Anim.DefaultSpatial
-
-	duration: {
-		if (type < Anim.StandardSmall || type > Anim.SlowEffects)
-			return Appearance.anim.durations.normal;
-
-		if (type === Anim.FastSpatial)
-			return Appearance.anim.durations.expressiveFastSpatial;
-		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.durations.expressiveDefaultSpatial;
-		if (type === Anim.SlowSpatial)
-			return Appearance.anim.durations.large;
-		if (type === Anim.FastEffects)
-			return Appearance.anim.durations.expressiveFastEffects;
-		if (type === Anim.DefaultEffects)
-			return Appearance.anim.durations.expressiveEffects;
-		if (type === Anim.SlowEffects)
-			return Appearance.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]];
-	}
-	easing.bezierCurve: {
-		if (type === Anim.FastSpatial)
-			return Appearance.anim.curves.expressiveFastSpatial;
-		if (type === Anim.DefaultSpatial)
-			return Appearance.anim.curves.expressiveDefaultSpatial;
-		if (type === Anim.SlowSpatial)
-			return Appearance.anim.curves.expressiveSlowSpatial;
-		if (type === Anim.FastEffects)
-			return Appearance.anim.curves.expressiveFastEffects;
-		if (type === Anim.DefaultEffects)
-			return Appearance.anim.curves.expressiveDefaultEffects;
-		if (type === Anim.SlowEffects)
-			return Appearance.anim.curves.expressiveSlowEffects;
-
-		if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
-			return Appearance.anim.curves.emphasized;
-		return Appearance.anim.curves.standard;
-	}
+	duration: MaterialEasing.standardTime
+	easing.bezierCurve: MaterialEasing.standard
+	easing.type: Easing.BezierSpline
 }

Greeter/Components/CollapsibleSection.qml

@@ -59,15 +59,15 @@ ColumnLayout {
 		}
 
 		StateLayer {
+			function onClicked(): void {
+				root.toggleRequested();
+				root.expanded = !root.expanded;
+			}
+
 			anchors.fill: parent
 			color: DynamicColors.palette.m3onSurface
 			radius: Appearance.rounding.normal
 			showHoverBackground: false
-
-			onClicked: {
-				root.toggleRequested();
-				root.expanded = !root.expanded;
-			}
 		}
 	}
 

Greeter/Components/CustomButton.qml

@@ -23,10 +23,10 @@ Button {
 	}
 
 	StateLayer {
-		radius: control.radius
-
-		onClicked: {
+		function onClicked(): void {
 			control.clicked();
 		}
+
+		radius: control.radius
 	}
 }

Greeter/Components/CustomRadioButton.qml

@@ -33,13 +33,13 @@ RadioButton {
 		}
 
 		StateLayer {
+			function onClicked(): void {
+				root.click();
+			}
+
 			anchors.margins: -7
 			color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
 			z: -1
-
-			onClicked: {
-				root.click();
-			}
 		}
 
 		CustomRect {

Greeter/Components/CustomSlider.qml

@@ -1,174 +1,45 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Templates
-import ZShell.Components
-import ZShell
-import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	property bool animateWave
-	property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
-	property real filledWidth
-	property real pos: visualPosition
-	property int waveDuration: 1000
-	property real waveFrequency: 6
-	property bool wavy
-
-	signal interaction(v: real)
-
-	implicitHeight: 12
-	implicitWidth: 200
-
-	contentItem: Item {
-		anchors.fill: parent
-
+	background: Item {
 		CustomRect {
-			id: remaining
-
-			anchors.left: handle.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Appearance.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: Appearance.rounding.small
-			topLeftRadius: Appearance.rounding.extraSmall / 2
-		}
-
-		CustomRect {
-			anchors.right: parent.right
-			anchors.rightMargin: 4 * remaining.opacity
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: 4 * remaining.opacity
-			implicitWidth: implicitHeight
-			opacity: remaining.opacity
-			radius: Appearance.rounding.full
-		}
-
-		CustomRect {
-			id: handle
-
-			anchors.left: filled.right
-			anchors.leftMargin: Appearance.spacing.extraSmall
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: {
-				const mult = parent.height <= 12 ? 3 : 1.2;
-				const pressMult = parent.height <= 12 ? 4 : 1.5;
-				return parent.height * (mouse.pressed ? pressMult : mult);
-			}
-			implicitWidth: 4
-			radius: Appearance.rounding.full
-
-			Behavior on implicitHeight {
-				Anim {
-					type: Anim.FastSpatial
-				}
-			}
-		}
-
-		Loader {
-			id: filled
-
+			anchors.bottom: parent.bottom
 			anchors.left: parent.left
-			anchors.verticalCenter: parent.verticalCenter
-			asynchronous: true
-			sourceComponent: root.wavy ? waveComp : lineComp
+			anchors.top: parent.top
+			bottomRightRadius: root.implicitHeight / 6
+			color: DynamicColors.palette.m3primary
+			implicitWidth: root.handle.x - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topRightRadius: root.implicitHeight / 6
 		}
 
-		Component {
-			id: lineComp
-
-			CustomRect {
-				bottomRightRadius: Appearance.rounding.extraSmall / 2
-				color: root.fgColor
-				implicitHeight: root.height
-				implicitWidth: root.filledWidth
-				radius: Appearance.rounding.small
-				topRightRadius: Appearance.rounding.extraSmall / 2
-			}
-		}
-
-		Component {
-			id: waveComp
-
-			WavyLine {
-				color: root.fgColor
-				frequency: root.waveFrequency
-				fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
-				implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
-				implicitWidth: root.filledWidth
-				lineWidth: root.height * 0.7
-				startX: x
-
-				Behavior on color {
-					CAnim {
-					}
-				}
-				Anim on waveProgress {
-					duration: root.waveDuration
-					easing.type: Easing.Linear
-					from: 0
-					loops: Animation.Infinite
-					paused: !root.animateWave
-					running: true
-					to: 1
-				}
-			}
+		CustomRect {
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.top: parent.top
+			bottomLeftRadius: root.implicitHeight / 6
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topLeftRadius: root.implicitHeight / 6
 		}
 	}
-	Behavior on filledWidth {
-		id: widthBehavior
-
-		Anim {
-		}
-	}
-
-	Component.onCompleted: filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos)
-
-	Binding {
-		id: posBinding
-
-		property: "pos"
-		target: root
-		value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
-		when: mouse.pressed
-	}
-
-	MouseArea {
-		id: mouse
-
-		property real dragMovement
-		property real pressStartPos
-		property real pressStartX
-
-		anchors.left: parent.left
-		anchors.right: parent.right
+	handle: CustomRect {
 		anchors.verticalCenter: parent.verticalCenter
-		implicitHeight: handle.implicitHeight
-		preventStealing: true
+		color: DynamicColors.palette.m3primary
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: Appearance.rounding.full
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		onPositionChanged: e => {
-			dragMovement = (e.x - pressStartX) / width;
-			root.interaction(posBinding.value);
-		}
-		onPressed: e => {
-			widthBehavior.enabled = false;
-			pressStartX = e.x;
-			pressStartPos = root.visualPosition;
-		}
-		onReleased: e => {
-			root.interaction(posBinding.value);
-			widthBehavior.enabled = true;
-			dragMovement = 0;
+		MouseArea {
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
 		}
 	}
 }

Greeter/Components/CustomSpinBox.qml

@@ -28,7 +28,6 @@ RowLayout {
 	CustomTextField {
 		id: textField
 
-		color: root.enabled ? DynamicColors.palette.m3onSurface : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
 		leftPadding: Appearance.padding.normal
@@ -37,7 +36,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -86,7 +85,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -94,9 +93,7 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			color: DynamicColors.palette.m3onPrimary
-
-			onClicked: {
+			function onClicked(): void {
 				let newValue = Math.min(root.max, root.value + root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -105,6 +102,9 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
+
+			color: DynamicColors.palette.m3onPrimary
+
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -113,13 +113,13 @@ RowLayout {
 			id: upIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
+		color: DynamicColors.palette.m3primary
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,9 +127,7 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			color: DynamicColors.palette.m3onPrimary
-
-			onClicked: {
+			function onClicked(): void {
 				let newValue = Math.max(root.min, root.value - root.step);
 				// Round to avoid floating point precision errors
 				const decimals = root.step < 1 ? Math.max(1, Math.ceil(-Math.log10(root.step))) : 0;
@@ -138,6 +136,9 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
+
+			color: DynamicColors.palette.m3onPrimary
+
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -146,7 +147,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
+			color: DynamicColors.palette.m3onPrimary
 			text: "keyboard_arrow_down"
 		}
 	}

Greeter/Components/CustomSplitButton.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
 import qs.Config
+import qs.Helpers
 
 Row {
 	id: root
@@ -11,46 +12,66 @@ Row {
 	}
 
 	property alias active: menu.active
-	property color colour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
+	property color color: type == CustomSplitButton.Filled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3secondaryContainer
 	property bool disabled
-	property color disabledColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
-	property color disabledTextColour: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
-	readonly property alias expandBtn: expandBtn
+	property color disabledColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
+	property color disabledTextColor: Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
 	property alias expanded: menu.expanded
 	property string fallbackIcon
 	property string fallbackText
-	property real horizontalPadding: Appearance.padding.larger
-	readonly property alias iconLabel: iconLabel
-	readonly property alias label: label
-	readonly property alias menu: menu
+	property real horizontalPadding: Appearance.padding.normal
+	property alias iconLabel: iconLabel
+	property alias label: label
+	property alias menu: menu
 	property alias menuItems: menu.items
 	property bool menuOnTop
-	property real minLeftWidth
-	readonly property alias stateLayer: stateLayer
-	property color textColour: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
-	readonly property alias textRow: textRow
+	property alias stateLayer: stateLayer
+	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
 	property int type: CustomSplitButton.Filled
-	property real verticalPadding: Appearance.padding.small
+	property real verticalPadding: Appearance.padding.smaller
 
-	spacing: Math.floor(Appearance.spacing.extraSmall)
+	function closeDropdown(): void {
+		SettingsDropdowns.close(menu);
+	}
+
+	function openDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.open(menu, root);
+	}
+
+	function toggleDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.toggle(menu, root);
+	}
+
+	spacing: Math.floor(Appearance.spacing.small / 2)
+
+	onExpandedChanged: {
+		if (!expanded)
+			SettingsDropdowns.forget(menu);
+	}
 
 	CustomRect {
 		bottomRightRadius: Appearance.rounding.small / 2
-		color: root.disabled ? root.disabledColour : root.colour
+		color: root.disabled ? root.disabledColor : root.color
 		implicitHeight: expandBtn.implicitHeight
-		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
+		implicitWidth: textRow.implicitWidth + root.horizontalPadding * 2
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
 		topRightRadius: Appearance.rounding.small / 2
 
 		StateLayer {
 			id: stateLayer
 
-			bottomRightRadius: parent.bottomRightRadius
-			color: root.textColour
-			disabled: root.disabled
-			topRightRadius: parent.topRightRadius
+			function onClicked(): void {
+				root.active?.clicked();
+			}
 
-			onClicked: root.active?.clicked()
+			color: root.textColor
+			disabled: root.disabled
+			rect.bottomRightRadius: parent.bottomRightRadius
+			rect.topRightRadius: parent.topRightRadius
 		}
 
 		RowLayout {
@@ -65,7 +86,7 @@ Row {
 
 				Layout.alignment: Qt.AlignVCenter
 				animate: true
-				color: root.disabled ? root.disabledTextColour : root.textColour
+				color: root.disabled ? root.disabledTextColor : root.textColor
 				fill: 1
 				text: root.active?.activeIcon ?? root.fallbackIcon
 			}
@@ -77,12 +98,12 @@ Row {
 				Layout.preferredWidth: implicitWidth
 				animate: true
 				clip: true
-				color: root.disabled ? root.disabledTextColour : root.textColour
+				color: root.disabled ? root.disabledTextColor : root.textColor
 				text: root.active?.activeText ?? root.fallbackText
 
 				Behavior on Layout.preferredWidth {
 					Anim {
-						type: Anim.Emphasized
+						easing.bezierCurve: Appearance.anim.curves.emphasized
 					}
 				}
 			}
@@ -95,7 +116,7 @@ Row {
 		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Appearance.rounding.scale) : Appearance.rounding.small / 2
 
 		bottomLeftRadius: rad
-		color: root.disabled ? root.disabledColour : root.colour
+		color: root.disabled ? root.disabledColor : root.color
 		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
 		implicitWidth: implicitHeight
 		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
@@ -109,12 +130,14 @@ Row {
 		StateLayer {
 			id: expandStateLayer
 
-			color: root.textColour
+			function onClicked(): void {
+				root.toggleDropdown();
+			}
+
+			color: root.textColor
 			disabled: root.disabled
 			rect.bottomLeftRadius: parent.bottomLeftRadius
 			rect.topLeftRadius: parent.topLeftRadius
-
-			onClicked: root.expanded = !root.expanded
 		}
 
 		MaterialIcon {
@@ -122,7 +145,7 @@ Row {
 
 			anchors.centerIn: parent
 			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: root.disabled ? root.disabledTextColour : root.textColour
+			color: root.disabled ? root.disabledTextColor : root.textColor
 			rotation: root.expanded ? 180 : 0
 			text: "expand_more"
 
@@ -135,14 +158,24 @@ Row {
 				}
 			}
 		}
-	}
 
-	Menu {
-		id: menu
+		Menu {
+			id: menu
 
-		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
-		attachTo: expandBtn
-		marginY: Appearance.spacing.small * (root.menuOnTop ? -1 : 1)
-		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.right: parent.right
+			anchors.top: parent.bottom
+			anchors.topMargin: Appearance.spacing.small
+
+			states: State {
+				when: root.menuOnTop
+
+				AnchorChanges {
+					anchors.bottom: expandBtn.top
+					anchors.top: undefined
+					target: menu
+				}
+			}
+		}
 	}
 }

Greeter/Components/CustomSplitButtonRow.qml

@@ -8,32 +8,19 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property alias buttonAlias: splitButton
+	property bool enabled: true
 	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
+	Layout.fillWidth: true
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
 	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 {
-		}
-	}
+	z: root.expanded ? expandedZ : -1
 
 	RowLayout {
 		id: row
@@ -49,6 +36,7 @@ Item {
 			color: root.enabled ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onSurfaceVariant
 			font.pointSize: Appearance.font.size.larger
 			text: root.label
+			z: root.expanded ? root.expandedZ : -1
 		}
 
 		CustomSplitButton {
@@ -56,13 +44,14 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: 2
+			z: root.expanded ? root.expandedZ : -1
 
 			menu.onItemSelected: item => {
 				root.selected(item);
+				splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.expanded = !splitButton.expanded;
+				splitButton.toggleDropdown();
 			}
 		}
 	}

Greeter/Components/CustomSwitch.qml

@@ -1,6 +1,6 @@
 import QtQuick
-import QtQuick.Shapes
 import QtQuick.Templates
+import QtQuick.Shapes
 import qs.Config
 
 Switch {
@@ -12,41 +12,38 @@ Switch {
 	implicitWidth: implicitIndicatorWidth
 
 	indicator: CustomRect {
-		color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-		implicitHeight: Appearance.font.size.medium + Appearance.padding.normal * 2
+		color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
+		implicitHeight: 13 + 7 * 2
 		implicitWidth: implicitHeight * 1.7
 		radius: Appearance.rounding.full
 
 		CustomRect {
-			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.2 : implicitHeight
+			readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
 
 			anchors.verticalCenter: parent.verticalCenter
-			color: root.checked && root.enabled ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
-			implicitHeight: parent.implicitHeight - Appearance.padding.extraSmall
+			color: root.checked ? DynamicColors.palette.m3onPrimary : DynamicColors.layer(DynamicColors.palette.m3outline, root.cLayer + 1)
+			implicitHeight: parent.implicitHeight - 10
 			implicitWidth: nonAnimWidth
 			radius: Appearance.rounding.full
-			x: root.checked ? parent.implicitWidth - nonAnimWidth - Appearance.padding.extraSmall / 2 : Appearance.padding.extraSmall / 2
+			x: root.checked ? parent.implicitWidth - nonAnimWidth - 10 / 2 : 10 / 2
 
 			Behavior on implicitWidth {
 				Anim {
-					type: Anim.FastSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
-					type: Anim.FastSpatial
 				}
 			}
 
 			CustomRect {
 				anchors.fill: parent
-				color: root.checked && root.enabled ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
+				color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 				opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
 				radius: parent.radius
 
 				Behavior on opacity {
 					Anim {
-						type: Anim.DefaultEffects
 					}
 				}
 			}
@@ -66,14 +63,14 @@ Switch {
 				}
 				property point end2: {
 					if (root.pressed)
-						return Qt.point(width * 0.8, height / 2);
+						return Qt.point(width, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.85, height * 0.2);
 					return Qt.point(width * 0.85, height * 0.15);
 				}
 				property point start1: {
 					if (root.pressed)
-						return Qt.point(width * 0.2, height / 2);
+						return Qt.point(width * 0.1, height / 2);
 					if (root.checked)
 						return Qt.point(width * 0.15, height / 2);
 					return Qt.point(width * 0.15, height * 0.15);
@@ -91,7 +88,7 @@ Switch {
 
 				anchors.centerIn: parent
 				asynchronous: true
-				height: parent.implicitHeight - Appearance.padding.larger
+				height: parent.implicitHeight - Appearance.padding.small * 2
 				preferredRendererType: Shape.CurveRenderer
 				width: height
 
@@ -113,11 +110,11 @@ Switch {
 				}
 
 				ShapePath {
-					capStyle: ShapePath.RoundCap
+					capStyle: Appearance.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: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3surfaceContainerHighest
 					strokeWidth: Appearance.font.size.larger * 0.15
 
 					Behavior on strokeColor {
@@ -151,7 +148,8 @@ Switch {
 	}
 
 	component PropAnim: PropertyAnimation {
-		duration: Appearance.anim.durations.expressiveFastSpatial
-		easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+		duration: MaterialEasing.expressiveEffectsTime
+		easing.bezierCurve: MaterialEasing.expressiveEffects
+		easing.type: Easing.BezierSpline
 	}
 }

Greeter/Components/CustomText.qml

@@ -15,7 +15,6 @@ Text {
 	color: DynamicColors.palette.m3onSurface
 	font.family: Appearance.font.family.sans
 	font.pointSize: Appearance.font.size.normal
-	linkColor: DynamicColors.palette.m3onPrimaryFixedVariant
 	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 

Greeter/Components/Elevation.qml

@@ -1,6 +1,6 @@
+import qs.Config
 import QtQuick
 import QtQuick.Effects
-import qs.Config
 
 RectangularShadow {
 	property real dp: [0, 1, 3, 6, 8, 12][level]
@@ -13,7 +13,6 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
-			type: Anim.SlowEffects
 		}
 	}
 }

Greeter/Components/IconButton.qml

@@ -41,11 +41,12 @@ CustomRect {
 	color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
 	implicitHeight: label.implicitHeight + padding * 2
 	implicitWidth: implicitHeight
-	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
+	radius: internalChecked ? 6 : implicitHeight / 2 * Math.min(1, 1)
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
+
 		}
 	}
 
@@ -54,14 +55,14 @@ CustomRect {
 	StateLayer {
 		id: stateLayer
 
-		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
-		disabled: root.disabled
-
-		onClicked: {
+		function onClicked(): void {
 			if (root.toggle)
 				root.internalChecked = !root.internalChecked;
 			root.clicked();
 		}
+
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
 	}
 
 	MaterialIcon {

Greeter/Components/MarqueeText.qml

@@ -102,7 +102,6 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
-				font.pointSize: elideText.font.pointSize
 				text: elideText.text
 			}
 
@@ -112,7 +111,6 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
-				font.pointSize: elideText.font.pointSize
 				text: t1.text
 				x: t1.width + root.gap
 			}

Greeter/Components/Menu.qml

@@ -2,169 +2,109 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 import qs.Config
-import qs.Drawers
 
-MouseArea {
+Elevation {
 	id: root
 
-	enum Side {
-		Top,
-		Bottom,
-		Left,
-		Right
-	}
-
 	property MenuItem active: items[0] ?? null
-	property int attachSideX: Menu.Right
-	property int attachSideY: Menu.Bottom
-	required property Item attachTo
 	property bool expanded
 	property list<MenuItem> items
-	property real marginX
-	property real marginY
-	property int thisSideX: Menu.Right
-	property int thisSideY: Menu.Top
 
 	signal itemSelected(item: MenuItem)
 
-	anchors.fill: parent
-	enabled: expanded
-	layer.enabled: opacity < 1
-	opacity: expanded ? 1 : 0
-	parent: {
-		const win = QsWindow.window;
-		const contentWin = win as Windows;
-		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-	}
+	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
+	implicitWidth: Math.max(200, column.implicitWidth)
+	level: 2
+	opacity: root.expanded ? 1 : 0
+	radius: Appearance.rounding.normal
 
+	Behavior on implicitHeight {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
 	Behavior on opacity {
 		Anim {
-			type: Anim.DefaultEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
 		}
 	}
 
-	onClicked: expanded = false
+	CustomClippingRect {
+		anchors.fill: parent
+		color: DynamicColors.palette.m3surfaceContainer
+		radius: parent.radius
 
-	TransformWatcher {
-		id: watcher
+		ColumnLayout {
+			id: column
 
-		a: root.parent
-		b: root.attachTo
-	}
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			spacing: 5
 
-	Elevation {
-		id: menu
+			Repeater {
+				model: root.items
 
-		implicitHeight: column.implicitHeight + column.anchors.margins * 2
-		implicitWidth: Math.max(200, column.implicitWidth + column.anchors.margins * 2)
-		level: 2
-		radius: Appearance.rounding.medium
-		x: {
-			watcher.transform;
-			const item = root.attachTo;
-			let off = root.attachSideX === Menu.Left ? 0 : item.width;
-			if (root.thisSideX === Menu.Right)
-				off -= width;
-			return item.mapToItem(root.parent, off, 0).x + root.marginX;
-		}
-		y: {
-			watcher.transform;
-			const item = root.attachTo;
-			let off = root.attachSideY === Menu.Top ? 0 : item.height;
-			if (root.thisSideY === Menu.Bottom)
-				off -= height;
-			return item.mapToItem(root.parent, 0, off).y + root.marginY;
-		}
+				CustomRect {
+					id: item
 
-		transform: Scale {
-			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
-			yScale: root.expanded ? 1 : 0.1
+					readonly property bool active: modelData === root.active
+					required property int index
+					required property MenuItem modelData
 
-			Behavior on yScale {
-				Anim {
-				}
-			}
-		}
-
-		CustomRect {
-			anchors.fill: parent
-			color: DynamicColors.palette.m3surfaceContainerLow
-			radius: parent.radius
-
-			ColumnLayout {
-				id: column
-
-				anchors.fill: parent
-				anchors.margins: Appearance.padding.extraSmall
-				spacing: Appearance.spacing.extraSmall
-
-				Repeater {
-					id: repeater
-
-					model: root.items
+					Layout.fillWidth: true
+					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
+					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
 
 					CustomRect {
-						id: item
-
-						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)
-						implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.larger * 2
-						implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.larger * 2
-						radius: Appearance.rounding.small
-
-						Behavior on radius {
-							Anim {
-							}
-						}
+						anchors.fill: parent
+						anchors.leftMargin: Appearance.padding.small
+						anchors.rightMargin: Appearance.padding.small
+						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
+						radius: Appearance.rounding.normal - Appearance.padding.small
 
 						StateLayer {
-							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
-							disabled: !root.expanded
-
-							onClicked: {
+							function onClicked(): void {
 								root.itemSelected(item.modelData);
 								root.active = item.modelData;
-								item.modelData.clicked();
 								root.expanded = false;
 							}
+
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+						}
+					}
+
+					RowLayout {
+						id: menuOptionRow
+
+						anchors.fill: parent
+						anchors.margins: Appearance.padding.normal
+						spacing: Appearance.spacing.small
+
+						MaterialIcon {
+							Layout.alignment: Qt.AlignVCenter
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant
+							text: item.modelData.icon
 						}
 
-						RowLayout {
-							id: menuOptionRow
+						CustomText {
+							Layout.alignment: Qt.AlignVCenter
+							Layout.fillWidth: true
+							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+							text: item.modelData.text
+						}
 
-							anchors.fill: parent
-							anchors.margins: Appearance.padding.larger
-							spacing: Appearance.spacing.small
+						Loader {
+							Layout.alignment: Qt.AlignVCenter
+							active: item.modelData.trailingIcon.length > 0
+							visible: active
 
-							MaterialIcon {
-								Layout.alignment: Qt.AlignVCenter
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
-								text: item.modelData.icon
-							}
-
-							CustomText {
-								Layout.alignment: Qt.AlignVCenter
-								Layout.fillWidth: true
-								color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
-								text: item.modelData.text
-							}
-
-							Loader {
-								Layout.alignment: Qt.AlignVCenter
-								active: item.modelData.trailingIcon.length > 0
-								asynchronous: true
-								visible: active
-
-								sourceComponent: MaterialIcon {
-									color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurfaceVariant
-									text: item.modelData.trailingIcon
-								}
+							sourceComponent: MaterialIcon {
+								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+								text: item.modelData.trailingIcon
 							}
 						}
 					}

Greeter/Components/PathViewMenu.qml

@@ -29,7 +29,6 @@ Elevation {
 	level: root.expanded ? 2 : 0
 	radius: itemHeight / 2
 	visible: implicitHeight > 0
-	z: root.expanded ? 100 : 0
 
 	Behavior on implicitHeight {
 		Anim {
@@ -69,7 +68,6 @@ Elevation {
 		anchors.fill: parent
 		color: DynamicColors.palette.m3surfaceContainer
 		radius: parent.radius
-		z: root.z
 
 		// Main visible spinner: normal/outside text color
 		PathView {