mute cmake install output

Reviewed-on: #137
Reviewed-by: zach <zach@brohn.se>

.clang-format

@@ -0,0 +1,58 @@
+---
+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

@@ -0,0 +1,27 @@
+---
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,62 @@
+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/js-ts.yml

@@ -1,10 +1,10 @@
-name: Lint & Format (JS/TS)
+name: JS/TS
 
 on:
     pull_request:
 
 jobs:
-    lint-format:
+    fmt:
         runs-on: alpine
         container: node:26-alpine
 
@@ -18,7 +18,6 @@ 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
@@ -26,6 +25,19 @@ 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-rust.yml

@@ -1,72 +0,0 @@
-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/python.yml

@@ -4,7 +4,7 @@ on:
     pull_request:
 
 jobs:
-    lint-format:
+    fmt:
         runs-on: alpine
         container: node:26-alpine
 
@@ -23,11 +23,28 @@ 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
@@ -63,3 +80,30 @@ 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/rust.yml

@@ -0,0 +1,152 @@
+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,3 +13,5 @@ uv.lock
 .qtcreator/
 dist/
 **/target/
+**/test-plugins/
+**/Charts/

CMakeLists.txt

@@ -1,36 +1,163 @@
 cmake_minimum_required(VERSION 3.19)
 
-project(ZShell)
+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}")
 
 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" CACHE STRING "Modules to build/install")
+set(ENABLE_MODULES "plugin;shell;m3shapes" 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
+	-Wall -Wextra -Wpedantic -Wshadow -Wconversion
-    -Wold-style-cast -Wnull-dereference -Wdouble-promotion
+	-Wold-style-cast -Wnull-dereference -Wdouble-promotion
-    -Wformat=2 -Wfloat-equal -Woverloaded-virtual
+	-Wformat=2 -Wfloat-equal -Woverloaded-virtual
-    -Wsign-conversion -Wredundant-decls -Wswitch
+	-Wsign-conversion -Wredundant-decls -Wswitch
-    -Wunreachable-code
+	-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}")
+		install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
-    endforeach()
+	endforeach()
 
 	# Disable watching for changes
 	file(READ shell.qml SHELL_QML)
@@ -41,3 +168,22 @@ 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

@@ -0,0 +1,51 @@
+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,7 +2,62 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	duration: Appearance.anim.durations.normal
+	enum Type {
-	easing.bezierCurve: Appearance.anim.curves.standard
+		StandardSmall = 0,
-	easing.type: Easing.BezierSpline
+		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;
+	}
 }

Components/BaseStyledSlider.qml

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

@@ -0,0 +1,87 @@
+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 bgColour: DynamicColors.palette.m3secondaryContainer
+	property color bgColor: DynamicColors.palette.m3secondaryContainer
-	property color fgColour: DynamicColors.palette.m3primary
+	property color fgColor: 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
-		bgColour: root.bgColour
+		bgColor: root.bgColor
-		fgColour: root.fgColour
+		fgColor: root.fgColor
 		padding: root.padding
 		rotation: manager.rotation
 		startAngle: manager.startFraction * 360
@@ -73,7 +73,6 @@ BusyIndicator {
 
 	CircularIndicatorManager {
 		id: manager
-
 	}
 
 	NumberAnimation {

Components/CircularProgress.qml

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

Components/CollapsibleSection.qml

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

Components/CustomAudioSlider.qml

@@ -1,70 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

Components/CustomComboBox.qml

@@ -1,169 +0,0 @@
-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,13 +1,33 @@
 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,13 +1,33 @@
 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

@@ -0,0 +1,237 @@
+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,49 +1,25 @@
-import qs.Config
 import QtQuick
 import QtQuick.Templates
+import qs.Helpers
+import qs.Config
 
 ScrollBar {
 	id: root
 
-	property bool _updatingFromFlickable: false
+	readonly property real effectiveSize: Math.max(nonAnimHeight, root.minimumSize)
-	property bool _updatingFromUser: false
+	readonly property real effectiveTravel: Math.max(0, 1 - root.effectiveSize)
-	property bool animating
 	required property Flickable flickable
-	property real nonAnimPosition
+	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 bool shouldBeActive
+	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
 
-	implicitWidth: 8
+	enabled: !Visibilities.getForActive().isDrawing
+	implicitWidth: Appearance.padding.extraSmall * 2
 
-	contentItem: CustomRect {
+	contentItem: Item {
-		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
@@ -52,58 +28,15 @@ 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 = true;
+			shouldBeActive = hovered;
 		else
-			shouldBeActive = flickable.moving;
+			hideDelay.restart();
-	}
-
-	// 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(): void {
+		function onMovingChanged() {
 			if (root.flickable.moving)
 				root.shouldBeActive = true;
 			else
@@ -113,6 +46,57 @@ 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
 
@@ -124,66 +108,55 @@ ScrollBar {
 	CustomMouseArea {
 		id: fullMouse
 
-		function onWheel(event: WheelEvent): void {
+		property real pressOffset: 0
-			root.animating = true;
+
-			root._updatingFromUser = true;
+		function contentYFromThumbTop(thumbTop) {
-			let newPos = root.nonAnimPosition;
+			var visualPos = root.effectiveTravel > 0 ? thumbTop / root.travelScale : 0;
-			if (event.angleDelta.y > 0)
+
-				newPos = Math.max(0, root.nonAnimPosition - 0.1);
+			return root.reversed ? (visualPos - 1) * root.flickable.contentHeight : visualPos * root.flickable.contentHeight;
-			else if (event.angleDelta.y < 0)
+		}
-				newPos = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
+
-			root.nonAnimPosition = newPos;
+		function updateFromEvent(event) {
-			// Update flickable position
+			var posInTrack = event.y / root.height;
-			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			var thumbTop = posInTrack - pressOffset;
-			if (root.flickable) {
+			thumbTop = Math.max(0, Math.min(root.effectiveTravel, thumbTop));
-				const contentHeight = root.flickable.contentHeight;
+
-				const height = root.flickable.height;
+			root.flickable.contentY = contentYFromThumbTop(thumbTop);
-				if (contentHeight > height) {
+		}
-					const maxContentY = contentHeight - height;
+
-					const maxPos = 1 - root.size;
+		function visualThumbTop() {
-					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+			const visualPos = root.reversed ? (1 + root.nonAnimY) : root.nonAnimY;
-					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+			return visualPos * root.travelScale;
-				}
-			}
 		}
 
 		anchors.fill: parent
+		cursorShape: undefined
+		hoverEnabled: true
 		preventStealing: true
 
 		onPositionChanged: event => {
-			root._updatingFromUser = true;
+			if (pressed)
-			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+				updateFromEvent(event);
-			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 => {
-			root.animating = true;
+			var currentTop = visualThumbTop();
-			root._updatingFromUser = true;
+			var currentBottom = currentTop + root.effectiveSize;
-			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			var clickPos = event.y / root.height;
-			root.nonAnimPosition = newPos;
+
-			// Update flickable position
+			var clickedInsideThumb = clickPos >= currentTop && clickPos <= currentBottom;
-			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+
-			if (root.flickable) {
+			if (clickedInsideThumb) {
-				const contentHeight = root.flickable.contentHeight;
+				pressOffset = clickPos - currentTop;
-				const height = root.flickable.height;
+			} else {
-				if (contentHeight > height) {
+				pressOffset = root.effectiveSize / 2;
-					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,47 +1,201 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
+import ZShell.Components
+import ZShell
+import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	property color color: DynamicColors.palette.m3primary
+	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
 
-	background: Item {
 		CustomRect {
-			anchors.bottom: parent.bottom
+			id: remaining
-			anchors.left: parent.left
+
-			anchors.top: parent.top
+			anchors.left: handle.right
-			bottomRightRadius: root.implicitHeight / 6
+			anchors.leftMargin: Appearance.spacing.extraSmall
-			color: root.color
+			anchors.right: parent.right
-			implicitWidth: root.handle.x - root.implicitHeight / 2
+			anchors.verticalCenter: parent.verticalCenter
-			radius: Appearance.rounding.full
+			bottomLeftRadius: Appearance.rounding.extraSmall / 2
-			topRightRadius: root.implicitHeight / 6
+			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.bottom: parent.bottom
 			anchors.right: parent.right
-			anchors.top: parent.top
+			anchors.rightMargin: 4 * remaining.opacity
-			bottomLeftRadius: root.implicitHeight / 6
+			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: root.fgColor
-			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			implicitHeight: 4 * remaining.opacity
+			implicitWidth: implicitHeight
+			opacity: remaining.opacity
 			radius: Appearance.rounding.full
-			topLeftRadius: root.implicitHeight / 6
+		}
+
+		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.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 {
+				}
+			}
+		}
+
+		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
+				}
+			}
 		}
 	}
-	handle: CustomRect {
+	Behavior on filledWidth {
-		anchors.verticalCenter: parent.verticalCenter
+		id: widthBehavior
-		color: root.color
-		implicitHeight: 15
-		implicitWidth: 5
-		radius: Appearance.rounding.full
-		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		MouseArea {
+		Anim {
-			acceptedButtons: Qt.NoButton
+		}
-			anchors.fill: parent
+	}
-			cursorShape: Qt.PointingHandCursor
+
+	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
+		anchors.verticalCenter: parent.verticalCenter
+		implicitHeight: handle.implicitHeight
+		preventStealing: true
+
+		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;
 		}
 	}
 }

Components/CustomSpinBox.qml

@@ -1,169 +1,132 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
-import QtQuick.Layouts
+import QtQuick.Templates
 import qs.Config
 
-RowLayout {
+DoubleSpinBox {
 	id: root
 
-	property string displayText: root.value.toString()
+	property int cLayer: 1
-	property bool isEditing: false
+	property int repeatDecay: 50
-	property real max: Infinity
+	property int repeatRate: 400
-	property real min: -Infinity
-	property alias repeatRate: timer.interval
-	property real step: 1
-	property real value
 
-	signal valueModified(value: real)
+	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();
+	}
 
+	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
 
-	onValueChanged: {
+	contentItem: TextFieldBase {
-		if (!root.isEditing) {
+		horizontalAlignment: TextField.AlignHCenter
-			root.displayText = root.value.toString();
+		implicitWidth: 65
-		}
-	}
-
-	CustomTextField {
-		id: textField
-
-		implicitHeight: upButton.implicitHeight
 		inputMethodHints: Qt.ImhFormattedNumbersOnly
-		leftPadding: Appearance.padding.normal
+		leftPadding: Appearance.padding.larger
-		padding: Appearance.padding.small
+		readOnly: !root.editable
-		rightPadding: Appearance.padding.normal
+		rightPadding: Appearance.padding.larger
-		text: root.isEditing ? text : root.displayText
+		text: root.textFromValue(root.value, root.locale)
+		validator: root.validator
 
 		background: CustomRect {
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer)
-			implicitWidth: 100
+			radius: Appearance.rounding.extraSmall
-			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
 
-	CustomRect {
+		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 {
 		id: upButton
 
-		color: DynamicColors.palette.m3primary
+		anchors.right: parent.right
-		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
+		bottomLeftRadius: pressed ? Appearance.rounding.small : Appearance.rounding.extraSmall
-		implicitWidth: implicitHeight
+		color: enabled ? DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, root.cLayer) : disabledColor
-		radius: Appearance.rounding.full
+		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
 
-		StateLayer {
+		Behavior on bottomLeftRadius {
-			id: upState
+			Anim {
-
+				type: Anim.DefaultEffects
-			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 {
-		MaterialIcon {
+			Anim {
-			id: upIcon
+				type: Anim.DefaultEffects
-
-			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
-			text: "keyboard_arrow_up"
-		}
-	}
-
-	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()
 		}
-
+		Behavior on topLeftRadius {
-		MaterialIcon {
+			Anim {
-			id: downIcon
+				type: Anim.DefaultEffects
-
+			}
-			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
-			text: "keyboard_arrow_down"
 		}
 	}
 
 	Timer {
 		id: timer
 
-		interval: 100
+		interval: root.repeatRate
 		repeat: true
+		running: upButton.pressed || downButton.pressed
 		triggeredOnStart: true
 
+		onRunningChanged: {
+			if (!running)
+				interval = root.repeatRate;
+		}
 		onTriggered: {
-			if (upState.pressed)
+			if (upButton.pressed)
-				upState.onClicked();
+				root.increase();
-			else if (downState.pressed)
+			else if (downButton.pressed)
-				downState.onClicked();
+				root.decrease();
+			if (interval > root.repeatDecay)
+				interval -= root.repeatDecay;
 		}
 	}
 }

Components/CustomSplitButton.qml

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

Components/CustomSplitButtonRow.qml

@@ -9,7 +9,6 @@ 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
@@ -25,7 +24,7 @@ Item {
 	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
 	opacity: shouldBeActive ? 1 : 0
 	scale: shouldBeActive ? 1 : 0.8
-	z: root.expanded ? expandedZ : -1
+	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
 
 	Behavior on opacity {
 		Anim {
@@ -50,7 +49,6 @@ 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 {
@@ -58,14 +56,13 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: root.expanded ? root.expandedZ : -1
+			z: 2
 
 			menu.onItemSelected: item => {
 				root.selected(item);
-				splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.toggleDropdown();
+				splitButton.expanded = !splitButton.expanded;
 			}
 		}
 	}

Components/CustomSwitch.qml

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

Components/CustomText.qml

@@ -27,24 +27,25 @@ Text {
 		enabled: root.animate
 
 		SequentialAnimation {
-			Anim {
+			TAnim {
-				easing.bezierCurve: MaterialEasing.standardAccel
+				target: root
 				to: root.animateFrom
+				type: Anim.FastEffects
 			}
 
 			PropertyAction {
 			}
 
-			Anim {
+			TAnim {
-				easing.bezierCurve: MaterialEasing.standardDecel
+				target: root
 				to: root.animateTo
+				type: Anim.DefaultEffects
 			}
 		}
 	}
 
-	component Anim: NumberAnimation {
+	component TAnim: Anim {
 		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,75 +1,295 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Shapes
 import qs.Config
 
-TextField {
+TextFieldBase {
 	id: root
 
-	background: null
+	enum TextFieldType {
-	color: DynamicColors.palette.m3onSurface
+		Outlined,
-	cursorVisible: !readOnly
+		Filled
-	font.family: Appearance.font.family.sans
+	}
-	font.pointSize: Appearance.font.size.smaller
-	placeholderTextColor: DynamicColors.palette.m3outline
-	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 
-	Behavior on color {
+	readonly property int clampedRadius: Math.min(horizontalPadding, Math.min(width, height) / 2, radius)
-		CAnim {
+	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
 		}
 	}
-	cursorDelegate: CustomRect {
+	Behavior on outlineGapScale {
-		id: cursor
+		Anim {
-
+			type: Anim.DefaultEffects
-		property bool disableBlink
-
-		color: DynamicColors.palette.m3primary
-		implicitWidth: 2
-		radius: Appearance.rounding.normal
-
-		Behavior on opacity {
-			Anim {
-				duration: Appearance.anim.durations.small
-			}
 		}
+	}
 
-		Connections {
+	onEditingFinished: {
-			function onCursorPositionChanged(): void {
+		if (!valid)
-				if (root.activeFocus && root.cursorVisible) {
+			isError = true;
-					cursor.opacity = 1;
+	}
-					cursor.disableBlink = true;
+	onPressed: {
-					enableBlink.restart();
+		if (stateLayer.enabled)
+			stateLayer.press(stateLayer.mouseX, stateLayer.mouseY);
+	}
+	onTextEdited: {
+		if (isError)
+			isError = false;
+	}
+
+	Item {
+		id: contentWrapper
+
+		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
 				}
 			}
-
-			target: root
 		}
 
-		Timer {
+		Loader {
-			id: enableBlink
+			id: leadingIconLoader
 
-			interval: 100
+			active: root.leadingIcon
+			anchors.left: parent.left
+			anchors.leftMargin: Appearance.padding.larger
+			anchors.verticalCenter: parent.verticalCenter
 
-			onTriggered: cursor.disableBlink = false
+			sourceComponent: MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.large
+				text: root.leadingIcon
+			}
 		}
 
-		Timer {
+		Loader {
-			interval: 500
+			id: trailingIconLoader
-			repeat: true
-			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
-			triggeredOnStart: true
 
-			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
+			active: root.trailingIcon
-		}
+			anchors.right: parent.right
+			anchors.rightMargin: Appearance.padding.larger
+			anchors.verticalCenter: parent.verticalCenter
 
-		Binding {
+			sourceComponent: MaterialIcon {
-			cursor.opacity: 0
+				color: DynamicColors.palette.m3onSurfaceVariant
-			when: !root.activeFocus || !root.cursorVisible
+				font.pointSize: Appearance.font.size.large
+				text: root.trailingIcon
+			}
 		}
 	}
-	Behavior on placeholderTextColor {
+
-		CAnim {
+	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
+				}
+			}
+		}
+	}
+
+	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 {
+					}
+				}
+			}
 		}
 	}
 }

Components/CustomTooltip.qml

@@ -1,25 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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,6 +13,7 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
+			type: Anim.SlowEffects
 		}
 	}
 }

Components/ExtraIndicator.qml

@@ -1,44 +0,0 @@
-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

@@ -0,0 +1,79 @@
+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,78 +1,45 @@
-import qs.Config
 import QtQuick
+import qs.Config
 
-CustomRect {
+ButtonBase {
 	id: root
 
-	enum Type {
-		Filled,
-		Tonal,
-		Text
-	}
-
-	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: {
+	readonly property alias label: label
-		if (!toggle && type === IconButton.Filled)
+
+	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;
+	}
+	implicitWidth: implicitHeight
+	inactiveColor: {
+		if (!isToggle && type === IconButton.Filled)
 			return DynamicColors.palette.m3primary;
 		return type === IconButton.Filled ? DynamicColors.tPalette.m3surfaceContainer : DynamicColors.palette.m3secondaryContainer;
 	}
-	property color inactiveOnColour: {
+	inactiveOnColor: {
-		if (!toggle && type === IconButton.Filled)
+		if (!isToggle && type === IconButton.Filled)
 			return DynamicColors.palette.m3onPrimary;
 		return type === IconButton.Tonal ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurfaceVariant;
 	}
-	property bool internalChecked
+	padding: type === IconButton.Text ? Appearance.padding.extraSmall / 2 : Appearance.padding.small
-	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
-		color: root.disabled ? root.disabledOnColour : root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		anchors.verticalCenterOffset: 1
-		fill: !root.toggle || root.internalChecked ? 1 : 0
+		color: root.onColor
+		fill: !root.isToggle || root.internalChecked ? 1 : 0
+		font.pointSize: root.font.pointSize
 
 		Behavior on fill {
 			Anim {
+				type: Anim.DefaultEffects
 			}
 		}
 	}

Components/IconTextButton.qml

@@ -0,0 +1,71 @@
+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

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

Components/Menu.qml

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

Components/PathMenu.qml

@@ -1,76 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -0,0 +1,94 @@
+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

@@ -1,50 +0,0 @@
-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,95 +1,199 @@
-import qs.Config
 import QtQuick
+import QtQuick.Shapes
+import ZShell
+import ZShell.Components
+import qs.Helpers
+import qs.Config
 
 MouseArea {
 	id: root
 
-	property color color: DynamicColors.palette.m3onSurface
+	property alias bottomLeftRadius: base.bottomLeftRadius
-	property bool disabled
+	property alias bottomRightRadius: base.bottomRightRadius
-	property real radius: parent?.radius ?? 0
+	property real circleRadius
-	property alias rect: hoverLayer
+	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
 
-	function onClicked(): void {
+	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;
 	}
 
 	anchors.fill: parent
-	cursorShape: disabled ? undefined : Qt.PointingHandCursor
+	cursorShape: !enabled ? undefined : Qt.PointingHandCursor
-	enabled: !disabled
+	enabled: parent.enabled && !Visibilities.getForActive()?.isDrawing
 	hoverEnabled: true
 
-	onClicked: event => !disabled && onClicked(event)
+	Behavior on stateOpacity {
-	onPressed: event => {
+		Anim {
-		if (disabled)
+			type: Anim.DefaultEffects
-			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 {
+	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
 
-		property real radius
+		alwaysRunToEnd: true
-		property real x
+		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		property real y
+		easing.bezierCurve: Appearance.anim.curves.standard
-
+		property: "circleRadius"
-		PropertyAction {
+		target: root
-			property: "x"
+		to: root.endRadius
-			target: ripple
-			value: rippleAnim.x
-		}
-
-		PropertyAction {
-			property: "y"
-			target: ripple
-			value: rippleAnim.y
-		}
-
-		PropertyAction {
-			property: "opacity"
-			target: ripple
-			value: 0.08
-		}
-
-		Anim {
-			easing.bezierCurve: MaterialEasing.standardDecel
-			from: 0
-			properties: "implicitWidth,implicitHeight"
-			target: ripple
-			to: rippleAnim.radius * 2
-		}
-
-		Anim {
-			property: "opacity"
-			target: ripple
-			to: 0
-		}
 	}
 
-	CustomClippingRect {
+	Anim {
-		id: hoverLayer
+		id: fadeAnim
+
+		property: "opacity"
+		target: circle
+		to: 0
+		type: Anim.SlowEffects
+	}
+
+	CustomRect {
+		id: base
 
 		anchors.fill: parent
-		border.pixelAligned: false
+		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
-		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
-		radius: root.radius
+		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
+	}
 
-		CustomRect {
+	Shape {
-			id: ripple
+		id: circle
 
-			border.pixelAligned: false
+		anchors.fill: parent
-			color: root.color
+		opacity: 0
-			opacity: 0
+		preferredRendererType: Shape.CurveRenderer
-			radius: Appearance.rounding.full
 
-			transform: Translate {
+		ShapePath {
-				x: -ripple.width / 2
+			fillColor: base.color
-				y: -ripple.height / 2
+			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
 			}
 		}
 	}

Components/TextButton.qml

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,46 @@
+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,8 +7,6 @@ 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,9 +28,13 @@ 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]
@@ -38,7 +42,9 @@ 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
@@ -57,7 +63,8 @@ JsonObject {
 	component FontSize: JsonObject {
 		property int extraLarge: 28 * scale
 		property int large: 18 * scale
-		property int larger: 15 * scale
+		property int larger: 16 * scale
+		property int medium: 14 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -70,23 +77,30 @@ JsonObject {
 		}
 	}
 	component Padding: JsonObject {
-		property int large: 15 * scale
+		property int extraLarge: 28 * scale
-		property int larger: 13 * scale
+		property int extraLargeIncreased: 32 * scale
-		property int normal: 9 * scale
+		property int extraSmall: 4 * scale
+		property int large: 16 * scale
+		property int largeIncreased: 20 * scale
+		property int larger: 12 * scale
+		property int normal: 8 * scale
 		property real scale: 1
 		property int small: 5 * scale
 		property int smaller: 7 * scale
 		property int smallest: 2 * scale
 	}
 	component Rounding: JsonObject {
+		property int extraSmall: 4 * scale
 		property int full: 1000 * scale
 		property int large: 24 * scale
+		property int medium: 16 * scale
 		property int normal: 18 * scale
 		property real scale: 1
 		property int small: 12 * scale
 		property int smallest: 8 * scale
 	}
 	component Spacing: JsonObject {
+		property int extraSmall: 4 * scale
 		property int large: 20 * scale
 		property int larger: 16 * scale
 		property int normal: 12 * scale

Config/BarConfig.qml

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

@@ -0,0 +1,15 @@
+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,13 +12,15 @@ Singleton {
 
 	property alias appearance: adapter.appearance
 	property alias background: adapter.background
-	property alias barConfig: adapter.barConfig
+	property alias bar: adapter.bar
+	property alias clipboard: adapter.clipboard
 	property alias colors: adapter.colors
 	property alias dashboard: adapter.dashboard
 	property alias dock: adapter.dock
 	property alias general: adapter.general
 	property alias launcher: adapter.launcher
 	property alias lock: adapter.lock
+	property bool migratingLegacyBar: false
 	property alias notifs: adapter.notifs
 	property alias osd: adapter.osd
 	property alias overview: adapter.overview
@@ -28,6 +30,41 @@ Singleton {
 	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;
@@ -38,325 +75,6 @@ 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()
-		};
-	}
-
-	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 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
 	}
@@ -368,20 +86,7 @@ Singleton {
 
 		onTriggered: {
 			timer.restart();
-			try {
+			fileView.writeAdapter();
-				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);
-			}
 		}
 	}
 
@@ -401,6 +106,10 @@ Singleton {
 		path: `${Paths.config}/config.json`
 		watchChanges: true
 
+		onAdapterUpdated: {
+			if (!root.migratingLegacyBar)
+				root.save();
+		}
 		onFileChanged: {
 			if (!root.recentlySaved) {
 				timer.restart();
@@ -417,7 +126,11 @@ Singleton {
 			ModeScheduler.checkStartup();
 			Hyprsunset.checkStartup();
 			try {
-				JSON.parse(text());
+				const raw = JSON.parse(text());
+				const migrated = root.migrateLegacyBarConfig(raw);
+				if (migrated)
+					root.save();
+
 				const elapsed = timer.elapsedMs();
 
 				if (adapter.utilities.toasts.configLoaded && !root.recentlySaved) {
@@ -438,7 +151,9 @@ Singleton {
 			}
 			property BackgroundConfig background: BackgroundConfig {
 			}
-			property BarConfig barConfig: BarConfig {
+			property BarConfig bar: BarConfig {
+			}
+			property ClipboardConfig clipboard: ClipboardConfig {
 			}
 			property Colors colors: Colors {
 			}

Config/DashboardConfig.qml

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

Config/DynamicColors.qml

@@ -115,6 +115,10 @@ 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,6 +4,8 @@ import Quickshell
 JsonObject {
 	property Apps apps: Apps {
 	}
+	property Battery battery: Battery {
+	}
 	property Color color: Color {
 	}
 	property string dateFormat: "ddd d MMM - hh:mm:ss"
@@ -11,14 +13,30 @@ 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,6 +84,11 @@ 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,6 +9,7 @@ JsonObject {
 	property bool expire: true
 	property int groupPreviewNum: 3
 	property bool openExpanded: false
+	property bool showInFullscreen: true
 	property Sizes sizes: Sizes {
 	}
 

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 bool rounded_corners: false
+	property real radius: 12.0
-	property real shadow_blur_radius: 22.0
+	property bool rounding: false
+	property bool shadow: true
+	property real shadow_blur: 22.0
 	property list<int> shadow_color: [0, 0, 0, 160]
 	property real shadow_offset_x: 5.0
 	property real shadow_offset_y: 5.0

Config/Services.qml

@@ -8,6 +8,7 @@ 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,6 +1,7 @@
 import Quickshell.Io
 
 JsonObject {
+	property int dragThreshold: 30
 	property bool enabled: true
 	property Sizes sizes: Sizes {
 	}

Daemons/BatteryService.qml

@@ -0,0 +1,70 @@
+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)
+		if (props.dnd || [...Visibilities.screens.values()].some(v => v.sidebar))
 			return false;
 
 		const key = (appName || "unknown").trim().toLowerCase();
@@ -49,11 +49,6 @@ Singleton {
 		if (loaded) {
 			saveTimer.restart();
 		}
-		if (root.list.length > 0) {
-			HasNotifications.hasNotifications = true;
-		} else {
-			HasNotifications.hasNotifications = false;
-		}
 	}
 
 	Timer {
@@ -179,6 +174,8 @@ 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 {
@@ -213,10 +210,14 @@ Singleton {
 				notif.hasActionIcons = notif.notification.hasActionIcons;
 			}
 
+			function onHintsChanged(): void {
+				notif.hints = notif.notification.hints;
+			}
+
 			function onImageChanged(): void {
-				notif.image = notif.notification.image;
+				notif.imageSource = notif.notification.image || "";
-				if (notif.notification?.image)
+				notif.image = notif.imageSource;
-					notif.dummyImageLoader.active = true;
+				notif.cacheImageIfNeeded();
 			}
 
 			function onResidentChanged(): void {
@@ -233,60 +234,13 @@ 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 string id
+		property var hints
 		property string image
+		property string imageSource
 		property var locks: new Set()
+		property string notifId
 		property Notification notification
 		property bool popup
 		property bool resident
@@ -329,6 +283,26 @@ 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)) {
@@ -352,14 +326,14 @@ Singleton {
 			if (!notification)
 				return;
 
-			id = notification.id;
+			notifId = notification.id;
 			summary = notification.summary;
 			body = notification.body;
 			appIcon = notification.appIcon;
 			appName = notification.appName;
-			image = notification.image;
+			imageSource = notification.image || "";
-			if (notification?.image)
+			image = imageSource;
-				dummyImageLoader.active = true;
+			hints = notification.hints;
 			expireTimeout = notification.expireTimeout;
 			urgency = notification.urgency;
 			resident = notification.resident;
@@ -369,6 +343,8 @@ Singleton {
 						text: a.text,
 						invoke: () => a.invoke()
 					}));
+
+			cacheImageIfNeeded();
 		}
 	}
 }

Drawers/Backgrounds.qml

@@ -1,107 +0,0 @@
-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

@@ -0,0 +1,25 @@
+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,35 +1,30 @@
-import QtQuick
+pragma ComponentBehavior: Bound
 
-Canvas {
+import Quickshell
+import QtQuick
+import ZShell.Internal
+
+Item {
 	id: root
 
-	property color penColor: "white"
+	readonly property alias content: contentLoader.item
-	property real penWidth: 4
+	readonly property PersistentProperties drawingState: PersistentProperties {
-	property var points: []
+		property color penColor: "white"
+		property int penWidth: 4
 
-	function clear(): void {
+		reloadableId: "drawingState"
-		var ctx = getContext('2d');
-		root.points = [];
-		ctx.reset();
-		root.requestPaint();
 	}
+	required property PersistentProperties visibilities
 
-	renderStrategy: Canvas.Cooperative
+	Loader {
+		id: contentLoader
 
-	onPaint: {
+		active: root.visibilities.isDrawing
-		if (points.length < 2)
+		anchors.fill: parent
-			return;
+
-		var ctx = root.getContext('2d');
+		sourceComponent: StrokeCanvas {
-		ctx.save();
+			penColor: root.drawingState.penColor
-		ctx.lineWidth = root.penWidth;
+			penWidth: root.drawingState.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

@@ -1,60 +0,0 @@
-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.barConfig.border
+		exclusiveZone: Config.bar.border
 		implicitHeight: 1
 		implicitWidth: 1
 		name: "Bar-Exclusion"

Drawers/Interactions.qml

@@ -2,33 +2,34 @@ import Quickshell
 import QtQuick
 import qs.Components
 import qs.Config
+import qs.Helpers
 import qs.Modules as BarPopouts
 
-CustomMouseArea {
+Item {
 	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.barConfig.border && withinPanelWidth(panel, x, y);
+		return y > root.height - panel.height - Config.bar.border && withinPanelWidth(panel, x, y);
 	}
 
 	function inLeftPanel(panel: Item, x: real, y: real): bool {
-		return x < panel.x + panel.width + Config.barConfig.border && withinPanelHeight(panel, x, y);
+		return x < panel.x + panel.width + Config.bar.border && withinPanelHeight(panel, x, y);
 	}
 
 	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x - Config.barConfig.border && withinPanelHeight(panel, x, y);
+		return x > panel.x - Config.bar.border && withinPanelHeight(panel, x, y);
 	}
 
 	function inTopPanel(panel: Item, x: real, y: real): bool {
@@ -47,83 +48,181 @@ CustomMouseArea {
 	}
 
 	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x;
+		const panelX = panel.x + root.borderThickness;
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
 	anchors.fill: parent
-	cursorShape: (pressed && dragStart.y < bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-	hoverEnabled: true
-	propagateComposedEvents: false
 
-	onContainsMouseChanged: {
+	DragHandler {
-		if (!containsMouse) {
+		id: singleHandler
-			if (!osdShortcutActive) {
+
-				visibilities.osd = false;
+		cursorShape: (active && centroid.pressPosition.y < root.bar.implicitHeight) ? Qt.ClosedHandCursor : undefined
-				root.panels.osd.hovered = false;
+		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;
+				}
 			}
 
-			if (!popouts.currentName.startsWith("traymenu")) {
+			if (centroid.pressPosition.y > root.screen.height - Config.bar.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
-				popouts.hasCurrent = false;
+				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 (Config.barConfig.autoHide)
+			if (centroid.pressPosition.x >= root.screen.width - Config.bar.border && centroid.pressPosition.y > (root.screen.height / 2) && dragX < -20) {
-				bar.isHovered = false;
+				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;
+			}
 		}
 	}
-	onPositionChanged: event => {
-		const x = event.x;
-		const y = event.y;
-		const dragX = x - dragStart.x;
-		const dragY = y - dragStart.y;
 
-		if (root.visibilities.isDrawing && !root.inLeftPanel(root.panels.drawing, x, y)) {
+	PointHandler {
-			// root.input.z = 2;
+		id: drawingHandler
-			root.panels.drawing.expanded = false;
-		}
 
-		if (!visibilities.bar && Config.barConfig.autoHide && y < bar.implicitHeight)
+		property bool setInitialPoint: false
-			bar.isHovered = true;
 
-		if (pressed && dragStart.y < bar.implicitHeight) {
+		acceptedButtons: Qt.LeftButton | Qt.RightButton
-			if (dragY > 20)
+		enabled: root.visibilities.isDrawing && (!root.inLeftPanel(root.panels.drawing, hoverHandler.point.position.x, hoverHandler.point.position.y) || !root.panels.drawing.expanded)
-				visibilities.settings = true;
-			else if (dragY < -20)
-				visibilities.settings = false;
-		}
 
-		if (Config.dock.hoverToReveal && pressed && dragStart.y > root.screen.height - root.bar.implicitHeight)
+		onActiveChanged: {
-			if (dragY < -10)
+			if (!active) {
-				visibilities.dock = true;
+				setInitialPoint = false;
-
+				root.drawing.content.endStroke();
-		if (panels.sidebar.width === 0) {
+			} else {
-			const showOsd = inRightPanel(panels.osdWrapper, x, y);
+				root.panels.drawing.collapse();
-
-			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 (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
+			if (point.pressedButtons & Qt.RightButton) {
-			visibilities.dock = true;
+				root.drawing.content.clear();
+				return;
+			}
+			if (x === 0 && y === 0 && origX === 0 && origY === 0)
+				return;
 
-		if (y < root.bar.implicitHeight) {
+			if (!setInitialPoint) {
-			root.bar.checkPopout(x);
+				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);
 		}
 	}
-	onPressed: event => dragStart = Qt.point(event.x, event.y)
 
 	Connections {
 		function onDashboardChanged() {
@@ -132,6 +231,8 @@ CustomMouseArea {
 				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;
@@ -161,6 +262,10 @@ CustomMouseArea {
 			}
 
 			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;
 			}
@@ -193,6 +298,8 @@ CustomMouseArea {
 				root.visibilities.sidebar = false;
 				root.panels.popouts.hasCurrent = false;
 				root.visibilities.launcher = false;
+			} else {
+				Config.save();
 			}
 		}
 
@@ -204,17 +311,6 @@ CustomMouseArea {
 			}
 		}
 
-		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,17 +13,20 @@ 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 Canvas drawingItem
+	required property var drawingItem
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
@@ -41,7 +44,7 @@ Item {
 	required property PersistentProperties visibilities
 
 	anchors.fill: parent
-	anchors.margins: Config.barConfig.border
+	anchors.margins: borderThickness
 	anchors.topMargin: bar.implicitHeight
 
 	Item {
@@ -97,6 +100,7 @@ Item {
 		id: popouts
 
 		anchors.top: parent.top
+		borderThickness: root.borderThickness
 		screen: root.screen
 	}
 
@@ -180,18 +184,14 @@ Item {
 	Item {
 		id: settingsWrapper
 
-		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.fill: parent
-		anchors.top: parent.top
 		clip: true
-		implicitHeight: settings.implicitHeight * (1 - settings.offsetScale)
-		implicitWidth: settings.implicitWidth
 
 		Settings.Wrapper {
 			id: settings
 
-			anchors.horizontalCenter: parent.horizontalCenter
+			anchors.centerIn: parent
-			anchors.top: parent.top
+			anchors.verticalCenterOffset: (-implicitHeight - 5 - ((root.height - implicitHeight) / 2)) * offsetScale
-			// anchors.centerIn: parent
 			panels: root
 			screen: root.screen
 			visibilities: root.visibilities
@@ -207,4 +207,13 @@ 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

@@ -0,0 +1,88 @@
+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,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Effects
 import Quickshell
 import Quickshell.Io
@@ -9,383 +10,426 @@ 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
 
-Variants {
+CustomWindow {
-	model: Quickshell.screens
+	id: root
 
-	Scope {
+	readonly property alias bar: bar
-		id: scope
+	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;
 
-		required property var modelData
+		if (monitor?.lastIpcObject.specialWorkspace?.name || monitor?.activeWorkspace?.lastIpcObject.windows > 0)
+			return 0;
 
-		Exclusions {
+		return 100;
-			bar: bar
+	}
-			screen: scope.modelData
+	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
 		}
 
-		CustomWindow {
+		BlobGroup {
-			id: win
+			id: blobGroup
 
-			readonly property bool hasFullscreen: Hypr.monitorFor(screen)?.activeWorkspace?.toplevels.values.some(t => t.lastIpcObject.fullscreen === 2)
+			color: root.surfaceColor
-			property var root: Quickshell.shellDir
+			smoothing: Config.bar.smoothing
+		}
 
-			WlrLayershell.exclusionMode: ExclusionMode.Ignore
+		BlobInvertedRect {
-			WlrLayershell.keyboardFocus: visibilities.dock || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || visibilities.resources ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
+			anchors.fill: parent
-			color: "transparent"
+			anchors.margins: -50
-			contentItem.focus: true
+			borderBottom: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			mask: visibilities.isDrawing ? null : region
+			borderLeft: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			name: "Bar"
+			borderRight: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			screen: scope.modelData
+			borderTop: bar.implicitHeight - anchors.margins - root.sdfBorderOffset
+			group: blobGroup
+			radius: root.borderRounding
+		}
 
-			contentItem.Keys.onEscapePressed: {
+		PanelBg {
-				if (Config.barConfig.autoHide)
+			id: dashBg
-					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;
-			}
 
-			Region {
+			property real extraHeight: 0.2
-				id: region
 
-				height: win.height - bar.implicitHeight - Config.barConfig.border
+			deformAmount: 0.06
-				intersection: Intersection.Xor
+			implicitHeight: panels.dashboard.height * (1 + extraHeight)
-				regions: popoutRegions.instances
+			implicitWidth: panels.dashboard.width
-				width: win.width - Config.barConfig.border * 2
+			panel: panels.dashboardWrapper
-				x: Config.barConfig.border
+			radius: Appearance.rounding.normal
-				y: bar.implicitHeight
+			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
-			}
+			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+		}
 
-			anchors {
+		PanelBg {
-				bottom: true
+			id: launcherBg
-				left: true
-				right: true
-				top: true
-			}
 
-			Variants {
+			property real extraHeight: 0.2
-				id: popoutRegions
 
-				model: panels.children
+			deformAmount: 0.06
+			implicitHeight: panels.launcher.height * (1 + extraHeight)
+			panel: panels.launcher
+			radius: Appearance.rounding.smallest + 5
+			y: panels.launcher.y + bar.implicitHeight
+		}
 
-				Region {
+		PanelBg {
-					required property Item modelData
+			id: sidebarBg
 
-					height: modelData.height
+			bottomLeftRadius: 0
-					intersection: Intersection.Subtract
+			deformAmount: 0.04
-					width: modelData.width
+			exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
-					x: modelData.x + Config.barConfig.border
+			implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
-					y: modelData.y + bar.implicitHeight
+			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 {
 				}
 			}
+		}
 
-			HyprlandFocusGrab {
+		PanelBg {
-				id: focusGrab
+			id: resourcesBg
 
-				active: visibilities.dock || visibilities.resources || visibilities.launcher || visibilities.sidebar || visibilities.dashboard || visibilities.settings || (panels.popouts.hasCurrent && panels.popouts.currentName.startsWith("traymenu"))
+			deformAmount: 0.05
-				windows: [win]
+			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
+		}
 
-				onCleared: {
+		PanelBg {
-					visibilities.launcher = false;
+			id: settingsBg
-					visibilities.sidebar = false;
+
-					visibilities.dashboard = false;
+			deformAmount: 0.03
-					visibilities.osd = false;
+			panel: panels.settings
-					visibilities.settings = false;
+			radius: Appearance.rounding.large + Appearance.padding.normal
-					visibilities.resources = false;
+		}
-					visibilities.dock = false;
+
-					panels.popouts.hasCurrent = false;
+		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
 			}
-
+			dashboard.transform: Matrix4x4 {
-			PersistentProperties {
+				matrix: dashBg.deformMatrix
-				id: 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)
 			}
-
+			dock.transform: Matrix4x4 {
-			IpcHandler {
+				matrix: dockBg.deformMatrix
-				function toggleLauncher(fix: string): void {
-					visibilities.launcher = !visibilities.launcher;
-				}
-
-				target: "visibilities"
 			}
-
+			launcher.transform: Matrix4x4 {
-			Binding {
+				matrix: launcherBg.deformMatrix
-				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
 			}
-
+			notifications.transform: Matrix4x4 {
-			Item {
+				matrix: notifsBg.deformMatrix
-				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
-				}
 			}
-
+			osd.transform: Matrix4x4 {
-			Drawing {
+				matrix: osdBg.deformMatrix
-				id: drawing
-
-				anchors.fill: parent
-				z: 2
 			}
-
+			popouts.transform: Matrix4x4 {
-			DrawingInput {
+				matrix: popoutBg.deformMatrix
-				id: input
-
-				bar: bar
-				drawing: drawing
-				panels: panels
-				popout: panels.drawing
-				visibilities: visibilities
-				z: 2
 			}
-
+			resources.transform: Matrix4x4 {
-			Interactions {
+				matrix: resourcesBg.deformMatrix
-				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
-				}
 			}
+			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
+			enabled: !visibilities.isDrawing
+			fullscreen: root.hasFullscreen
+			popouts: panels.popouts
+			popoutsWrapper: panels.popoutsWrapper
+			screen: root.screen
+			visibilities: visibilities
 		}
 	}
 
@@ -398,7 +442,7 @@ Variants {
 		implicitHeight: panel.height
 		implicitWidth: panel.width
 		radius: Appearance.rounding.smallest
-		x: panel.x + Config.barConfig.border
+		x: panel.x + root.borderThickness
 		y: panel.y + bar.implicitHeight
 	}
 }

Effects/Mask.qml

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

Greeter/Center.qml

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

Greeter/Components/Anim.qml

@@ -2,7 +2,62 @@ import QtQuick
 import qs.Config
 
 NumberAnimation {
-	duration: MaterialEasing.standardTime
+	enum Type {
-	easing.bezierCurve: MaterialEasing.standard
+		StandardSmall = 0,
-	easing.type: Easing.BezierSpline
+		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;
+	}
 }

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 {
-		function onClicked(): void {
+		radius: control.radius
+
+		onClicked: {
 			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,45 +1,174 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Templates
+import ZShell.Components
+import ZShell
+import qs.Components
 import qs.Config
 
 Slider {
 	id: root
 
-	background: Item {
+	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
+
 		CustomRect {
-			anchors.bottom: parent.bottom
+			id: remaining
-			anchors.left: parent.left
+
-			anchors.top: parent.top
+			anchors.left: handle.right
-			bottomRightRadius: root.implicitHeight / 6
+			anchors.leftMargin: Appearance.spacing.extraSmall
-			color: DynamicColors.palette.m3primary
+			anchors.right: parent.right
-			implicitWidth: root.handle.x - root.implicitHeight / 2
+			anchors.verticalCenter: parent.verticalCenter
-			radius: Appearance.rounding.full
+			bottomLeftRadius: Appearance.rounding.extraSmall / 2
-			topRightRadius: root.implicitHeight / 6
+			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.bottom: parent.bottom
 			anchors.right: parent.right
-			anchors.top: parent.top
+			anchors.rightMargin: 4 * remaining.opacity
-			bottomLeftRadius: root.implicitHeight / 6
+			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.tPalette.m3surfaceContainer
+			color: root.fgColor
-			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			implicitHeight: 4 * remaining.opacity
+			implicitWidth: implicitHeight
+			opacity: remaining.opacity
 			radius: Appearance.rounding.full
-			topLeftRadius: root.implicitHeight / 6
+		}
+
+		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.left: parent.left
+			anchors.verticalCenter: parent.verticalCenter
+			asynchronous: true
+			sourceComponent: root.wavy ? waveComp : lineComp
+		}
+
+		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
+				}
+			}
 		}
 	}
-	handle: CustomRect {
+	Behavior on filledWidth {
-		anchors.verticalCenter: parent.verticalCenter
+		id: widthBehavior
-		color: DynamicColors.palette.m3primary
-		implicitHeight: 15
-		implicitWidth: 5
-		radius: Appearance.rounding.full
-		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
-		MouseArea {
+		Anim {
-			acceptedButtons: Qt.NoButton
+		}
-			anchors.fill: parent
+	}
-			cursorShape: Qt.PointingHandCursor
+
+	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
+		anchors.verticalCenter: parent.verticalCenter
+		implicitHeight: handle.implicitHeight
+		preventStealing: true
+
+		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;
 		}
 	}
 }

Greeter/Components/CustomSpinBox.qml

@@ -28,6 +28,7 @@ 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
@@ -36,7 +37,7 @@ RowLayout {
 		text: root.isEditing ? text : root.displayText
 
 		background: CustomRect {
-			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			color: root.enabled ? DynamicColors.tPalette.m3surfaceContainerHigh : DynamicColors.tPalette.m3surfaceContainerLow
 			implicitWidth: 100
 			radius: Appearance.rounding.full
 		}
@@ -85,7 +86,7 @@ RowLayout {
 	CustomRect {
 		id: upButton
 
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: upIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -93,7 +94,9 @@ RowLayout {
 		StateLayer {
 			id: upState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				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;
@@ -102,9 +105,6 @@ 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: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_up"
 		}
 	}
 
 	CustomRect {
-		color: DynamicColors.palette.m3primary
+		color: root.enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 1)
 		implicitHeight: downIcon.implicitHeight + Appearance.padding.small * 2
 		implicitWidth: implicitHeight
 		radius: Appearance.rounding.full
@@ -127,7 +127,9 @@ RowLayout {
 		StateLayer {
 			id: downState
 
-			function onClicked(): void {
+			color: DynamicColors.palette.m3onPrimary
+
+			onClicked: {
 				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;
@@ -136,9 +138,6 @@ RowLayout {
 				root.displayText = newValue.toString();
 				root.valueModified(newValue);
 			}
-
-			color: DynamicColors.palette.m3onPrimary
-
 			onPressAndHold: timer.start()
 			onReleased: timer.stop()
 		}
@@ -147,7 +146,7 @@ RowLayout {
 			id: downIcon
 
 			anchors.centerIn: parent
-			color: DynamicColors.palette.m3onPrimary
+			color: root.enabled ? DynamicColors.palette.m3onPrimary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.5)
 			text: "keyboard_arrow_down"
 		}
 	}

Greeter/Components/CustomSplitButton.qml

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

Greeter/Components/CustomSplitButtonRow.qml

@@ -8,19 +8,32 @@ Item {
 	id: root
 
 	property alias active: splitButton.active
-	property bool enabled: true
+	property alias buttonAlias: splitButton
 	property alias expanded: splitButton.expanded
 	property int expandedZ: 100
 	required property string label
 	property alias menuItems: splitButton.menuItems
+	property bool shouldBeActive: true
 	property alias type: splitButton.type
 
 	signal selected(item: MenuItem)
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.right: parent.right
 	clip: false
-	z: root.expanded ? expandedZ : -1
+	implicitHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	z: splitButton.menu.implicitHeight > 0 ? expandedZ : 1
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
 
 	RowLayout {
 		id: row
@@ -36,7 +49,6 @@ 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 {
@@ -44,14 +56,13 @@ Item {
 
 			enabled: root.enabled
 			type: CustomSplitButton.Filled
-			z: root.expanded ? root.expandedZ : -1
+			z: 2
 
 			menu.onItemSelected: item => {
 				root.selected(item);
-				splitButton.closeDropdown();
 			}
 			stateLayer.onClicked: {
-				splitButton.toggleDropdown();
+				splitButton.expanded = !splitButton.expanded;
 			}
 		}
 	}

Greeter/Components/CustomSwitch.qml

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

Greeter/Components/CustomText.qml

@@ -15,6 +15,7 @@ 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,6 +13,7 @@ RectangularShadow {
 
 	Behavior on dp {
 		Anim {
+			type: Anim.SlowEffects
 		}
 	}
 }

Greeter/Components/IconButton.qml

@@ -41,12 +41,11 @@ 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)
+	radius: internalChecked ? 6 : (implicitHeight / 2 * Math.min(1, 1)) * Appearance.rounding.scale
 
 	Behavior on radius {
 		Anim {
 			id: radiusAnim
-
 		}
 	}
 
@@ -55,14 +54,14 @@ CustomRect {
 	StateLayer {
 		id: stateLayer
 
-		function onClicked(): void {
+		color: root.internalChecked ? root.activeOnColour : root.inactiveOnColour
+		disabled: root.disabled
+
+		onClicked: {
 			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,6 +102,7 @@ Item {
 				animate: root.animate
 				animateProp: "opacity"
 				color: root.color
+				font.pointSize: elideText.font.pointSize
 				text: elideText.text
 			}
 
@@ -111,6 +112,7 @@ 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,109 +2,169 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
 import qs.Config
+import qs.Drawers
 
-Elevation {
+MouseArea {
 	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)
 
-	implicitHeight: root.expanded ? column.implicitHeight + Appearance.padding.small * 2 : 0
+	anchors.fill: parent
-	implicitWidth: Math.max(200, column.implicitWidth)
+	enabled: expanded
-	level: 2
+	layer.enabled: opacity < 1
-	opacity: root.expanded ? 1 : 0
+	opacity: expanded ? 1 : 0
-	radius: Appearance.rounding.normal
+	parent: {
-
+		const win = QsWindow.window;
-	Behavior on implicitHeight {
+		const contentWin = win as Windows;
-		Anim {
+		return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-		}
 	}
+
 	Behavior on opacity {
 		Anim {
-			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			type: Anim.DefaultEffects
 		}
 	}
 
-	CustomClippingRect {
+	onClicked: expanded = false
-		anchors.fill: parent
-		color: DynamicColors.palette.m3surfaceContainer
-		radius: parent.radius
 
-		ColumnLayout {
+	TransformWatcher {
-			id: column
+		id: watcher
 
-			anchors.left: parent.left
+		a: root.parent
-			anchors.right: parent.right
+		b: root.attachTo
-			anchors.verticalCenter: parent.verticalCenter
+	}
-			spacing: 5
 
-			Repeater {
+	Elevation {
-				model: root.items
+		id: menu
 
-				CustomRect {
+		implicitHeight: column.implicitHeight + column.anchors.margins * 2
-					id: item
+		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;
+		}
 
-					readonly property bool active: modelData === root.active
+		transform: Scale {
-					required property int index
+			origin.y: root.thisSideY === Menu.Bottom ? menu.height : 0
-					required property MenuItem modelData
+			yScale: root.expanded ? 1 : 0.1
 
-					Layout.fillWidth: true
+			Behavior on yScale {
-					implicitHeight: menuOptionRow.implicitHeight + Appearance.padding.normal * 2
+				Anim {
-					implicitWidth: menuOptionRow.implicitWidth + Appearance.padding.normal * 2
+				}
+			}
+		}
+
+		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
 
 					CustomRect {
-						anchors.fill: parent
+						id: item
-						anchors.leftMargin: Appearance.padding.small
+
-						anchors.rightMargin: Appearance.padding.small
+						readonly property bool active: modelData === root.active
-						color: Qt.alpha(DynamicColors.palette.m3secondaryContainer, active ? 1 : 0)
+						required property int index
-						radius: Appearance.rounding.normal - Appearance.padding.small
+						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 {
+							}
+						}
 
 						StateLayer {
-							function onClicked(): void {
+							color: item.active ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+							disabled: !root.expanded
+
+							onClicked: {
 								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
 						}
 
-						CustomText {
+						RowLayout {
-							Layout.alignment: Qt.AlignVCenter
+							id: menuOptionRow
-							Layout.fillWidth: true
-							color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
-							text: item.modelData.text
-						}
 
-						Loader {
+							anchors.fill: parent
-							Layout.alignment: Qt.AlignVCenter
+							anchors.margins: Appearance.padding.larger
-							active: item.modelData.trailingIcon.length > 0
+							spacing: Appearance.spacing.small
-							visible: active
 
-							sourceComponent: MaterialIcon {
+							MaterialIcon {
-								color: item.active ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onSurface
+								Layout.alignment: Qt.AlignVCenter
-								text: item.modelData.trailingIcon
+								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
+								}
 							}
 						}
 					}

Greeter/Components/PathViewMenu.qml

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

Greeter/Components/StateLayer.qml

@@ -1,15 +1,53 @@
-import qs.Config
 import QtQuick
+import QtQuick.Shapes
+import ZShell
+import ZShell.Components
+import qs.Helpers
+import qs.Config
 
 MouseArea {
 	id: root
 
-	property color color: DynamicColors.palette.m3onSurface
+	property alias bottomLeftRadius: base.bottomLeftRadius
+	property alias bottomRightRadius: base.bottomRightRadius
+	property real circleRadius
+	property alias color: base.color
 	property bool disabled
-	property real radius: parent?.radius ?? 0
+	readonly property real endRadius: {
-	property alias rect: hoverLayer
+		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 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 ? 0.08 : 0
+	property alias topLeftRadius: base.topLeftRadius
+	property alias topRightRadius: base.topRightRadius
 
-	function onClicked(): void {
+	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;
 	}
 
 	anchors.fill: parent
@@ -17,79 +55,146 @@ MouseArea {
 	enabled: !disabled
 	hoverEnabled: true
 
-	onClicked: event => !disabled && onClicked(event)
+	Behavior on stateOpacity {
-	onPressed: event => {
+		Anim {
-		if (disabled)
+			type: Anim.DefaultEffects
-			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 {
+	onCircleRadiusChanged: {
+		if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
+			fadeAnim.start();
+	}
+	onClicked: event => !disabled && onClicked(event)
+	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
 
-		property real radius
+		alwaysRunToEnd: true
-		property real x
+		duration: Appearance.anim.durations.expressiveSlowEffects * 2
-		property real y
+		easing.bezierCurve: Appearance.anim.curves.standard
-
+		property: "circleRadius"
-		PropertyAction {
+		target: root
-			property: "x"
+		to: root.endRadius
-			target: ripple
-			value: rippleAnim.x
-		}
-
-		PropertyAction {
-			property: "y"
-			target: ripple
-			value: rippleAnim.y
-		}
-
-		PropertyAction {
-			property: "opacity"
-			target: ripple
-			value: 0.08
-		}
-
-		Anim {
-			easing.bezierCurve: MaterialEasing.standardDecel
-			from: 0
-			properties: "implicitWidth,implicitHeight"
-			target: ripple
-			to: rippleAnim.radius * 2
-		}
-
-		Anim {
-			property: "opacity"
-			target: ripple
-			to: 0
-		}
 	}
 
-	CustomClippingRect {
+	Anim {
-		id: hoverLayer
+		id: fadeAnim
+
+		property: "opacity"
+		target: circle
+		to: 0
+		type: Anim.SlowEffects
+	}
+
+	CustomRect {
+		id: base
 
 		anchors.fill: parent
-		border.pixelAligned: false
+		bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
-		color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+		bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
-		radius: root.radius
+		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
+	}
 
-		CustomRect {
+	Shape {
-			id: ripple
+		id: circle
 
-			border.pixelAligned: false
+		anchors.fill: parent
-			color: root.color
+		opacity: 0
-			opacity: 0
+		preferredRendererType: Shape.CurveRenderer
-			radius: Appearance.rounding.full
 
-			transform: Translate {
+		ShapePath {
-				x: -ripple.width / 2
+			fillColor: base.color
-				y: -ripple.height / 2
+			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
 			}
 		}
 	}

Greeter/Config/Appearance.qml

@@ -4,10 +4,9 @@ import Quickshell
 
 Singleton {
 	readonly property AppearanceConf.Anim anim: Config.appearance.anim
+	readonly property AppearanceConf.Deform deform: Config.appearance.deform
 	readonly property AppearanceConf.FontStuff font: Config.appearance.font
 	readonly property AppearanceConf.Padding padding: Config.appearance.padding
-	// 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

Greeter/Config/AppearanceConf.qml

@@ -3,6 +3,8 @@ import Quickshell.Io
 JsonObject {
 	property Anim anim: Anim {
 	}
+	property Deform deform: Deform {
+	}
 	property FontStuff font: FontStuff {
 	}
 	property Padding padding: Padding {
@@ -26,9 +28,13 @@ 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]
@@ -36,13 +42,18 @@ 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
 		property real scale: 1
 		property int small: 200 * scale
 	}
+	component Deform: JsonObject {
+		property real scale: 1
+	}
 	component FontFamily: JsonObject {
 		property string clock: "Rubik"
 		property string material: "Material Symbols Rounded"
@@ -52,7 +63,8 @@ JsonObject {
 	component FontSize: JsonObject {
 		property int extraLarge: 28 * scale
 		property int large: 18 * scale
-		property int larger: 15 * scale
+		property int larger: 16 * scale
+		property int medium: 14 * scale
 		property int normal: 13 * scale
 		property real scale: 1
 		property int small: 11 * scale
@@ -65,28 +77,33 @@ JsonObject {
 		}
 	}
 	component Padding: JsonObject {
-		property int large: 15 * scale
+		property int extraLargeIncreased: 32 * scale
+		property int extraSmall: 4 * scale
+		property int large: 16 * scale
 		property int larger: 12 * scale
-		property int normal: 10 * scale
+		property int normal: 8 * scale
 		property real scale: 1
 		property int small: 5 * scale
 		property int smaller: 7 * scale
 		property int smallest: 2 * scale
 	}
 	component Rounding: JsonObject {
+		property int extraSmall: 4 * scale
 		property int full: 1000 * scale
-		property int large: 25 * scale
+		property int large: 24 * scale
-		property int normal: 17 * 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: 15 * scale
+		property int larger: 16 * scale
 		property int normal: 12 * scale
 		property real scale: 1
-		property int small: 7 * scale
+		property int small: 8 * scale
 		property int smaller: 10 * scale
 	}
 	component Transparency: JsonObject {