Initial commit for submenu popouts, unfinished

-a

@@ -1,3 +0,0 @@
-
-#omz revision: d2b7f557cceaddb16ba89bbf8200d8a8df35c4d8
-#omz fpath: /home/zach/.oh-my-zsh/plugins/colored-man-pages /home/zach/.oh-my-zsh/plugins/universalarchive /home/zach/.oh-my-zsh/plugins/tldr /home/zach/.oh-my-zsh/plugins/extract /home/zach/.oh-my-zsh/plugins/copypath /home/zach/.oh-my-zsh/plugins/cp /home/zach/.oh-my-zsh/plugins/conda-env /home/zach/.oh-my-zsh/plugins/command-not-found /home/zach/.oh-my-zsh/plugins/dirhistory /home/zach/.oh-my-zsh/plugins/copybuffer /home/zach/.oh-my-zsh/plugins/copyfile /home/zach/.oh-my-zsh/custom/plugins/fast-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-autosuggestions /home/zach/.oh-my-zsh/plugins/archlinux /home/zach/.oh-my-zsh/plugins/web-search /home/zach/.oh-my-zsh/plugins/sudo /home/zach/.oh-my-zsh/plugins/git /home/zach/.oh-my-zsh/functions /home/zach/.oh-my-zsh/completions /home/zach/.oh-my-zsh/custom/functions /home/zach/.oh-my-zsh/custom/completions /home/zach/tools/ripgrep/complete /home/linuxbrew/.linuxbrew/share/zsh/site-functions /home/zach/.oh-my-zsh/plugins/colored-man-pages /home/zach/.oh-my-zsh/plugins/universalarchive /home/zach/.oh-my-zsh/plugins/tldr /home/zach/.oh-my-zsh/plugins/extract /home/zach/.oh-my-zsh/plugins/copypath /home/zach/.oh-my-zsh/plugins/cp /home/zach/.oh-my-zsh/plugins/conda-env /home/zach/.oh-my-zsh/plugins/command-not-found /home/zach/.oh-my-zsh/plugins/dirhistory /home/zach/.oh-my-zsh/plugins/copybuffer /home/zach/.oh-my-zsh/plugins/copyfile /home/zach/.oh-my-zsh/custom/plugins/fast-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting /home/zach/.oh-my-zsh/custom/plugins/zsh-autosuggestions /home/zach/.oh-my-zsh/plugins/archlinux /home/zach/.oh-my-zsh/plugins/web-search /home/zach/.oh-my-zsh/plugins/sudo /home/zach/.oh-my-zsh/plugins/git /home/zach/.oh-my-zsh/functions /home/zach/.oh-my-zsh/completions /home/zach/.oh-my-zsh/custom/functions /home/zach/.oh-my-zsh/custom/completions /home/zach/.oh-my-zsh/cache/completions /home/zach/tools/ripgrep/complete /home/linuxbrew/.linuxbrew/share/zsh/site-functions /usr/local/share/zsh/site-functions /usr/share/zsh/site-functions /usr/share/zsh/functions/Calendar /usr/share/zsh/functions/Chpwd /usr/share/zsh/functions/Completion /usr/share/zsh/functions/Completion/Base /usr/share/zsh/functions/Completion/Linux /usr/share/zsh/functions/Completion/Unix /usr/share/zsh/functions/Completion/X /usr/share/zsh/functions/Completion/Zsh /usr/share/zsh/functions/Exceptions /usr/share/zsh/functions/MIME /usr/share/zsh/functions/Math /usr/share/zsh/functions/Misc /usr/share/zsh/functions/Newuser /usr/share/zsh/functions/Prompts /usr/share/zsh/functions/TCP /usr/share/zsh/functions/VCS_Info /usr/share/zsh/functions/VCS_Info/Backends /usr/share/zsh/functions/Zftp /usr/share/zsh/functions/Zle /home/zach/.zfunc

.clang-format

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

.clang-tidy

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

.clangd

@@ -1,5 +0,0 @@
-CompileFlags:
-  Remove:
-    # GCC-only flags from the system's default spec that clang/clangd cannot
-    # parse. They appear in compile_commands.json but are not set by the project.
-    - -mno-direct-extern-access

.gersemirc

@@ -1,3 +0,0 @@
-indent: tabs
-list_expansion: favour-expansion
-definitions: [Plugins/cmake/qml-module.cmake, Plugins/gersemi/qt-add-shaders.cmake]

.gitea/ISSUE_TEMPLATE/bug.yaml

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

.gitea/ISSUE_TEMPLATE/feature.yaml

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

.gitea/PULL_REQUEST_TEMPLATE.yaml

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

.gitea/workflows/ci-image.yml

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

.gitea/workflows/cpp.yml

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

.gitea/workflows/lint-js.yml

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

.gitea/workflows/lint-python.yml

@@ -0,0 +1,34 @@
+name: Lint & Format (Python)
+
+on:
+    pull_request:
+
+jobs:
+    lint-format:
+        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: Format check
+              continue-on-error: true
+              run: |
+                  . .venv/bin/activate
+                  ruff format --check .
+
+            - name: Lint
+              run: |
+                  . .venv/bin/activate
+                  ruff check .

.gitea/workflows/lint-rust.yml

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

.gitea/workflows/python.yml

@@ -1,67 +0,0 @@
-name: Python
-
-env:
-    APT_DEPS: git python3 python3-pip python3-venv python3-gi python3-cairo python3-dbus python3-pyudev python3-psutil python3-evdev python3-yaml python3-xlib python3-pillow gir1.2-gtk-3.0
-
-on:
-    pull_request:
-
-jobs:
-    static:
-        runs-on: debian
-        container: node:26-trixie-slim
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apt-get update
-                  apt-get install -y --no-install-recommends git python3 python3-pip python3-venv
-                  python3 -m venv .venv
-                  . .venv/bin/activate
-                  pip install --no-cache-dir ruff
-
-            - name: Format check
-              run: |
-                  . .venv/bin/activate
-                  ruff format --check .
-
-            - name: Lint
-              run: |
-                  . .venv/bin/activate
-                  ruff check .
-
-    verify:
-        if: always()
-        runs-on: debian
-        container: node:26-trixie-slim
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-
-            - name: Install tools
-              run: |
-                  apt-get update
-                  apt-get install -y --no-install-recommends $APT_DEPS build-essential python3-dev
-                  python3 -m venv --system-site-packages .venv
-                  . .venv/bin/activate
-                  pip install --no-cache-dir basedpyright nuitka .
-
-            - name: Type check
-              run: |
-                  . .venv/bin/activate
-                  basedpyright
-
-            - name: Test
-              run: |
-                  . .venv/bin/activate
-                  cd cli
-                  python -m pytest tests/ -v
-
-            - name: Nuitka module check
-              run: |
-                  . .venv/bin/activate
-                  nuitka --module --include-package=zshell cli/src/zshell/

.gitea/workflows/rust.yml

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

.gitignore

@@ -13,11 +13,3 @@ uv.lock
 .qtcreator/
 dist/
 **/target/
-**/test-plugins/
-**/Charts/
-network-dev/
-**/zshell.build/
-**/zshell.dist/
-.opencode/
-run-agent.sh
-AGENTS.md

.prettierignore

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

.qmlformat.ini

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

CMakeLists.txt

@@ -1,201 +1,36 @@
 cmake_minimum_required(VERSION 3.19)
 
-if(NOT DEFINED VERSION)
-	execute_process(
-		COMMAND git describe --tags --abbrev=0
-		WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
-		OUTPUT_VARIABLE GIT_LAST_TAG
-		OUTPUT_STRIP_TRAILING_WHITESPACE
-		ERROR_QUIET
-	)
-
-	if (GIT_LAST_TAG)
-		string(REGEX REPLACE "^v" "" GIT_LAST_TAG "${GIT_LAST_TAG}")
-
-		string(REPLACE "." ";" VERSION_LIST "${GIT_LAST_TAG}")
-		list(GET VERSION_LIST 0 VERSION_MAJOR)
-		list(GET VERSION_LIST 1 VERSION_MINOR)
-
-		execute_process(
-			COMMAND git rev-list v${VERSION_MAJOR}.${VERSION_MINOR}.0..HEAD --count
-			WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
-			OUTPUT_VARIABLE VERSION_PATCH
-			OUTPUT_STRIP_TRAILING_WHITESPACE
-			ERROR_QUIET
-		)
-	endif()
-endif()
-
-if(NOT DEFINED GIT_REVISION)
-	execute_process(COMMAND git rev-parse HEAD
-								WORKING_DIRECTORY "${CMAKE_SOURCE_DIR}"
-								OUTPUT_VARIABLE GIT_REVISION
-								OUTPUT_STRIP_TRAILING_WHITESPACE
-				)
-
-	if("${GIT_REVISION}" STREQUAL "")
-		message(FATAL_ERROR "GIT_REVISION is not set and failed to get from git")
-	endif()
-endif()
-
-set(VERSION "${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH}")
-
-project(ZShell VERSION ${VERSION_MAJOR}.${VERSION_MINOR}.${VERSION_PATCH})
-message(STATUS "ZShell version: ${VERSION}")
-
-include(GNUInstallDirs)
+project(ZShell)
 
 set(CMAKE_CXX_STANDARD 20)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 set(CMAKE_CXX_EXTENSIONS OFF)
 set(CMAKE_RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib")
 set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
-set(QT_NO_PRIVATE_MODULE_WARNING ON)
-set(ENABLE_MODULES "plugin;shell;cli;m3shapes" CACHE STRING "Modules to build/install")
+set(ENABLE_MODULES "plugin;shell" CACHE STRING "Modules to build/install")
 
-set(INSTALL_LIBDIR "${CMAKE_INSTALL_LIBDIR}/ZShell" CACHE STRING "Library install dir")
-set(INSTALL_QMLDIR "${CMAKE_INSTALL_LIBDIR}/qt6/qml" CACHE STRING "QML install dir")
-set(INSTALL_QSCONFDIR "${CMAKE_INSTALL_SYSCONFDIR}/xdg/quickshell/zshell" CACHE STRING "Quickshell config install dir")
-set(INSTALL_GREETERCONFDIR "${CMAKE_INSTALL_SYSCONFDIR}/xdg/quickshell/zshell-greeter" CACHE STRING "Quickshell greeter install dir")
-
-set(CMAKE_INSTALL_MESSAGE NEVER)
+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")
 
 add_compile_options(
     -Wall -Wextra -Wpedantic -Wshadow -Wconversion
-	-Wnull-dereference -Wdouble-promotion
-	-Wformat=2 -Wfloat-equal
+    -Wold-style-cast -Wnull-dereference -Wdouble-promotion
+    -Wformat=2 -Wfloat-equal -Woverloaded-virtual
     -Wsign-conversion -Wredundant-decls -Wswitch
     -Wunreachable-code
-	$<$<COMPILE_LANGUAGE:CXX>:-Wold-style-cast>
-	$<$<COMPILE_LANGUAGE:CXX>:-Woverloaded-virtual>
 )
 
 
-if("cli" IN_LIST ENABLE_MODULES)
-	# 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
-				--include-package=gi.overrides
-				--include-package-data=solaar
-				--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 Services Modules Daemons Drawers Effects Helpers Paths)
+	foreach(dir assets scripts Components Config Modules Daemons Drawers Effects Helpers Paths)
         install(DIRECTORY ${dir} DESTINATION "${INSTALL_QSCONFDIR}")
     endforeach()
-
-	# Disable watching for changes
-	file(READ shell.qml SHELL_QML)
-	string(REPLACE "settings.watchFiles: true" "settings.watchFiles: false" SHELL_QML "${SHELL_QML}")
-	file(WRITE "${CMAKE_BINARY_DIR}/qml/shell.qml" "${SHELL_QML}")
-	install(FILES "${CMAKE_BINARY_DIR}/qml/shell.qml" DESTINATION "${INSTALL_QSCONFDIR}")
-
-	# Greeter
+	install(FILES shell.qml DESTINATION "${INSTALL_QSCONFDIR}")
 	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()
-
-	# Silence warnings that come from m3shapes files we do not manage.
-	foreach(m3shapes_target m3shapes_core m3shapes_morph m3shapes_shapes m3shapes m3shapesplugin)
-		if(TARGET ${m3shapes_target})
-			target_compile_options(${m3shapes_target} PRIVATE -Wno-shadow -Wno-float-equal)
-		endif()
-	endforeach()
-endif()

Components/AnchorAnim.qml

@@ -1,51 +0,0 @@
-import QtQuick
-import ZShell.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 Tokens.anim.durations.expressiveDefaultSpatial;
-
-		if (type == AnchorAnim.FastSpatial)
-			return Tokens.anim.durations.expressiveFastSpatial;
-		if (type == AnchorAnim.DefaultSpatial)
-			return Tokens.anim.durations.expressiveDefaultSpatial;
-		if (type == AnchorAnim.SlowSpatial)
-			return Tokens.anim.durations.expressiveSlowSpatial;
-
-		const types = ["small", "normal", "large", "extraLarge"];
-		const idx = type % 4; // 0-7 are the 4 standard types
-		return Tokens.anim.durations[types[idx]];
-	}
-	easing: {
-		if (type == AnchorAnim.FastSpatial)
-			return Tokens.anim.expressiveFastSpatial;
-		if (type == AnchorAnim.DefaultSpatial)
-			return Tokens.anim.expressiveDefaultSpatial;
-		if (type == AnchorAnim.SlowSpatial)
-			return Tokens.anim.expressiveSlowSpatial;
-
-		if (type >= AnchorAnim.StandardSmall && type <= AnchorAnim.StandardExtraLarge)
-			return Tokens.anim.standard;
-		if (type >= AnchorAnim.EmphasizedSmall && type <= AnchorAnim.EmphasizedExtraLarge)
-			return Tokens.anim.emphasized;
-
-		return Tokens.anim.expressiveDefaultSpatial;
-	}
-}

Components/Anim.qml

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

Components/BaseStyledSlider.qml

@@ -1,28 +1,30 @@
 import QtQuick
 import QtQuick.Templates
-import ZShell.Config
-import qs.Services
+import qs.Config
 
 Slider {
 	id: root
 
-	property color color: Colors.palette.m3secondary
+	property color color: DynamicColors.palette.m3secondary
 	required property string icon
 	property bool initialized: false
 	readonly property bool isHorizontal: orientation === Qt.Horizontal
 	readonly property bool isVertical: orientation === Qt.Vertical
 	property real multiplier: 100
 	property real oldValue
+
+	// Wrapper components can inject their own track visuals here.
 	property Component trackContent
 
+	// Keep current behavior for existing usages.
 	orientation: Qt.Vertical
 
 	background: CustomRect {
 		id: groove
 
-		color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
+		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
 		height: root.availableHeight
-		radius: Tokens.rounding.full
+		radius: Appearance.rounding.full
 		width: root.availableWidth
 		x: root.leftPadding
 		y: root.topPadding
@@ -63,8 +65,8 @@ Slider {
 			id: rect
 
 			anchors.fill: parent
-			color: Colors.palette.m3inverseSurface
-			radius: Tokens.rounding.full
+			color: DynamicColors.palette.m3inverseSurface
+			radius: Appearance.rounding.full
 
 			MouseArea {
 				id: handleInteraction
@@ -80,29 +82,49 @@ Slider {
 
 				property bool moving
 
-				anchors.centerIn: parent
-				anchors.verticalCenterOffset: 1
-				text: moving ? Math.round(root.value * 100) : root.icon
-				color: Colors.palette.m3inverseOnSurface
-				font: moving ? Tokens.font.body.small : Tokens.font.icon.medium
+				function update(): void {
+					animate = !moving;
+					binding.when = moving;
+					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
+					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
+				}
+
+				anchors.centerIn: parent
+				color: DynamicColors.palette.m3inverseOnSurface
+				text: root.icon
+
+				onMovingChanged: anim.restart()
+
+				Binding {
+					id: binding
+
+					property: "text"
+					target: icon
+					value: Math.round(root.value * root.multiplier)
+					when: false
+				}
 
-				Behavior on moving {
 				SequentialAnimation {
+					id: anim
+
 					Anim {
-							target: icon
+						duration: Appearance.anim.durations.normal / 2
+						easing.bezierCurve: Appearance.anim.curves.standardAccel
 						property: "scale"
-							to: 0.3
-							duration: Tokens.anim.durations.small / 2
-							easing: Tokens.anim.standardAccel
+						target: icon
+						to: 0
 					}
-						PropertyAction {}
+
+					ScriptAction {
+						script: icon.update()
+					}
+
 					Anim {
-							target: icon
+						duration: Appearance.anim.durations.normal / 2
+						easing.bezierCurve: Appearance.anim.curves.standardDecel
 						property: "scale"
+						target: icon
 						to: 1
-							duration: Tokens.anim.durations.normal / 2
-							easing: Tokens.anim.standardDecel
-						}
 					}
 				}
 			}
@@ -110,7 +132,7 @@ Slider {
 	}
 	Behavior on value {
 		Anim {
-			type: Anim.StandardLarge
+			duration: Appearance.anim.durations.large
 		}
 	}
 
@@ -118,6 +140,7 @@ Slider {
 	onValueChanged: {
 		if (!initialized) {
 			initialized = true;
+			oldValue = value;
 			return;
 		}
 

Components/ButtonBase.qml

@@ -1,85 +0,0 @@
-import QtQuick
-import ZShell.Config
-import qs.Components
-import qs.Services
-
-CustomRect {
-	id: root
-
-	enum ButtonType {
-		Filled,
-		Tonal,
-		Text
-	}
-
-	property color activeColor
-	property color activeOnColor
-	property bool checked
-	property real checkedRadius: Tokens.rounding.medium
-	property real defaultRadius: Tokens.rounding.large
-	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledOnColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
-	property bool fillWidth
-	property font font: Tokens.font.body.small
-	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: Tokens.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, Tokens.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/CAnim.qml

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

Components/CircularIndicator.qml

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

Components/CircularProgress.qml

@@ -1,151 +1,66 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Shapes
-import ZShell
-import ZShell.Components
-import ZShell.Config
-import qs.Services
-
-Item {
-	id: root
-
-	// Ring geometry, quantized in the item's own device pixel space and never
-	// against its position: the parent layout places the item on the device
-	// grid, so these values cannot change when the item moves (no jitter), and
-	// the ring stays crisp wherever it lands.
-	// Device-pixel center of the ring: an even stroke width wants a pixel
-	// boundary, an odd one a pixel center. Floored, matching
-	// WavyLineRenderer::snapCenterDev, so the wave and this background arc
-	// always land on the same center even when the box's device size is odd.
-	readonly property real centerDev: Math.floor(
-		sizeDev / 2 - strokeParity / 2
-	) + strokeParity / 2
-	readonly property real centerX: centerDev / dpr
-	readonly property real centerY: centerDev / dpr
-	// Whole device pixels, and one pixel of slack on the outer edge: the ring's
-	// antialias feather needs somewhere to fade, otherwise it is cut flat at
-	// the top/left/right/bottom of the item rect.
-	readonly property real arcRadius: Math.max(
-		1,
-		Math.floor(
-			(sizeDev - Math.round(padding * dpr) - strokeDev * (1 + waveAmplitude * 2) - 2) / 2
-		)
-	) / dpr
-	property color bgColor: Colors.palette.m3secondaryContainer
-	property real clampedVal: Math.max(1 / 360, Math.min(1, isNaN(value) ? 0 : value))
-	readonly property real dotAngleRad: (startAngle + sweepAngle - gapAngle * (sweepAngle < 360 ? 0 : 1)) * Math.PI / 180
-	readonly property real dpr: ZUtils.dprFor(root)
-	property color fgColor: Colors.palette.m3primary
-	readonly property real gapAngle: ((spacing + strokeLogical) / (arcRadius || 1)) * (180 / Math.PI)
-	property alias hasEndIndicator: dot.active
-	property real implicitSize
-	property int padding: 0
-	// The item's own size in whole device pixels. Never adjusted upwards: the
-	// texture is exactly this wide, so ring values derived from it cannot spill
-	// past the item's bounds.
-	readonly property real size: sizeDev / dpr
-	readonly property real sizeDev: Math.round(Math.min(width, height) * dpr)
-	property int spacing: Tokens.spacing.small
-	readonly property real strokeDev: Math.max(1, Math.round(strokeWidth * dpr))
-	readonly property real strokeLogical: strokeDev / dpr
-	readonly property real strokeParity: strokeDev % 2
-	property int startAngle: -90
-	property int strokeWidth: Tokens.padding.extraSmall
-	property int sweepAngle: 360
-	readonly property real thickness: strokeLogical * (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
-
-	implicitHeight: implicitSize
-	implicitWidth: implicitSize
+import qs.Config
 
 Shape {
+	id: root
+
+	readonly property real arcRadius: (size - padding - strokeWidth) / 2
+	property color bgColour: DynamicColors.palette.m3secondaryContainer
+	property color fgColour: DynamicColors.palette.m3primary
+	readonly property real gapAngle: ((spacing + strokeWidth) / (arcRadius || 1)) * (180 / Math.PI)
+	property 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
+	readonly property real vValue: value || 1 / 360
+	property real value
+
 	asynchronous: true
-		opacity: Math.min(1, remainingArc.sweepAngle)
 	preferredRendererType: Shape.CurveRenderer
 
 	ShapePath {
-			capStyle: ShapePath.RoundCap
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
 		fillColor: "transparent"
-			strokeColor: root.bgColor
-			strokeWidth: Math.max(1, Math.round(Math.min(1, remainingArc.sweepAngle) * root.strokeDev)) / root.dpr
+		strokeColor: root.bgColour
+		strokeWidth: root.strokeWidth
 
 		Behavior on strokeColor {
 			CAnim {
+				duration: Appearance.anim.durations.large
 			}
 		}
 
 		PathAngleArc {
-				id: remainingArc
-
-				centerX: root.centerX
-				centerY: root.centerY
+			centerX: root.size / 2
+			centerY: root.size / 2
 			radiusX: root.arcRadius
 			radiusY: root.arcRadius
-				startAngle: root.startAngle + root.clampedVal * root.sweepAngle + root.gapAngle
-				sweepAngle: Math.max(1 / 360, root.sweepAngle * (1 - root.clampedVal) - root.gapAngle * (root.sweepAngle < 360 ? 1 : 2))
-			}
+			startAngle: root.startAngle + 360 * root.vValue + root.gapAngle
+			sweepAngle: Math.max(-root.gapAngle, 360 * (1 - root.vValue) - root.gapAngle * 2)
 		}
 	}
 
-	WavyLine {
-		id: wave
+	ShapePath {
+		capStyle: Appearance.rounding.scale === 0 ? ShapePath.SquareCap : ShapePath.RoundCap
+		fillColor: "transparent"
+		strokeColor: root.fgColour
+		strokeWidth: root.strokeWidth
 
-		amplitudeMultiplier: root.wavy ? 0.5 : 0
-		anchors.fill: parent
-		anchors.margins: -Math.round(lineWidth * amplitudeMultiplier * root.dpr) / root.dpr
-		color: root.fgColor
-		frequency: 8
-		fullAngle: root.sweepAngle
-		lineWidth: root.strokeWidth
-		objectName: "wave"
-		pathType: WavyLine.Arc
-		radius: root.arcRadius
-		startAngle: root.startAngle
-		value: root.clampedVal
-
-		Behavior on amplitudeMultiplier {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-		Behavior on color {
+		Behavior on strokeColor {
 			CAnim {
-			}
-		}
-		Anim on waveProgress {
-			id: waveProgAnim
-
-			duration: 2000
-			easing.type: Easing.Linear
-			from: 0
-			loops: Animation.Infinite
-			paused: root.wavePaused || wave.amplitudeMultiplier === 0
-			running: true
-			to: 1
+				duration: Appearance.anim.durations.large
 			}
 		}
 
-	Loader {
-		id: dot
-
-		// Rounded in local device pixels: the dot's own size is a whole even
-		// device count, so an integral local position puts its center on the grid
-		// whatever the ring's angle, and moving the gauge moves the dot with it.
-		x: Math.round((root.centerX + root.arcRadius * Math.cos(root.dotAngleRad) - width / 2) * root.dpr) / root.dpr
-		y: Math.round((root.centerY + root.arcRadius * Math.sin(root.dotAngleRad) - height / 2) * root.dpr) / root.dpr
-
-		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: Tokens.rounding.full
+		PathAngleArc {
+			centerX: root.size / 2
+			centerY: root.size / 2
+			radiusX: root.arcRadius
+			radiusY: root.arcRadius
+			startAngle: root.startAngle
+			sweepAngle: 360 * root.vValue
 		}
 	}
 }

Components/ClipRect.qml

@@ -1,42 +0,0 @@
-import QtQuick
-import Quickshell
-import ZShell.Components
-
-Item {
-	id: root
-
-	property real radius
-	property real topLeftRadius: radius
-	property real topRightRadius: radius
-	property real bottomRightRadius: radius
-	property real bottomLeftRadius: radius
-	property color color: "transparent"
-	default property alias contentData: contentItem.data
-
-	Item {
-		id: contentItem
-
-		anchors.fill: parent
-	}
-
-	ShaderEffectSource {
-		id: src
-
-		hideSource: true
-		sourceItem: contentItem
-	}
-
-	RoundedMask {
-		anchors.fill: parent
-		source: src
-		topLeftRadius: root.topLeftRadius
-		topRightRadius: root.topRightRadius
-		bottomRightRadius: root.bottomRightRadius
-		bottomLeftRadius: root.bottomLeftRadius
-		color: root.color
-	}
-
-	Behavior on color {
-		CAnim {}
-	}
-}

Components/CollapsibleSection.qml

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

Components/ColorArcPicker.qml

@@ -1,8 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import ZShell.Config
-import qs.Services
+import qs.Config
 
 Item {
 	id: root
@@ -19,9 +18,9 @@ Item {
 	property real lastChromaticHue: 0
 	readonly property real radius: (Math.min(width, height) - handleSize) / 2
 	readonly property int segmentCount: 240
-	readonly property color thumbColor: Colors.palette.m3inverseSurface
-	readonly property color thumbContentColor: Colors.palette.m3inverseOnSurface
-	readonly property color trackColor: Colors.layer(Colors.palette.m3surfaceContainer, 2)
+	readonly property color thumbColor: DynamicColors.palette.m3inverseSurface
+	readonly property color thumbContentColor: DynamicColors.palette.m3inverseOnSurface
+	readonly property color trackColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
 
 	function hueToAngle(hue) {
 		return arcStartAngle + arcSweep * hue;
@@ -46,10 +45,10 @@ Item {
 	}
 
 	function syncFromPenColor() {
-		if (!drawing.screenState)
+		if (!drawing)
 			return;
 
-		const c = drawing.screenState.penColor;
+		const c = drawing.penColor;
 
 		if (c.hsvSaturation > 0) {
 			currentHue = c.hsvHue;
@@ -86,20 +85,12 @@ Item {
 
 		currentHue = relative / arcSweep;
 		lastChromaticHue = currentHue;
-		drawing.screenState.penColor = Qt.hsva(currentHue, drawing.screenState.penColor.hsvSaturation, drawing.screenState.penColor.hsvValue, drawing.screenState.penColor.a);
+		drawing.penColor = Qt.hsva(currentHue, drawing.penColor.hsvSaturation, drawing.penColor.hsvValue, drawing.penColor.a);
 	}
 
 	implicitHeight: 180
 	implicitWidth: 220
 
-	Behavior on currentHue {
-		enabled: !root.dragActive
-
-		Anim {
-			type: Anim.StandardLarge
-		}
-	}
-
 	Component.onCompleted: syncFromPenColor()
 	onCurrentHueChanged: canvas.requestPaint()
 	onDrawingChanged: syncFromPenColor()
@@ -112,7 +103,7 @@ Item {
 			root.syncFromPenColor();
 		}
 
-		target: root.drawing.screenState
+		target: root.drawing
 	}
 
 	Canvas {
@@ -150,21 +141,6 @@ Item {
 		}
 	}
 
-	CustomRect {
-		anchors.centerIn: parent
-		color: root.drawing?.screenState.penColor
-		implicitHeight: implicitWidth
-		implicitWidth: canvas.height - root.handleSize - Tokens.padding.extraLarge * 2
-		radius: Tokens.rounding.full
-
-		Behavior on color {
-			enabled: false
-
-			CAnim {
-			}
-		}
-	}
-
 	Item {
 		id: handle
 
@@ -198,7 +174,7 @@ Item {
 
 			Rectangle {
 				anchors.centerIn: parent
-				color: Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
+				color: root.drawing ? root.drawing.penColor : Qt.hsla(root.currentHue, 1.0, 0.5, 1.0)
 				height: width
 				radius: width / 2
 				width: parent.width - 12

Components/CustomAudioSlider.qml

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

Components/CustomBusyIndicator.qml

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

Components/CustomButton.qml

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

Components/CustomCheckbox.qml

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

Components/CustomClippingWrapperRect.qml

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

Components/CustomComboBox.qml

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

Components/CustomFlickable.qml

@@ -1,36 +1,13 @@
 import QtQuick
-import qs.Services
 
 Flickable {
 	id: root
 
-	property bool doneFakeFlick
-
-	interactive: !ShellState.forActive().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;
-			root.returnToBounds();
-		}
-	}
 }

Components/CustomListView.qml

@@ -1,36 +1,13 @@
 import QtQuick
-import qs.Services
 
 ListView {
 	id: root
 
-	property bool doneFakeFlick
-
-	interactive: !ShellState.forActive()?.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"
-			type: Anim.DefaultEffects
 		}
 	}
-
-	// Timer {
-	// 	interval: 10
-	// 	running: root.doneFakeFlick
-	//
-	// 	onTriggered: {
-	// 		root.doneFakeFlick = false;
-	// 	}
-	// }
 }

Components/CustomMouseArea.qml

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

Components/CustomProgressBar.qml

@@ -1,238 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Templates
-import ZShell
-import ZShell.Components
-import ZShell.Internal
-import ZShell.Config
-import qs.Services
-
-ProgressBar {
-	id: root
-
-	enum IndeterminateAnimState {
-		Running,
-		Completing,
-		Stopped
-	}
-
-	property color bgColor: Colors.palette.m3secondaryContainer
-	property color fgColor: Colors.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: Tokens.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 - Tokens.spacing.extraSmall
-				anchors.top: parent.top
-				anchors.bottom: parent.bottom
-			}
-
-			Line {
-				id: dot
-				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: Tokens.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
-
-		color: root.bgColor
-		implicitHeight: parent.height
-		implicitWidth: bounds.y - bounds.x
-		radius: Tokens.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

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

Components/CustomRect.qml

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

Components/CustomScrollBar.qml

@@ -1,52 +1,109 @@
-pragma ComponentBehavior: Bound
-
+import qs.Config
 import QtQuick
 import QtQuick.Templates
-import qs.Services
-import ZShell.Config
 
 ScrollBar {
 	id: root
 
+	property bool _updatingFromFlickable: false
+	property bool _updatingFromUser: false
+	property bool animating
 	required property Flickable flickable
-
-	readonly property bool isHorizontal: flickable && flickable.ScrollBar.horizontal === root
-	readonly property real axisSize: isHorizontal ? flickable.width : flickable.height
-	readonly property real axisContentSize: isHorizontal ? flickable.contentWidth : flickable.contentHeight
-	readonly property real axisContentPos: isHorizontal ? (reversed ? flickable.contentX : (flickable.contentX - flickable.originX)) : (reversed ? flickable.contentY : (flickable.contentY - flickable.originY))
-	readonly property real axisLength: isHorizontal ? root.width : root.height
-	readonly property real effectiveSize: Math.max(nonAnimHeight, root.minimumSize)
-	readonly property real effectiveTravel: Math.max(0, 1 - root.effectiveSize)
-	readonly property real nonAnimHeight: root.axisSize / root.axisContentSize
-	readonly property real nonAnimY: root.axisContentPos / root.axisContentSize
-	readonly property real rawTravel: Math.max(0, 1 - root.nonAnimHeight)
-	readonly property bool reversed: isHorizontal ? (flickable instanceof ListView && flickable.layoutDirection === Qt.RightToLeft) : (flickable instanceof ListView && flickable.verticalLayoutDirection === ListView.BottomToTop)
-	readonly property real travelScale: root.rawTravel > 0 ? root.effectiveTravel / root.rawTravel : 0
-
+	property real nonAnimPosition
 	property bool shouldBeActive
-	property bool inverted
 
-	enabled: !ShellState.forActive().isDrawing
+	implicitWidth: 8
 
-	implicitWidth: size === 1 ? 0 : isHorizontal ? 0 : Tokens.padding.extraSmall * 2
-	implicitHeight: size === 1 ? 0 : isHorizontal ? Tokens.padding.extraSmall * 2 : 0
+	contentItem: CustomRect {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		color: DynamicColors.palette.m3secondary
+		opacity: {
+			if (root.size === 1)
+				return 0;
+			if (fullMouse.pressed)
+				return 1;
+			if (mouse.containsMouse)
+				return 0.8;
+			if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
+				return 0.6;
+			return 0;
+		}
+		radius: Appearance.rounding.full
 
-	contentItem: Item {}
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		MouseArea {
+			id: mouse
+
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
+			hoverEnabled: true
+		}
+	}
 	Behavior on position {
 		enabled: !fullMouse.pressed
 
-		Anim {}
+		Anim {
+		}
 	}
 
+	Component.onCompleted: {
+		if (flickable) {
+			const contentHeight = flickable.contentHeight;
+			const height = flickable.height;
+			if (contentHeight > height) {
+				nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+			}
+		}
+	}
 	onHoveredChanged: {
 		if (hovered)
-			shouldBeActive = hovered;
+			shouldBeActive = true;
 		else
-			hideDelay.restart();
+			shouldBeActive = flickable.moving;
+	}
+
+	// Sync nonAnimPosition with Qt's automatic position binding
+	onPositionChanged: {
+		if (_updatingFromUser) {
+			_updatingFromUser = false;
+			return;
+		}
+		if (position === nonAnimPosition) {
+			animating = false;
+			return;
+		}
+		if (!animating && !_updatingFromFlickable && !fullMouse.pressed) {
+			nonAnimPosition = position;
+		}
+	}
+
+	// Sync nonAnimPosition with flickable when not animating
+	Connections {
+		function onContentYChanged() {
+			if (!animating && !fullMouse.pressed) {
+				_updatingFromFlickable = true;
+				const contentHeight = flickable.contentHeight;
+				const height = flickable.height;
+				if (contentHeight > height) {
+					nonAnimPosition = Math.max(0, Math.min(1, flickable.contentY / (contentHeight - height)));
+				} else {
+					nonAnimPosition = 0;
+				}
+				_updatingFromFlickable = false;
+			}
+		}
+
+		target: flickable
 	}
 
 	Connections {
-		function onMovingChanged() {
+		function onMovingChanged(): void {
 			if (root.flickable.moving)
 				root.shouldBeActive = true;
 			else
@@ -56,30 +113,6 @@ ScrollBar {
 		target: root.flickable
 	}
 
-	Loader {
-		anchors.fill: parent
-		active: root.size < 1
-		sourceComponent: root.isHorizontal ? horizontalTrack : verticalTrack
-	}
-
-	Component {
-		id: verticalTrack
-
-		VerticalScrollBarTrack {
-			scrollBar: root
-			mouseArea: fullMouse
-		}
-	}
-
-	Component {
-		id: horizontalTrack
-
-		HorizontalScrollBarTrack {
-			scrollBar: root
-			mouseArea: fullMouse
-		}
-	}
-
 	Timer {
 		id: hideDelay
 
@@ -91,61 +124,66 @@ ScrollBar {
 	CustomMouseArea {
 		id: fullMouse
 
-		property real pressOffset: 0
-
-		function contentPosFromThumbStart(thumbStart) {
-			var visualPos = root.effectiveTravel > 0 ? thumbStart / root.travelScale : 0;
-			return root.reversed ? (visualPos - 1) * root.axisContentSize : visualPos * root.axisContentSize;
-		}
-
-		function updateFromEvent(event) {
-			var eventPos = root.isHorizontal ? event.x : event.y;
-			var posInTrack = eventPos / root.axisLength;
-			var thumbStart = posInTrack - pressOffset;
-			thumbStart = Math.max(0, Math.min(root.effectiveTravel, thumbStart));
-
-			var newPos = contentPosFromThumbStart(thumbStart);
-			if (root.isHorizontal)
-				root.flickable.contentX = newPos + (root.flickable.originX + (root.reversed ? root.flickable.contentWidth : 0));
-			else
-				root.flickable.contentY = newPos + (root.flickable.originY + (root.reversed ? root.flickable.contentHeight : 0));
-		}
-
-		function visualThumbStart() {
-			const visualPos = root.reversed ? (1 + root.nonAnimY) : root.nonAnimY;
-			return visualPos * root.travelScale;
-		}
-
 		function onWheel(event: WheelEvent): void {
-			if (root.horizontal) {
-				event.accepted = false;
-				return;
+			root.animating = true;
+			root._updatingFromUser = true;
+			let newPos = root.nonAnimPosition;
+			if (event.angleDelta.y > 0)
+				newPos = Math.max(0, root.nonAnimPosition - 0.1);
+			else if (event.angleDelta.y < 0)
+				newPos = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
 			}
-
-			var delta = event.angleDelta.y > 0 ? -0.1 : 0.1;
-			var newPos = Math.max(0, Math.min(1 - root.size, root.position + (root.inverted ? -delta : delta)));
-			root.position = newPos;
 		}
 
 		anchors.fill: parent
-		cursorShape: undefined
-		hoverEnabled: true
 		preventStealing: true
 
 		onPositionChanged: event => {
-			if (pressed)
-				updateFromEvent(event);
+			root._updatingFromUser = true;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
 		}
 		onPressed: event => {
-			var currentStart = visualThumbStart();
-			var currentEnd = currentStart + root.effectiveSize;
-			var eventPos = root.isHorizontal ? event.x : event.y;
-			var clickPos = eventPos / root.axisLength;
-
-			var clickedInsideThumb = clickPos >= currentStart && clickPos <= currentEnd;
-			pressOffset = clickedInsideThumb ? (clickPos - currentStart) : root.effectiveSize / 2;
-
-			updateFromEvent(event);
+			root.animating = true;
+			root._updatingFromUser = true;
+			const newPos = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+			root.nonAnimPosition = newPos;
+			// Update flickable position
+			// Map scrollbar position [0, 1-size] to contentY [0, maxContentY]
+			if (root.flickable) {
+				const contentHeight = root.flickable.contentHeight;
+				const height = root.flickable.height;
+				if (contentHeight > height) {
+					const maxContentY = contentHeight - height;
+					const maxPos = 1 - root.size;
+					const contentY = maxPos > 0 ? (newPos / maxPos) * maxContentY : 0;
+					root.flickable.contentY = Math.max(0, Math.min(maxContentY, contentY));
+				}
+			}
 		}
 	}
 }

Components/CustomSlider.qml

@@ -1,207 +1,47 @@
-pragma ComponentBehavior: Bound
-
 import QtQuick
 import QtQuick.Templates
-import ZShell
-import ZShell.Components
-import ZShell.Config
-import qs.Components
-import qs.Services
+import qs.Config
 
 Slider {
 	id: root
 
-	property bool animateWave
-	property color bgColor: enabled ? Colors.palette.m3secondaryContainer : Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	readonly property bool dragging: mouse.pressed
-	property color fgColor: enabled ? Colors.palette.m3primary : Qt.alpha(Colors.palette.m3onSurface, 0.38)
-	property real filledWidth
-	property alias inset: inset
-	property color insetColor: enabled ? (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary) : Colors.palette.m3onSurface
-	property string insetIcon: ""
-	property bool interactionOnMove: true
-	property real pos: visualPosition
-	property int radius: Tokens.rounding.small
-	property int waveDuration: 1000
-	property real waveFrequency: 6
-	property bool wavy
-
-	signal interaction(v: real)
-
-	implicitHeight: ZUtils.snap(12, root)
-	implicitWidth: 200
-
-	contentItem: Item {
-		anchors.fill: parent
+	property color color: DynamicColors.palette.m3primary
 
+	background: Item {
 		CustomRect {
-			id: remaining
-
-			anchors.left: handle.right
-			anchors.leftMargin: Tokens.spacing.extraSmall
-			anchors.right: parent.right
-			anchors.verticalCenter: parent.verticalCenter
-			bottomLeftRadius: Tokens.rounding.extraSmall / 2
-			color: root.bgColor
-			implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
-			opacity: Math.min(width, 12) / 12
-			radius: root.radius
-			topLeftRadius: Tokens.rounding.extraSmall / 2
-		}
-
-		CustomRect {
-			anchors.right: parent.right
-			anchors.rightMargin: 4 * remaining.opacity
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.fgColor
-			implicitHeight: 4 * remaining.opacity
-			implicitWidth: implicitHeight
-			opacity: remaining.opacity
-			radius: Tokens.rounding.full
-		}
-
-		CustomRect {
-			id: handle
-
-			anchors.left: filled.right
-			anchors.leftMargin: Tokens.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: Tokens.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 + Tokens.spacing.extraSmall * 2 : false
-			property real dockT: attached ? 1 : 0
-
 			anchors.bottom: parent.bottom
+			anchors.left: parent.left
 			anchors.top: parent.top
-			color: root.insetColor
-			fontStyle: {
-				if (root.height < 96)
-					return Tokens.font.icon.pixelSize(24).build();
-				else
-					return Tokens.font.icon.pixelSize(32).build();
+			bottomRightRadius: root.implicitHeight / 6
+			color: root.color
+			implicitWidth: root.handle.x - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topRightRadius: root.implicitHeight / 6
 		}
-			text: root.insetIcon
-			verticalAlignment: Text.AlignVCenter
-			visible: !root.wavy && root.insetIcon !== ""
-			x: Tokens.spacing.extraSmall + dockT * (handle.x + Tokens.spacing.small)
-
-			Behavior on dockT {
-				Anim {}
-			}
-		}
-
-		Component {
-			id: lineComp
 
 		CustomRect {
-				bottomRightRadius: Tokens.rounding.extraSmall / 2
-				color: root.fgColor
-				implicitHeight: root.height
-				implicitWidth: ZUtils.snap(root.filledWidth, root)
-				radius: root.radius
-				topRightRadius: Tokens.rounding.extraSmall / 2
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.top: parent.top
+			bottomLeftRadius: root.implicitHeight / 6
+			color: DynamicColors.tPalette.m3surfaceContainer
+			implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 2
+			radius: Appearance.rounding.full
+			topLeftRadius: root.implicitHeight / 6
 		}
 	}
-
-		Component {
-			id: waveComp
-
-			WavyLine {
-				color: root.fgColor
-				frequency: root.waveFrequency
-				fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
-				implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
-				implicitWidth: ZUtils.snap(root.filledWidth, root)
-				lineWidth: ZUtils.snap(root.height * 0.7, root)
-				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
-				}
-			}
-		}
-	}
-	Behavior on filledWidth {
-		id: widthBehavior
-
-		Anim {}
-	}
-
-	Component.onCompleted: {
-		filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos);
-	}
-
-	Binding {
-		id: posBinding
-
-		property: "pos"
-		target: root
-		value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
-		when: mouse.pressed
-	}
+	handle: CustomRect {
+		anchors.verticalCenter: parent.verticalCenter
+		color: root.color
+		implicitHeight: 15
+		implicitWidth: 5
+		radius: Appearance.rounding.full
+		x: root.visualPosition * root.availableWidth - implicitWidth / 2
 
 		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;
-			if (root.interactionOnMove)
-				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;
+			acceptedButtons: Qt.NoButton
+			anchors.fill: parent
+			cursorShape: Qt.PointingHandCursor
 		}
 	}
 }

Components/CustomSpinBox.qml

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

Components/CustomSplitButton.qml

@@ -0,0 +1,181 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Helpers
+
+Row {
+	id: root
+
+	enum Type {
+		Filled,
+		Tonal
+	}
+
+	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)
+	property alias expanded: menu.expanded
+	property string fallbackIcon
+	property string fallbackText
+	property real horizontalPadding: Appearance.padding.normal
+	property alias iconLabel: iconLabel
+	property alias label: label
+	property alias menu: menu
+	property alias menuItems: menu.items
+	property bool menuOnTop
+	property alias stateLayer: stateLayer
+	property color textColor: type == CustomSplitButton.Filled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+	property int type: CustomSplitButton.Filled
+	property real verticalPadding: Appearance.padding.smaller
+
+	function closeDropdown(): void {
+		SettingsDropdowns.close(menu);
+	}
+
+	function openDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.open(menu, root);
+	}
+
+	function toggleDropdown(): void {
+		if (root.disabled)
+			return;
+		SettingsDropdowns.toggle(menu, root);
+	}
+
+	spacing: Math.floor(Appearance.spacing.small / 2)
+
+	onExpandedChanged: {
+		if (!expanded)
+			SettingsDropdowns.forget(menu);
+	}
+
+	CustomRect {
+		bottomRightRadius: Appearance.rounding.small / 2
+		color: root.disabled ? root.disabledColor : root.color
+		implicitHeight: expandBtn.implicitHeight
+		implicitWidth: 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 {
+				root.active?.clicked();
+			}
+
+			color: root.textColor
+			disabled: root.disabled
+			rect.bottomRightRadius: parent.bottomRightRadius
+			rect.topRightRadius: parent.topRightRadius
+		}
+
+		RowLayout {
+			id: textRow
+
+			anchors.centerIn: parent
+			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
+			spacing: Appearance.spacing.small
+
+			MaterialIcon {
+				id: iconLabel
+
+				Layout.alignment: Qt.AlignVCenter
+				animate: true
+				color: root.disabled ? root.disabledTextColor : root.textColor
+				fill: 1
+				text: root.active?.activeIcon ?? root.fallbackIcon
+			}
+
+			CustomText {
+				id: label
+
+				Layout.alignment: Qt.AlignVCenter
+				Layout.preferredWidth: implicitWidth
+				animate: true
+				clip: true
+				color: root.disabled ? root.disabledTextColor : root.textColor
+				text: root.active?.activeText ?? root.fallbackText
+
+				Behavior on Layout.preferredWidth {
+					Anim {
+						easing.bezierCurve: Appearance.anim.curves.emphasized
+					}
+				}
+			}
+		}
+	}
+
+	CustomRect {
+		id: expandBtn
+
+		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
+		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
+		implicitWidth: implicitHeight
+		radius: implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
+		topLeftRadius: rad
+
+		Behavior on rad {
+			Anim {
+			}
+		}
+
+		StateLayer {
+			id: expandStateLayer
+
+			function onClicked(): void {
+				root.toggleDropdown();
+			}
+
+			color: root.textColor
+			disabled: root.disabled
+			rect.bottomLeftRadius: parent.bottomLeftRadius
+			rect.topLeftRadius: parent.topLeftRadius
+		}
+
+		MaterialIcon {
+			id: expandIcon
+
+			anchors.centerIn: parent
+			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
+			color: root.disabled ? root.disabledTextColor : root.textColor
+			rotation: root.expanded ? 180 : 0
+			text: "expand_more"
+
+			Behavior on anchors.horizontalCenterOffset {
+				Anim {
+				}
+			}
+			Behavior on rotation {
+				Anim {
+				}
+			}
+		}
+
+		Menu {
+			id: menu
+
+			anchors.bottomMargin: Appearance.spacing.small
+			anchors.right: parent.right
+			anchors.top: parent.bottom
+			anchors.topMargin: Appearance.spacing.small
+
+			states: State {
+				when: root.menuOnTop
+
+				AnchorChanges {
+					anchors.bottom: expandBtn.top
+					anchors.top: undefined
+					target: menu
+				}
+			}
+		}
+	}
+}

Components/CustomSplitButtonRow.qml

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

Components/CustomSwitch.qml

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

Components/CustomText.qml

@@ -1,8 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import ZShell.Config
-import qs.Services
+import qs.Config
 
 Text {
 	id: root
@@ -13,10 +12,10 @@ Text {
 	property string animateProp: "scale"
 	property real animateTo: 1
 
-	color: Colors.palette.m3onSurface
-	font: Tokens.font.body.small
-	linkColor: Colors.palette.m3onPrimaryFixedVariant
-	renderType: Text.QtRendering
+	color: DynamicColors.palette.m3onSurface
+	font.family: Appearance.font.family.sans
+	font.pointSize: Appearance.font.size.normal
+	renderType: Text.NativeRendering
 	textFormat: Text.PlainText
 
 	Behavior on color {
@@ -27,25 +26,24 @@ Text {
 		enabled: root.animate
 
 		SequentialAnimation {
-			TAnim {
-				target: root
+			Anim {
+				easing.bezierCurve: MaterialEasing.standardAccel
 				to: root.animateFrom
-				type: Anim.FastEffects
 			}
 
 			PropertyAction {
 			}
 
-			TAnim {
-				target: root
+			Anim {
+				easing.bezierCurve: MaterialEasing.standardDecel
 				to: root.animateTo
-				type: Anim.DefaultEffects
 			}
 		}
 	}
 
-	component TAnim: Anim {
+	component Anim: NumberAnimation {
 		duration: root.animateDuration / 2
+		easing.type: Easing.BezierSpline
 		properties: root.animateProp.split(",").length > 1 ? root.animateProp : ""
 		property: root.animateProp.split(",").length === 1 ? root.animateProp : ""
 		target: root

Components/CustomTextField.qml

@@ -1,305 +1,75 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Shapes
-import ZShell.Config
-import qs.Services
+import QtQuick.Controls
+import qs.Config
 
-TextFieldBase {
+TextField {
 	id: root
 
-	enum TextFieldType {
-		Outlined,
-		Filled
-	}
+	background: null
+	color: DynamicColors.palette.m3onSurface
+	cursorVisible: !readOnly
+	font.family: Appearance.font.family.sans
+	font.pointSize: Appearance.font.size.smaller
+	placeholderTextColor: DynamicColors.palette.m3outline
+	renderType: echoMode === TextField.Password ? TextField.QtRendering : TextField.NativeRendering
 
-	readonly property int clampedRadius: Math.min(horizontalPadding, Math.min(width, height) / 2, radius)
-	readonly property string effectiveSupportingText: isError && errorText ? errorText : supportingText
-	readonly property int filledOffset: type === CustomTextField.Filled ? Tokens.spacing.small : 0
-	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
-	readonly property real smallFontScale: smallFontSize / font.pointSize
-	readonly property int supportingTextOffset: effectiveSupportingText ? supportingTextLoader.height + Tokens.spacing.extraSmall : 0
-	readonly property int trailingOffset: trailingIcon ? trailingIconLoader.width + trailingIconLoader.anchors.rightMargin : 0
-	readonly property bool valid: !validate || (!text && emptyIsValid) || (validate instanceof RegExp ? validate.test(text) : !!validate(text))
-
-	property int horizontalPadding: Tokens.padding.large
-	property int verticalPadding: Tokens.padding.large
-
-	property int radius: Tokens.rounding.small
-
-	property string supportingText
-	property string trailingIcon
-	property int smallFontSize: Tokens.font.label.small.pointSize
-
-	property int type: CustomTextField.Outlined
-	property var validate // Regex or function
-	property bool emptyIsValid: true
-	property string errorText
-	property bool isError
-	property string leadingIcon
-
-	bottomPadding: verticalPadding + supportingTextOffset - filledOffset
-	leftPadding: horizontalPadding + leadingOffset
-	rightPadding: horizontalPadding + trailingOffset
-	topPadding: verticalPadding + filledOffset
-
-	background: Loader {
-		anchors.bottomMargin: root.supportingTextOffset
-		anchors.fill: parent
-		sourceComponent: root.type === CustomTextField.Filled ? filledComp : outlineComp
-
-		StateLayer {
-			id: stateLayer
-
-			cursorShape: Qt.IBeamCursor
-			enabled: !root.activeFocus
-			manualPressOverride: tapHandler.pressed
-			radius: root.type === CustomTextField.Outlined ? root.clampedRadius : 0
-			topLeftRadius: root.clampedRadius
-			topRightRadius: root.clampedRadius
-
-			onClicked: root.focus = true
+	Behavior on color {
+		CAnim {
 		}
 	}
+	cursorDelegate: CustomRect {
+		id: cursor
 
-	onEditingFinished: {
-		if (!valid)
-			isError = true;
-	}
-	onPressed: {
-		if (stateLayer.enabled)
-			stateLayer.press(stateLayer.mouseX, stateLayer.mouseY);
-	}
-	onTextEdited: {
-		if (isError)
-			isError = false;
-	}
+		property bool disableBlink
 
-	Item {
-		id: contentWrapper
+		color: DynamicColors.palette.m3primary
+		implicitWidth: 2
+		radius: Appearance.rounding.normal
 
-		anchors.bottomMargin: root.supportingTextOffset
-		anchors.fill: parent
-
-		CustomText {
-			id: placeholder
-
-			anchors.left: parent.left
-			anchors.leftMargin: root.leftPadding
-			anchors.topMargin: Tokens.padding.extraSmall
-			anchors.verticalCenter: parent.verticalCenter
-			color: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : root.text ? Colors.palette.m3outline : root.placeholderTextColor)
-			font.family: root.font.family
-			font.pointSize: root.font.pointSize
-			font.variableAxes: root.font.variableAxes
-			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
-						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 {
+		Behavior on opacity {
 			Anim {
-					properties: "scale,leftMargin"
-					type: Anim.DefaultEffects
-				}
-
-				AnchorAnim {
-					duration: Tokens.anim.durations.expressiveDefaultEffects
-					easing: Tokens.anim.expressiveDefaultEffects
-				}
-			}
-		}
-
-		Loader {
-			id: leadingIconLoader
-
-			active: root.leadingIcon
-			anchors.left: parent.left
-			anchors.leftMargin: Tokens.padding.small
-			anchors.verticalCenter: parent.verticalCenter
-
-			sourceComponent: MaterialIcon {
-				color: Colors.palette.m3onSurfaceVariant
-				text: root.leadingIcon
-				fontStyle: Tokens.font.icon.builders.medium.scale(0.9).build()
+				duration: Appearance.anim.durations.small
 			}
 		}
 
-		Loader {
-			id: trailingIconLoader
-
-			active: root.trailingIcon
-			anchors.right: parent.right
-			anchors.rightMargin: Tokens.padding.small
-			anchors.verticalCenter: parent.verticalCenter
-
-			sourceComponent: MaterialIcon {
-				color: Colors.palette.m3onSurfaceVariant
-				text: root.trailingIcon
-				fontStyle: Tokens.font.icon.builders.medium.scale(0.9).build()
-			}
-		}
-	}
-
-	Loader {
-		id: supportingTextLoader
-
-		active: root.effectiveSupportingText
-		anchors.bottom: parent.bottom
-		anchors.left: parent.left
-		anchors.leftMargin: root.horizontalPadding
-
-		sourceComponent: CustomText {
-			color: root.isError ? Colors.palette.m3error : Colors.palette.m3onSurfaceVariant
-			font: Tokens.font.label.small
-			text: root.effectiveSupportingText
+		Connections {
+			function onCursorPositionChanged(): void {
+				if (root.activeFocus && root.cursorVisible) {
+					cursor.opacity = 1;
+					cursor.disableBlink = true;
+					enableBlink.restart();
 				}
 			}
 
-	TapHandler {
-		id: tapHandler
+			target: root
 		}
 
-	Component {
-		id: outlineComp
+		Timer {
+			id: enableBlink
 
-		Shape {
-			id: bg
+			interval: 100
 
-			asynchronous: true
-			preferredRendererType: Shape.CurveRenderer
-
-			ShapePath {
-				id: path
-
-				readonly property real inset: strokeWidth / 2
-				readonly property real outlineGap: placeholder.width * root.smallFontScale + Tokens.spacing.small * 2
-				property real outlineGapScale: root.activeFocus || root.text ? 1 : 0
-
-				capStyle: ShapePath.RoundCap
-				fillColor: "transparent"
-				startX: path.inset + root.horizontalPadding - root.clampedRadius + path.outlineGap * (1 - path.outlineGapScale) / 2 + path.outlineGap * path.outlineGapScale
-				startY: path.inset
-				strokeColor: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : Colors.palette.m3outline)
-				strokeWidth: root.activeFocus ? 2 : 1
-
-				Behavior on outlineGapScale {
-					Anim {
-						type: Anim.DefaultEffects
-					}
-				}
-				Behavior on strokeColor {
-					CAnim {}
-				}
-				Behavior on strokeWidth {
-					Anim {}
+			onTriggered: cursor.disableBlink = false
 		}
 
-				PathLine {
-					x: bg.width - path.inset - root.clampedRadius
-					y: path.inset
+		Timer {
+			interval: 500
+			repeat: true
+			running: root.activeFocus && root.cursorVisible && !cursor.disableBlink
+			triggeredOnStart: true
+
+			onTriggered: parent.opacity = parent.opacity === 1 ? 0 : 1
 		}
 
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: bg.width - path.inset
-					y: path.inset + root.clampedRadius
-				}
-
-				PathLine {
-					x: bg.width - path.inset
-					y: bg.height - path.inset - root.clampedRadius
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: bg.width - path.inset - root.clampedRadius
-					y: bg.height - path.inset
-				}
-
-				PathLine {
-					x: path.inset + root.clampedRadius
-					y: bg.height - path.inset
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: path.inset
-					y: bg.height - path.inset - root.clampedRadius
-				}
-
-				PathLine {
-					x: path.inset
-					y: path.inset + root.clampedRadius
-				}
-
-				PathArc {
-					radiusX: root.clampedRadius
-					radiusY: root.clampedRadius
-					x: path.inset + root.clampedRadius
-					y: path.inset
-				}
-
-				PathLine {
-					x: path.inset + root.horizontalPadding - root.clampedRadius / 2 + path.outlineGap * (1 - path.outlineGapScale) / 2
-					y: path.inset
-				}
-			}
-		}
-	}
-
-	Component {
-		id: filledComp
-
-		CustomRect {
-			color: root.activeFocus ? Colors.tPalette.m3surfaceContainerHighest : Colors.tPalette.m3surfaceContainerHigh
-			topLeftRadius: root.clampedRadius
-			topRightRadius: root.clampedRadius
-
-			CustomRect {
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.right: parent.right
-				color: root.isError ? Colors.palette.m3error : (root.activeFocus ? Colors.palette.m3primary : Colors.palette.m3outline)
-				implicitHeight: root.activeFocus ? 2 : 1
-
-				Behavior on implicitHeight {
-					Anim {}
+		Binding {
+			cursor.opacity: 0
+			when: !root.activeFocus || !root.cursorVisible
 		}
 	}
+	Behavior on placeholderTextColor {
+		CAnim {
 		}
 	}
 }

Components/CustomTextInput.qml

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

Components/CustomTooltip.qml

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

Components/CustomTooltipContent.qml

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

Components/Elevation.qml

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

Components/ExtraIndicator.qml

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

Components/FadeImage.qml

@@ -1,79 +0,0 @@
-import QtQuick
-import Quickshell
-import ZShell.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/FilledSlider.qml

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

Components/GeminiGlow.qml

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

Components/GradientSlider.qml

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

Components/HorizontalScrollBarTrack.qml

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

Components/HoverIconButton.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Config
+
+IconButton {
+	id: root
+
+	required property bool shouldBeVisible
+
+	opacity: 0
+	scale: 0
+	visible: root.scale > 0
+
+	Behavior on opacity {
+		Anim {
+			duration: Appearance.anim.durations.small
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+
+	onShouldBeVisibleChanged: {
+		if (root.shouldBeVisible) {
+			root.opacity = 1;
+			root.scale = 1;
+		} else {
+			root.opacity = 0;
+			root.scale = 0;
+		}
+	}
+}

Components/IconButton.qml

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

Components/IconTextButton.qml

@@ -1,73 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import ZShell.Components
-import ZShell.Config
-import qs.Services
-
-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 ? Colors.palette.m3primary : Colors.palette.m3secondary
-	activeOnColor: {
-		if (type === TextButton.Text)
-			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondary;
-	}
-	horizontalPadding: Tokens.padding.small
-	implicitHeight: row.implicitHeight + verticalPadding * 2
-	implicitWidth: row.implicitWidth + horizontalPadding * 2
-	inactiveColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? Colors.tPalette.m3surfaceContainer : Colors.palette.m3secondaryContainer;
-	}
-	inactiveOnColor: {
-		if (!isToggle && type === TextButton.Filled)
-			return Colors.palette.m3onPrimary;
-		if (type === TextButton.Text)
-			return Colors.palette.m3primary;
-		return type === TextButton.Filled ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer;
-	}
-	verticalPadding: Tokens.padding.extraSmall
-
-	SnapLayout {
-		id: row
-
-		anchors.centerIn: parent
-
-		spacing: Tokens.spacing.small
-
-		MaterialIcon {
-			id: iconLabel
-
-			Layout.alignment: Qt.AlignVCenter
-			color: root.onColor
-			fill: root.internalChecked ? 1 : 0
-			fontStyle: {
-				const f = Qt.font(root.font);
-				f.pointSize = Math.round(root.font.pointSize * 1.2);
-				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/KineticFlickable.qml

@@ -1,23 +0,0 @@
-import QtQuick
-import qs.Services
-
-Flickable {
-	id: root
-
-	interactive: !ShellState.forActive().isDrawing
-
-	rebound: Transition {
-		Anim {
-			properties: "x,y"
-			type: Anim.FastEffects
-		}
-	}
-
-	readonly property KineticWheelScroller _scroller: KineticWheelScroller {
-		id: wheelScroller
-		anchors.fill: parent
-		parent: root
-		z: 12
-		flickable: root
-	}
-}

Components/KineticWheelScroller.qml

@@ -1,653 +0,0 @@
-import QtQuick
-
-// Taken from hyprfm: https://github.com/soyeb-jim285/hyprfm/blob/main/src/qml/views/KineticWheelScroller.qml
-// Adapted to fit this project where needed.
-
-// Deliberately not a MouseArea: a MouseArea claims the arrow cursor for its
-// whole area, which silently killed every cursorShape in the views this
-// overlays (column resize grips, pointer hands). A WheelHandler on a plain
-// Item takes wheel events without touching the cursor.
-Item {
-	id: root
-
-	required property var flickable
-
-	property real wheelStep: 56
-	property real mouseWheelMultiplier: 1.0
-	property real touchpadMultiplier: 1.35
-	property real minVelocity: 480
-	property real maxVelocity: 5200
-	property real kineticGain: 1.35
-	property real smoothing: 0.72
-	property real edgeEpsilon: 1.0
-	// Browser-style overscroll: larger visible rubber-band, softer
-	// resistance, and a springy settle on release.
-	property real overshootLimit: 140
-	property real overshootResistance: 0.38
-	property real maxOvershootInput: 520
-	// Bounce magnitude per unit of impact velocity. Keep this deliberately
-	// small: slow edge hits should settle, not fire a visibly faster bounce.
-	property real kineticBounceGain: 0.018
-	property real maxKineticBounceInput: 90
-	// Minimum impact velocity that actually produces a visible bounce.
-	// Very slow landings skip bounce entirely — matches what browsers do
-	// when a fling decays to near-zero before reaching the edge.
-	property real minBounceVelocity: 260
-
-	property real velocity: 0
-	property double lastWheelTimestamp: 0
-	property bool kineticCandidate: false
-	property real overshootInput: 0
-	property real overshootReleaseVelocity: 0
-	property real pendingKineticBounceVelocity: 0
-	// Set by runKineticGlide when the glide will clamp against an edge.
-	// It is the glide velocity at the instant of impact, which drives the
-	// elastic bounce amount and duration — browser-style: slow impact
-	// makes a small gentle bounce; fast impact makes a big springy one.
-	property real pendingImpactVelocity: 0
-
-	// Browser-style exponential-feeling glide replaces the linear
-	// flickDeceleration decay. Tail uses OutQuart — soft landing.
-	property real kineticTau: 0.42
-
-	property real mouseGlideTime: 0.09      // decay time constant (s); higher = longer coast
-	property real mouseAccelWindow: 140     // ms between notches that counts as "continuous"
-	property real mouseAccelStep: 0.15      // extra impulse multiplier per consecutive notch
-	property real mouseMaxAccel: 2.5
-	property real mouseSnap: 0.2   // fraction of each notch applied instantly (0 = fully glided, 1 = no smoothing)
-
-	property real mouseVelocity: 0
-	property int mouseDir: 0
-	property int mouseStreak: 0
-	property double mouseLastTime: 0
-
-	// Escape hatch if auto-detection misjudges a device
-	property bool forceMouseWheel: false
-
-	readonly property real visualOvershoot: overshootInput < 0 ? rubberDistance(-overshootInput) : -rubberDistance(overshootInput)
-
-	signal scrollStarted
-
-	WheelHandler {
-		id: wheelHandler
-		acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-		// `blocking` decides whether the event continues to the Flickable
-		// underneath; handleWheel() flips it per event (the old MouseArea
-		// code toggled wheel.accepted for the same purpose).
-		onWheel: wheel => root.handleWheel(wheel)
-	}
-
-	function isMouseWheel(wheel) {
-		if (forceMouseWheel)
-			return true;
-		var ay = wheel.angleDelta.y;
-		if (ay === 0)
-			return false;
-		return Math.abs(ay) % 120 === 0;
-	}
-
-	function minimumContentY() {
-		if (!flickable)
-			return 0;
-
-		return flickable.originY;
-	}
-
-	function maximumContentY() {
-		if (!flickable)
-			return 0;
-
-		return Math.max(minimumContentY(), minimumContentY() + flickable.contentHeight - flickable.height);
-	}
-
-	function boundedContentY(value) {
-		return Math.max(minimumContentY(), Math.min(maximumContentY(), value));
-	}
-
-	function rubberDistance(distance) {
-		if (distance <= 0)
-			return 0;
-
-		var scaled = (distance * overshootResistance) / overshootLimit;
-		return overshootLimit * (1 - 1 / (1 + scaled));
-	}
-
-	function setOvershootInput(value) {
-		overshootInput = Math.max(-maxOvershootInput, Math.min(maxOvershootInput, value));
-	}
-
-	function hasOvershoot() {
-		return Math.abs(overshootInput) > edgeEpsilon;
-	}
-
-	function absorbOvershoot(delta) {
-		if (!hasOvershoot())
-			return delta;
-
-		var sameDirection = (overshootInput < 0 && delta < 0) || (overshootInput > 0 && delta > 0);
-
-		if (sameDirection) {
-			setOvershootInput(overshootInput + delta);
-			return 0;
-		}
-
-		var combined = overshootInput + delta;
-		if ((overshootInput < 0 && combined < 0) || (overshootInput > 0 && combined > 0)) {
-			setOvershootInput(combined);
-			return 0;
-		}
-
-		setOvershootInput(0);
-		return combined;
-	}
-
-	function deltaFor(wheel) {
-		var rawDelta;
-		if (isMouseWheel(wheel))
-			rawDelta = (wheel.angleDelta.y / 120.0) * wheelStep * mouseWheelMultiplier;
-		else
-			rawDelta = wheel.pixelDelta.y !== 0 ? wheel.pixelDelta.y * touchpadMultiplier : (wheel.angleDelta.y / 120.0) * wheelStep * mouseWheelMultiplier;
-
-		return wheel.inverted ? rawDelta : -rawDelta;
-	}
-
-	function shouldUseKinetic(wheel, gap) {
-		return wheel.pixelDelta.y !== 0 || (wheel.phase !== Qt.NoScrollPhase && wheel.angleDelta.y === 0);
-	}
-
-	function scrollBy(delta) {
-		if (!flickable || Math.abs(delta) < 0.01)
-			return;
-		kineticBounceSequence.stop();
-		bounceBackAnimation.stop();
-
-		var remainingDelta = absorbOvershoot(delta);
-		if (Math.abs(remainingDelta) < 0.01)
-			return;
-		var minY = minimumContentY();
-		var maxY = maximumContentY();
-		var next = flickable.contentY + remainingDelta;
-
-		if (next < minY) {
-			flickable.contentY = minY;
-			setOvershootInput(overshootInput + next - minY);
-			return;
-		}
-
-		if (next > maxY) {
-			flickable.contentY = maxY;
-			setOvershootInput(overshootInput + next - maxY);
-			return;
-		}
-
-		flickable.contentY = next;
-	}
-
-	function remainingDistanceFor(velocityValue) {
-		if (!flickable)
-			return 0;
-
-		if (velocityValue > 0)
-			return Math.max(0, maximumContentY() - flickable.contentY);
-
-		if (velocityValue < 0)
-			return Math.max(0, flickable.contentY - minimumContentY());
-
-		return 0;
-	}
-
-	function clampedContentVelocity(velocityValue) {
-		if (!flickable || velocityValue === 0)
-			return 0;
-
-		var remaining = remainingDistanceFor(velocityValue);
-		if (remaining <= edgeEpsilon)
-			return 0;
-
-		var maxAllowed = Math.sqrt(2 * flickable.flickDeceleration * remaining);
-		var magnitude = Math.min(Math.abs(velocityValue), maxAllowed);
-		return velocityValue < 0 ? -magnitude : magnitude;
-	}
-
-	function resetState() {
-		velocity = 0;
-		lastWheelTimestamp = 0;
-		kineticCandidate = false;
-		pendingKineticBounceVelocity = 0;
-		pendingImpactVelocity = 0;
-		overshootReleaseVelocity = 0;
-		finishTimer.stop();
-		kineticAnim.stop();
-		kineticBounceSequence.stop();
-		bounceBackAnimation.stop();
-		stopMouseGlide();
-	}
-
-	function bounceBack() {
-		if (!hasOvershoot()) {
-			setOvershootInput(0);
-			overshootReleaseVelocity = 0;
-			return;
-		}
-
-		var mag = Math.min(1.0, Math.abs(overshootInput) / maxOvershootInput);
-		var speed = Math.abs(overshootReleaseVelocity);
-		var duration = speed >= minBounceVelocity ? Math.round(Math.max(280, Math.min(620, Math.abs(overshootInput) / speed * 1600))) : Math.round(380 + mag * 260);
-
-		kineticBounceSequence.stop();
-		bounceBackAnimation.stop();
-		bounceBackAnimation.duration = duration;
-		bounceBackAnimation.from = overshootInput;
-		bounceBackAnimation.to = 0;
-		overshootReleaseVelocity = 0;
-		bounceBackAnimation.start();
-	}
-
-	function triggerKineticBounce(contentVelocity) {
-		if (!flickable || contentVelocity === 0)
-			return;
-		var atTop = flickable.contentY <= minimumContentY() + edgeEpsilon;
-		var atBottom = flickable.contentY >= maximumContentY() - edgeEpsilon;
-		if ((contentVelocity < 0 && !atTop) || (contentVelocity > 0 && !atBottom))
-			return;
-		var speed = Math.abs(contentVelocity);
-		var effectiveVelocity = contentVelocity;
-		if (speed < minBounceVelocity)
-			effectiveVelocity = (contentVelocity < 0 ? -1 : 1) * Math.max(90, speed * 0.6);
-
-		var target = Math.max(-maxKineticBounceInput, Math.min(maxKineticBounceInput, effectiveVelocity * kineticBounceGain));
-		if (Math.abs(target) < 2.5)
-			target = contentVelocity < 0 ? -2.5 : 2.5;
-
-		var mag = Math.min(1.0, Math.abs(target) / maxKineticBounceInput);
-		var inDur = Math.round(150 + mag * 120);
-		var outDur = Math.round(320 + mag * 300);
-
-		kineticBounceSequence.stop();
-		bounceBackAnimation.stop();
-		overshootReleaseVelocity = 0;
-		overshootInput = 0;
-		kineticBounceIn.from = 0;
-		kineticBounceIn.to = target;
-		kineticBounceIn.duration = inDur;
-		kineticBounceOut.from = target;
-		kineticBounceOut.to = 0;
-		kineticBounceOut.duration = outDur;
-		kineticBounceSequence.start();
-	}
-
-	function stopAndSettle() {
-		kineticAnim.stop();
-		if (flickable && flickable.flicking)
-			flickable.cancelFlick();
-
-		resetState();
-		bounceBack();
-	}
-
-	function runKineticGlide(contentVelocity) {
-		// contentVelocity > 0 means the content should scroll downward
-		// (contentY increases), matching deltaFor()'s sign convention.
-		if (!flickable || contentVelocity === 0) {
-			pendingImpactVelocity = 0;
-			return false;
-		}
-
-		var current = flickable.contentY;
-		var unclampedTarget = current + contentVelocity * kineticTau;
-		var target = boundedContentY(unclampedTarget);
-		var distUnclamped = Math.abs(unclampedTarget - current);
-		var distActual = Math.abs(target - current);
-		if (distActual < 4) {
-			pendingImpactVelocity = 0;
-			return false;
-		}
-
-		// If the glide is clipped by an edge, compute the velocity at the
-		// moment of impact using the OutQuart velocity profile. That is
-		// the velocity the bounce should feed on — gentle impacts get
-		// gentle bounces, hard impacts get big springy ones.
-		var hitsEdge = distActual + 0.5 < distUnclamped;
-		if (hitsEdge && distUnclamped > 0) {
-			var f = distActual / distUnclamped;        // fraction covered
-			// OutQuart: y = 1 - (1-x)^4, so velocity fraction at distance
-			// fraction f equals (1-f)^(3/4) (times the constant peak).
-			var velFraction = Math.pow(Math.max(0, 1 - f), 0.75);
-			pendingImpactVelocity = contentVelocity * velFraction;
-		} else {
-			pendingImpactVelocity = 0;
-		}
-
-		kineticAnim.stop();
-		kineticAnim.from = current;
-		kineticAnim.to = target;
-		// Duration from distance and velocity; clamped so short flicks
-		// stay snappy and long flicks don't run forever.
-		kineticAnim.duration = Math.round(Math.min(1400, Math.max(180, distActual / Math.abs(contentVelocity) * 1800)));
-		kineticAnim.start();
-		return true;
-	}
-
-	function atEdgeFor(contentVelocity) {
-		if (!flickable)
-			return false;
-		if (contentVelocity > 0)
-			return flickable.contentY >= maximumContentY() - edgeEpsilon;
-		if (contentVelocity < 0)
-			return flickable.contentY <= minimumContentY() + edgeEpsilon;
-		return false;
-	}
-
-	function finishScroll() {
-		if (!flickable)
-			return;
-		finishTimer.stop();
-
-		if (hasOvershoot()) {
-			velocity = 0;
-			lastWheelTimestamp = 0;
-			kineticCandidate = false;
-			pendingKineticBounceVelocity = 0;
-			pendingImpactVelocity = 0;
-			kineticAnim.stop();
-			bounceBack();
-			return;
-		}
-
-		var rawContentVelocity = Math.max(-maxVelocity, Math.min(maxVelocity, velocity * kineticGain));
-		var contentVelocity = clampedContentVelocity(rawContentVelocity);
-		var useKinetic = kineticCandidate && Math.abs(rawContentVelocity) >= minVelocity;
-
-		velocity = 0;
-		lastWheelTimestamp = 0;
-		kineticCandidate = false;
-
-		if (useKinetic) {
-			if (atEdgeFor(rawContentVelocity)) {
-				// Already at the edge — fling bounces immediately.
-				pendingKineticBounceVelocity = 0;
-				triggerKineticBounce(rawContentVelocity);
-			} else if (Math.abs(contentVelocity) >= minVelocity && runKineticGlide(contentVelocity)) {
-				// Glide started — bounce fires on kineticAnim.onFinished
-				// if it lands at an edge.
-				pendingKineticBounceVelocity = contentVelocity;
-			} else {
-				pendingKineticBounceVelocity = 0;
-				flickable.returnToBounds();
-			}
-		} else {
-			pendingKineticBounceVelocity = 0;
-			flickable.returnToBounds();
-		}
-	}
-
-	function handleWheel(wheel) {
-		wheelHandler.blocking = true;
-		if (!enabled || !visible || !flickable || !flickable.visible || !flickable.interactive) {
-			wheelHandler.blocking = false;
-			return;
-		}
-
-		if (wheel.modifiers !== Qt.NoModifier) {
-			wheelHandler.blocking = false;
-			return;
-		}
-
-		if (maximumContentY() <= minimumContentY()) {
-			wheelHandler.blocking = false;
-			return;
-		}
-
-		var delta = deltaFor(wheel);
-		if (delta === 0) {
-			wheelHandler.blocking = false;
-			return;
-		}
-
-		// Cancel any in-flight glide — user input always wins, position
-		// stays where it is, then new delta is applied from there.
-		if (kineticAnim.running) {
-			pendingKineticBounceVelocity = 0;
-			pendingImpactVelocity = 0;
-			kineticAnim.stop();
-		}
-		kineticBounceSequence.stop();
-		bounceBackAnimation.stop();
-		if (flickable.flicking) {
-			pendingKineticBounceVelocity = 0;
-			pendingImpactVelocity = 0;
-			flickable.cancelFlick();
-		}
-
-		var now = Date.now();
-		var isTouchpad = !isMouseWheel(wheel) && (wheel.pixelDelta.y !== 0 || (wheel.phase !== Qt.NoScrollPhase && wheel.angleDelta.y === 0));
-		if (!isTouchpad) {
-			velocity = 0;
-			lastWheelTimestamp = 0;
-			kineticCandidate = false;
-			scrollStarted();
-			handleMouseDelta(delta, now);
-			return;
-		}
-
-		// Touchpad path (unchanged below), but cancel any mouse glide first
-		stopMouseGlide();
-
-		var gap = lastWheelTimestamp > 0 ? now - lastWheelTimestamp : 16;
-		var dt = Math.max(8, Math.min(24, gap));
-		var instantVelocity = (delta / dt) * 1000;
-
-		kineticCandidate = kineticCandidate || shouldUseKinetic(wheel, gap);
-		scrollStarted();
-		scrollBy(delta);
-
-		if (hasOvershoot()) {
-			overshootReleaseVelocity = Math.max(-maxVelocity, Math.min(maxVelocity, instantVelocity));
-			velocity = 0;
-			kineticCandidate = false;
-			lastWheelTimestamp = now;
-			finishTimer.restart();
-			return;
-		}
-
-		velocity = lastWheelTimestamp <= 0 ? instantVelocity : velocity * (1.0 - smoothing) + instantVelocity * smoothing;
-		lastWheelTimestamp = now;
-		finishTimer.restart();
-
-		if (wheel.phase === Qt.ScrollEnd)
-			finishScroll();
-	}
-
-	function stopMouseGlide() {
-		mouseGlide.stop();
-		mouseVelocity = 0;
-		mouseDir = 0;
-		mouseStreak = 0;
-		mouseLastTime = 0;
-	}
-
-	function handleMouseDelta(delta, now) {
-		var dir = delta > 0 ? 1 : -1;
-
-		// Edge or active overshoot: existing rubber-band path
-		if (hasOvershoot() || atEdgeFor(dir)) {
-			stopMouseGlide();
-			scrollBy(delta);
-			overshootReleaseVelocity = 0;
-			finishTimer.restart();
-			return;
-		}
-
-		var continuous = dir === mouseDir && (now - mouseLastTime) <= mouseAccelWindow;
-		if (!continuous)
-			mouseVelocity = 0;              // new gesture or reversal: start clean
-		mouseStreak = continuous ? mouseStreak + 1 : 0;
-
-		// Compute the gap BEFORE overwriting mouseLastTime
-		var gap = mouseLastTime > 0 ? Math.max(12, Math.min(mouseAccelWindow, now - mouseLastTime)) : 0;
-
-		mouseDir = dir;
-		mouseLastTime = now;
-
-		var accel = Math.min(mouseMaxAccel, 1 + mouseStreak * mouseAccelStep);
-
-		// --- velocity update (this is the part that changed) ---
-
-		// Part of the notch lands immediately
-		var instant = delta * mouseSnap;
-		flickable.contentY = boundedContentY(flickable.contentY + instant);
-
-		// The rest becomes glide velocity, stacked onto the current velocity
-		var glide = delta * (1 - mouseSnap) * accel;
-		var v = mouseVelocity + glide / mouseGlideTime;
-
-		// While notches keep arriving, don't fall below the rate they imply
-		if (continuous && gap > 0) {
-			var rate = glide / (gap / 1000);
-			if (Math.abs(rate) > Math.abs(v))
-				v = rate;
-		}
-		mouseVelocity = Math.max(-maxVelocity, Math.min(maxVelocity, v));
-
-		// --- end velocity update ---
-
-		if (!mouseGlide.running)
-			mouseGlide.start();
-	}
-
-	function stepMouseGlide(dt) {
-		if (!flickable || flickable.dragging) {
-			stopMouseGlide();
-			return;
-		}
-
-		dt = Math.min(dt, 0.05);
-		var decay = Math.exp(-dt / mouseGlideTime);
-		// Exact integral of v0 * e^(-t/tau) over dt, so it's frame-rate independent
-		var step = mouseVelocity * mouseGlideTime * (1 - decay);
-		var next = flickable.contentY + step;
-		var minY = minimumContentY();
-		var maxY = maximumContentY();
-
-		if (next <= minY || next >= maxY) {
-			var impact = mouseVelocity;
-			flickable.contentY = next <= minY ? minY : maxY;
-			mouseGlide.stop();
-			mouseVelocity = 0;
-			mouseDir = 0;
-			mouseStreak = 0;
-			triggerKineticBounce(impact);   // bounce scales with the real impact speed
-			return;
-		}
-
-		flickable.contentY = next;
-		mouseVelocity *= decay;
-
-		if (Math.abs(mouseVelocity) < 40)   // was 8
-			stopMouseGlide();
-	}
-
-	FrameAnimation {
-		id: mouseGlide
-		onTriggered: root.stepMouseGlide(frameTime)
-	}
-
-	Timer {
-		id: finishTimer
-		interval: 45
-		repeat: false
-		onTriggered: root.finishScroll()
-	}
-
-	NumberAnimation {
-		id: kineticAnim
-		target: root.flickable
-		property: "contentY"
-		easing.type: Easing.OutQuart
-		onFinished: {
-			// Prefer the impact-time velocity (computed in runKineticGlide)
-			// so the bounce matches the residual energy at the moment the
-			// glide hit the edge — slow landings → soft bounce, fast
-			// landings → big springy bounce.
-			var bv = Math.abs(root.pendingImpactVelocity) > root.edgeEpsilon ? root.pendingImpactVelocity : root.pendingKineticBounceVelocity;
-			root.pendingImpactVelocity = 0;
-			root.pendingKineticBounceVelocity = 0;
-			if (Math.abs(bv) > root.edgeEpsilon)
-				root.triggerKineticBounce(bv);
-		}
-	}
-
-	NumberAnimation {
-		id: bounceBackAnimation
-		target: root
-		property: "overshootInput"
-		easing.type: Easing.OutCubic
-	}
-
-	SequentialAnimation {
-		id: kineticBounceSequence
-
-		NumberAnimation {
-			id: kineticBounceIn
-			target: root
-			property: "overshootInput"
-			easing.type: Easing.OutCubic
-		}
-
-		NumberAnimation {
-			id: kineticBounceOut
-			target: root
-			property: "overshootInput"
-			easing.type: Easing.OutCubic
-		}
-	}
-
-	Translate {
-		id: overshootTranslate
-		y: root.visualOvershoot
-	}
-
-	Connections {
-		target: root.flickable
-
-		function onInteractiveChanged() {
-			if (!root.flickable.interactive)
-				root.stopAndSettle();
-		}
-
-		function onContentHeightChanged() {
-			if (!root.flickable.moving) {
-				root.flickable.contentY = root.boundedContentY(root.flickable.contentY);
-				root.bounceBack();
-			}
-		}
-
-		function onHeightChanged() {
-			if (!root.flickable.moving) {
-				root.flickable.contentY = root.boundedContentY(root.flickable.contentY);
-				root.bounceBack();
-			}
-		}
-
-		function onVisibleChanged() {
-			if (!root.flickable.visible)
-				root.stopAndSettle();
-		}
-
-		function onMovementEnded() {
-			if (Math.abs(root.pendingKineticBounceVelocity) > root.edgeEpsilon) {
-				var bounceVelocity = root.pendingKineticBounceVelocity;
-				root.pendingKineticBounceVelocity = 0;
-				root.triggerKineticBounce(bounceVelocity);
-			}
-		}
-	}
-
-	Component.onCompleted: {
-		if (!flickable)
-			return;
-		flickable.flickDeceleration = 2800;
-		flickable.maximumFlickVelocity = Math.max(flickable.maximumFlickVelocity, maxVelocity);
-		flickable.contentItem.transform = [overshootTranslate];
-	}
-}

Components/LineGraph.qml

@@ -1,506 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtCanvas2D
-import ZShell
-
-Item {
-	id: root
-
-	required property list<var> values
-
-	property int xSteps: 24
-	property real yMin: NaN
-	property real yMax: NaN
-	property real yPaddingTop: 0
-	property real yPaddingBottom: 0
-
-	property int verticalLineStep: 0
-	property int horizontalLineStep: 0
-	property bool firstXLine: true
-	property bool lastXLine: false
-	property int minHorizontalLines: 0
-
-	property var xLabel: null
-	property var yLabel: null
-
-	property real smoothing: 0
-	property bool curveSmoothing: true
-	property real markerX: -1
-	property real markerGap: 2 // px gap between line and marker dot edge, each side
-
-	property color lineColor: "white"
-	property color gridColor: "white"
-	property color markerColor: "white"
-	property color labelColor: "white"
-	property real gridAlpha: 0.12
-	property real labelAlpha: 0.6
-	property real fillAlpha: 0.15
-	property real lineWidth: 2
-	property real markerDotRadius: 4
-	property real labelFontSize: 8
-
-	Canvas2D {
-		id: canvas
-
-		anchors.fill: parent
-
-		alphaBlending: true
-		fillColor: "transparent"
-
-		onWidthChanged: requestPaint()
-		onHeightChanged: requestPaint()
-
-		function snapV(v) {
-			return ZUtils.snap(v, canvas);
-		}
-
-		// A value is plottable only if it is a real number. Everything else -
-		// null, undefined, NaN, an unparsable string from the API - is a hole, so
-		// the series splits there. Non-finite coordinates must never reach the
-		// path: one NaN lineTo makes the canvas ignore the rest of the curve, and
-		// the fill then runs from whatever y it last had straight down.
-		function numeric(v) {
-			if (typeof v === "number")
-				return Number.isFinite(v) ? v : null;
-			if (typeof v === "string") {
-				const n = Number(v);
-				return Number.isFinite(n) ? n : null;
-			}
-			return null;
-		}
-
-		function strokeCurve(ctx, pts) {
-			ctx.beginPath();
-			ctx.moveTo(pts[0].x, pts[0].y);
-
-			const dpr = ZUtils.dprFor(canvas);
-			for (let i = 0; i < pts.length - 1; i++) {
-				const p1 = pts[i];
-				const p2 = pts[i + 1];
-				const [c1x, c1y, c2x, c2y] = segmentControls(pts, i);
-
-				const firstCol = Math.ceil(p1.x * dpr) + 1;
-				const lastCol = Math.floor(p2.x * dpr) - 1;
-				for (let col = firstCol; col <= lastCol; ++col) {
-					const x = col / dpr;
-					ctx.lineTo(x, bezierY(p1, c1x, c1y, c2x, c2y, p2, x));
-				}
-
-				ctx.lineTo(p2.x, p2.y);
-			}
-		}
-
-		function bezierY(p1, c1x, c1y, c2x, c2y, p2, targetX) {
-			let tlo = 0;
-			let thi = 1;
-			for (let it = 0; it < 16; it++) {
-				const tm = (tlo + thi) / 2;
-				const u = 1 - tm;
-				const x = u * u * u * p1.x + 3 * u * u * tm * c1x + 3 * u * tm * tm * c2x + tm * tm * tm * p2.x;
-				if (x < targetX)
-					tlo = tm;
-				else
-					thi = tm;
-			}
-
-			const t = (tlo + thi) / 2;
-			const u = 1 - t;
-			return u * u * u * p1.y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * p2.y;
-		}
-
-		function segmentControls(pts, i) {
-			const p0 = pts[Math.max(i - 1, 0)];
-			const p1 = pts[i];
-			const p2 = pts[i + 1];
-			const p3 = pts[Math.min(i + 2, pts.length - 1)];
-
-			if (root.curveSmoothing && pts.length > 2) {
-				const k = 1 / 6;
-				let c1x = p1.x + (p2.x - p0.x) * k;
-				let c1y = p1.y + (p2.y - p0.y) * k;
-				let c2x = p2.x - (p3.x - p1.x) * k;
-				let c2y = p2.y - (p3.y - p1.y) * k;
-
-				const minY = Math.min(p1.y, p2.y);
-				const maxY = Math.max(p1.y, p2.y);
-				c1y = Math.max(minY, Math.min(maxY, c1y));
-				c2y = Math.max(minY, Math.min(maxY, c2y));
-
-				return [c1x, c1y, c2x, c2y];
-			}
-
-			const cx = (p1.x + p2.x) * 0.5;
-			return [cx, p1.y, cx, p2.y];
-		}
-
-		function pointAtX(pts, targetX) {
-			let j = pts.length - 2;
-			for (let i = 0; i < pts.length - 1; i++) {
-				if (targetX <= pts[i + 1].x) {
-					j = i;
-					break;
-				}
-			}
-
-			const p1 = pts[j];
-			const p2 = pts[j + 1];
-			const [c1x, c1y, c2x, c2y] = segmentControls(pts, j);
-
-			let tlo = 0;
-			let thi = 1;
-			for (let it = 0; it < 24; it++) {
-				const tm = (tlo + thi) / 2;
-				const u = 1 - tm;
-				const x = u * u * u * p1.x + 3 * u * u * tm * c1x + 3 * u * tm * tm * c2x + tm * tm * tm * p2.x;
-				if (x < targetX)
-					tlo = tm;
-				else
-					thi = tm;
-			}
-
-			const t = (tlo + thi) / 2;
-			const u = 1 - t;
-			const y = u * u * u * p1.y + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * p2.y;
-			return {
-				x: targetX,
-				y
-			};
-		}
-
-		function cutPoint(pts, targetX) {
-			return pointAtX(pts, targetX);
-		}
-
-		function cutLeft(pts, targetX) {
-			if (targetX <= pts[0].x)
-				return [];
-			if (targetX >= pts[pts.length - 1].x)
-				return pts.slice();
-
-			let j = pts.length - 2;
-			for (let i = 0; i < pts.length - 1; i++) {
-				if (targetX <= pts[i + 1].x) {
-					j = i;
-					break;
-				}
-			}
-
-			const left = pts.slice(0, j + 1);
-			if (targetX > pts[j].x)
-				left.push(cutPoint(pts, targetX));
-			return left;
-		}
-
-		function cutRight(pts, targetX) {
-			if (targetX >= pts[pts.length - 1].x)
-				return [];
-			if (targetX <= pts[0].x)
-				return pts.slice();
-
-			let j = pts.length - 2;
-			for (let i = 0; i < pts.length - 1; i++) {
-				if (targetX <= pts[i + 1].x) {
-					j = i;
-					break;
-				}
-			}
-
-			const right = pts.slice(j + 1);
-			if (targetX < pts[j + 1].x)
-				right.unshift(pointAtX(pts, targetX));
-			return right;
-		}
-
-		onPaint: {
-			const ctx = getContext("2d");
-			if (!ctx)
-				return;
-			ctx.reset();
-			ctx.clearRect(0, 0, width, height);
-
-			const W = width;
-			const H = height;
-			if (W < 2 || H < 2)
-				return;
-
-			const padLeft = root.labelFontSize * 5;
-			const padRight = 0;
-			const padTop = 0;
-			const padBottom = root.labelFontSize + 14;
-			const plot = {
-				x: padLeft,
-				y: padTop,
-				w: W - padLeft - padRight,
-				h: H - padTop - padBottom
-			};
-			if (plot.w < 2 || plot.h < 2)
-				return;
-
-			let lo = root.yMin;
-			let hi = root.yMax;
-			const loAuto = Number.isNaN(lo);
-			const hiAuto = Number.isNaN(hi);
-
-			if (loAuto || hiAuto) {
-				let dmin = Infinity;
-				let dmax = -Infinity;
-				for (const value of root.values) {
-					const v = numeric(value);
-					if (v == null)
-						continue;
-					if (v < dmin)
-						dmin = v;
-					if (v > dmax)
-						dmax = v;
-				}
-				if (dmin === Infinity) {
-					dmin = 0;
-					dmax = 1;
-				}
-
-				const step = root.horizontalLineStep;
-				const minSteps = root.minHorizontalLines > 1 ? root.minHorizontalLines - 1 : 0;
-
-				if (step > 0) {
-					if (hiAuto) {
-						const baseLo = loAuto ? Math.floor(dmin / step) * step : lo;
-						const span = Math.max(Math.ceil((dmax - baseLo) / step), minSteps, 1);
-						lo = baseLo;
-						hi = baseLo + span * step;
-					} else {
-						const span = Math.max(Math.ceil((hi - dmin) / step), minSteps, 1);
-						lo = hi - span * step;
-					}
-				} else {
-					if (loAuto)
-						lo = dmin;
-					if (hiAuto)
-						hi = dmax;
-					if (hi <= lo)
-						hi = lo + 1;
-				}
-			}
-
-			const scaleBottom = lo - root.yPaddingBottom;
-			const scaleTop = hi + root.yPaddingTop;
-			const range = scaleTop - scaleBottom;
-			if (range <= 0 || root.xSteps < 1)
-				return;
-
-			let series = root.values.map(v => numeric(v));
-			if (root.smoothing > 0 && series.length > 0) {
-				const radius = Math.round(root.smoothing);
-				const raw = series;
-				series = raw.map((v, i) => {
-					if (v == null)
-						return null;
-
-					let sum = 0;
-					let n = 0;
-					for (let j = -radius; j <= radius; j++) {
-						const u = raw[i + j];
-						if (u != null) {
-							sum += u;
-							n++;
-						}
-					}
-					return n > 0 ? sum / n : null;
-				});
-			}
-
-			const xAt = i => plot.x + (i / root.xSteps) * plot.w;
-			const yAt = v => plot.y + (1 - (v - scaleBottom) / range) * plot.h;
-
-			const dpr = ZUtils.dprFor(canvas);
-			const devW = w => Math.max(1, Math.round(w * dpr));
-			const snapLine = (v, w) => {
-				const dw = devW(w);
-				return (Math.round(v * dpr - dw / 2) + dw / 2) / dpr;
-			};
-			const gridW = devW(1) / dpr;
-
-			ctx.strokeStyle = Qt.alpha(root.gridColor, root.gridAlpha);
-			ctx.lineWidth = gridW;
-
-			if (root.verticalLineStep > 0) {
-				for (let i = 0; i <= root.xSteps; i += root.verticalLineStep) {
-					if (i === 0 && !root.firstXLine)
-						continue;
-					if (i === root.xSteps && !root.lastXLine)
-						continue;
-
-					const x = snapLine(xAt(i), 1);
-					ctx.beginPath();
-					ctx.moveTo(x, plot.y);
-					ctx.lineTo(x, H);
-					ctx.stroke();
-				}
-			}
-
-			const vStart = lo - (root.yPaddingBottom > 0 ? Math.floor(root.yPaddingBottom / root.horizontalLineStep) * root.horizontalLineStep : 0);
-
-			if (root.horizontalLineStep > 0) {
-				for (let v = vStart; v <= hi + 0.001; v += root.horizontalLineStep) {
-					const y = snapLine(yAt(v), 1);
-					ctx.beginPath();
-					ctx.moveTo(0, y);
-					ctx.lineTo(plot.x + plot.w, y);
-					ctx.stroke();
-				}
-			}
-
-			ctx.fillStyle = Qt.alpha(root.labelColor, root.labelAlpha);
-			ctx.font = root.labelFontSize + "pt 'sans-serif'";
-
-			ctx.textAlign = "left";
-			ctx.textBaseline = "top";
-			if (root.verticalLineStep > 0 && root.xLabel) {
-				for (let i = 0; i <= root.xSteps; i += root.verticalLineStep) {
-					if (i === 0 && !root.firstXLine)
-						continue;
-					if (i === root.xSteps && !root.lastXLine)
-						continue;
-
-					const text = root.xLabel(i);
-					if (text)
-						ctx.fillText(text, xAt(i) + 4, plot.y + plot.h + 8);
-				}
-			}
-
-			ctx.textBaseline = "bottom";
-			if (root.horizontalLineStep > 0 && root.yLabel) {
-				for (let v = vStart; v <= hi + 0.001; v += root.horizontalLineStep) {
-					const text = root.yLabel(v);
-					if (text)
-						ctx.fillText(text, 2, yAt(v) - 2);
-				}
-			}
-
-			const segments = [];
-			let current = null;
-			for (let i = 0; i < series.length; i++) {
-				if (series[i] == null) {
-					if (current)
-						segments.push(current);
-					current = null;
-					continue;
-				}
-				const pt = {
-					x: snapV(xAt(i)),
-					y: yAt(series[i])
-				};
-				if (!current)
-					current = [];
-				current.push(pt);
-			}
-			if (current)
-				segments.push(current);
-
-			ctx.lineCap = "round";
-			ctx.lineJoin = "round";
-
-			const hasMarker = root.markerX >= 0 && root.markerX <= root.xSteps;
-			const markerPx = hasMarker ? xAt(root.markerX) : 0;
-			let gapPx = 0;
-			if (hasMarker) {
-				let slope = 0;
-				const seg = segments.find(s => s[0].x <= markerPx && markerPx <= s[s.length - 1].x);
-				if (seg && seg.length > 2 && markerPx - 1 >= seg[0].x && markerPx + 1 <= seg[seg.length - 1].x)
-					slope = (pointAtX(seg, markerPx + 1).y - pointAtX(seg, markerPx - 1).y) / 2;
-				gapPx = (root.markerDotRadius + root.markerGap) / Math.sqrt(1 + slope * slope);
-			}
-
-			for (const seg of segments) {
-				if (seg.length < 2)
-					continue;
-
-				ctx.fillStyle = Qt.alpha(root.lineColor, root.fillAlpha);
-				strokeCurve(ctx, seg);
-				ctx.lineTo(seg[seg.length - 1].x, plot.y + plot.h);
-				ctx.lineTo(seg[0].x, plot.y + plot.h);
-				ctx.closePath();
-				ctx.fill();
-
-				const pieces = hasMarker ? [cutLeft(seg, markerPx - gapPx), cutRight(seg, markerPx + gapPx)] : [seg];
-
-				for (const pts of pieces) {
-					if (pts.length < 2)
-						continue;
-
-					ctx.strokeStyle = root.lineColor;
-					ctx.lineWidth = ZUtils.snap(root.lineWidth, root);
-					strokeCurve(ctx, pts);
-					ctx.stroke();
-				}
-			}
-
-			if (root.markerX >= 0 && root.markerX <= root.xSteps) {
-				const x = markerPx;
-
-				ctx.strokeStyle = Qt.alpha(root.markerColor, 0.6);
-				ctx.lineWidth = gridW;
-				const lineX = snapLine(x, 1);
-				let dashY = plot.y;
-				let dashOn = true;
-
-				while (dashY < H) {
-					const dashEnd = Math.min(dashY + 4, H);
-					if (dashOn) {
-						ctx.beginPath();
-						ctx.moveTo(lineX, snapV(dashY));
-						ctx.lineTo(lineX, snapV(dashEnd));
-						ctx.stroke();
-					}
-					dashY = dashEnd;
-					dashOn = !dashOn;
-				}
-
-				const i0 = Math.floor(root.markerX);
-				const v0 = series[i0];
-				const v1 = series[i0 + 1];
-				let y = null;
-
-				if (v0 != null && v1 != null)
-					y = yAt(v0 + (v1 - v0) * (root.markerX - i0));
-				else if (v0 != null)
-					y = yAt(v0);
-
-				if (y != null) {
-					ctx.fillStyle = root.markerColor;
-					ctx.beginPath();
-					ctx.circle(snapV(x), y, root.markerDotRadius);
-					ctx.fill();
-				}
-			}
-		}
-	}
-
-	onValuesChanged: canvas.requestPaint()
-	onXStepsChanged: canvas.requestPaint()
-	onYMinChanged: canvas.requestPaint()
-	onYMaxChanged: canvas.requestPaint()
-	onYPaddingTopChanged: canvas.requestPaint()
-	onYPaddingBottomChanged: canvas.requestPaint()
-	onVerticalLineStepChanged: canvas.requestPaint()
-	onHorizontalLineStepChanged: canvas.requestPaint()
-	onFirstXLineChanged: canvas.requestPaint()
-	onLastXLineChanged: canvas.requestPaint()
-	onMinHorizontalLinesChanged: canvas.requestPaint()
-	onXLabelChanged: canvas.requestPaint()
-	onYLabelChanged: canvas.requestPaint()
-	onSmoothingChanged: canvas.requestPaint()
-	onCurveSmoothingChanged: canvas.requestPaint()
-	onMarkerXChanged: canvas.requestPaint()
-	onMarkerGapChanged: canvas.requestPaint()
-	onLineColorChanged: canvas.requestPaint()
-	onGridColorChanged: canvas.requestPaint()
-	onMarkerColorChanged: canvas.requestPaint()
-	onLabelColorChanged: canvas.requestPaint()
-	onGridAlphaChanged: canvas.requestPaint()
-	onLabelAlphaChanged: canvas.requestPaint()
-	onFillAlphaChanged: canvas.requestPaint()
-	onLineWidthChanged: canvas.requestPaint()
-	onMarkerDotRadiusChanged: canvas.requestPaint()
-	onLabelFontSizeChanged: canvas.requestPaint()
-}

Components/LoadingIndicator.qml

@@ -1,115 +0,0 @@
-import QtQuick
-import Quickshell
-import M3Shapes
-import ZShell.Config
-import qs.Services
-
-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: Colors.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/MarqueeText.qml

@@ -1,13 +1,12 @@
 import QtQuick
-import ZShell.Config
-import qs.Services
+import qs.Config
 
 Item {
 	id: root
 
 	property alias anim: marqueeAnim
 	property bool animate: false
-	property color color: Colors.palette.m3onSurface
+	property color color: DynamicColors.palette.m3onSurface
 	property int fadeStrengthAnimMs: 180
 	property real fadeStrengthIdle: 0.0
 	property real fadeStrengthMoving: 1.0
@@ -18,14 +17,13 @@ Item {
 	property real leftFadeStrength: overflowing && leftFadeEnabled ? fadeStrengthMoving : fadeStrengthIdle
 	property int leftFadeWidth: 28
 	property bool marqueeEnabled: true
-	readonly property bool overflowing: metrics.width > content.width
+	readonly property bool overflowing: metrics.width > root.width
 	property int pauseMs: 1200
 	property real pixelsPerSecond: 40
 	property real rightFadeStrength: overflowing ? fadeStrengthMoving : fadeStrengthIdle
 	property int rightFadeWidth: 28
 	property bool sliding: false
 	property alias text: elideText.text
-	property bool vertical: false
 
 	function durationForDistance(px): int {
 		return Math.max(1, Math.round(Math.abs(px) / root.pixelsPerSecond * 1000));
@@ -42,9 +40,8 @@ Item {
 		}
 	}
 
-	clip: false
-	implicitHeight: vertical ? elideText.implicitWidth : elideText.implicitHeight
-	implicitWidth: vertical ? elideText.implicitHeight : elideText.implicitWidth
+	clip: true
+	implicitHeight: elideText.implicitHeight
 
 	Behavior on leftFadeStrength {
 		Anim {
@@ -55,26 +52,11 @@ Item {
 		}
 	}
 
-	onHeightChanged: resetMarquee()
 	onTextChanged: resetMarquee()
-	onVerticalChanged: resetMarquee()
 	onVisibleChanged: if (!visible)
 		resetMarquee()
 	onWidthChanged: resetMarquee()
 
-	Item {
-		id: content
-
-		anchors.centerIn: parent
-		height: root.vertical ? root.width : root.height
-		width: root.vertical ? root.height : root.width
-
-		transform: Rotation {
-			angle: root.vertical ? -90 : 0
-			origin.x: content.width / 2
-			origin.y: content.height / 2
-		}
-
 	TextMetrics {
 		id: metrics
 
@@ -91,14 +73,14 @@ Item {
 		color: root.color
 		elide: Text.ElideNone
 		visible: !root.overflowing
-			width: content.width
+		width: root.width
 	}
 
 	Item {
 		id: marqueeViewport
 
 		anchors.fill: parent
-			clip: false
+		clip: true
 		layer.enabled: true
 		visible: root.overflowing
 
@@ -239,4 +221,3 @@ Item {
 		}
 	}
 }
-}

Components/MaterialIcon.qml

@@ -1,14 +1,15 @@
-import QtQuick
-import ZShell.Config
-import qs.Services
+import qs.Config
 
 CustomText {
-	id: root
+	property real fill
+	property int grade: DynamicColors.light ? 0 : -25
 
-	property real fill: 0
-	property int grade: Colors.light ? 0 : -25
-	property font fontStyle: Tokens.font.icon.small
-
-	renderType: Text.NativeRendering
-	font: Tokens.font.icon.size(fontStyle.pointSize).weight(fontStyle.weight).vaxes(fontStyle.variableAxes).fill(fill.toFixed(1)).grade(grade).build()
+	font.family: "Material Symbols Rounded"
+	font.pointSize: Appearance.font.size.larger
+	font.variableAxes: ({
+			FILL: fill.toFixed(1),
+			GRAD: grade,
+			opsz: fontInfo.pixelSize,
+			wght: fontInfo.weight
+		})
 }

Components/Menu.qml

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

Components/Notifs/NotifActions.qml

@@ -1,120 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import Quickshell.Services.Notifications
-import Quickshell.Widgets
-import ZShell.Components
-import ZShell.Config
-import ZShell.Services
-import qs.Components
-import qs.Services
-
-ButtonRow {
-	id: root
-
-	required property NotificationRow notif
-	required property color buttonColour
-
-	readonly property color fillColour: notif.urgency === NotificationUrgency.Critical ? Colors.palette.m3secondary : buttonColour
-	readonly property color buttonTextColour: notif.urgency === NotificationUrgency.Critical ? Colors.palette.m3onSecondary : Colors.palette.m3onSurfaceVariant
-
-	function invoke(action: var): void {
-		action.invoke();
-		if (!notif.resident)
-			notif.dismiss();
-	}
-
-	spacing: Tokens.spacing.extraSmall
-
-	IconButton {
-		isRound: true
-		shapeMorph: true
-		fillWidth: root.notif.actions.length === 0
-		inactiveColor: root.fillColour
-		inactiveOnColor: root.buttonTextColour
-		icon: "close"
-		padding: Tokens.padding.extraSmall
-		onClicked: root.notif.dismiss()
-	}
-
-	Repeater {
-		model: root.notif.actions
-
-		delegate: root.notif.hasActionIcons ? iconAction : textAction
-	}
-
-	IconButton {
-		isRound: true
-		shapeMorph: true
-		fillWidth: root.notif.actions.length === 0
-		inactiveColor: root.fillColour
-		inactiveOnColor: root.buttonTextColour
-		icon: copyTimer.running ? "inventory" : "content_copy"
-		padding: Tokens.padding.extraSmall
-		onClicked: {
-			Quickshell.clipboardText = root.notif.body;
-			copyTimer.restart();
-		}
-		label.animate: true
-
-		Timer {
-			id: copyTimer
-
-			interval: 3000
-		}
-	}
-
-	Component {
-		id: textAction
-
-		TextButton {
-			required property var modelData
-
-			isRound: true
-			shapeMorph: true
-			fillWidth: true
-			inactiveColor: root.fillColour
-			inactiveOnColor: root.buttonTextColour
-			text: modelData.text
-			onClicked: root.invoke(modelData)
-
-			label.horizontalAlignment: Text.AlignHCenter
-			label.anchors.left: left
-			label.anchors.right: right
-			label.anchors.verticalCenter: verticalCenter
-			label.anchors.centerIn: undefined
-			label.anchors.margins: Tokens.padding.medium
-			label.elide: Text.ElideRight
-		}
-	}
-
-	Component {
-		id: iconAction
-
-		ButtonBase {
-			id: button
-
-			required property var modelData
-
-			isRound: true
-			shapeMorph: true
-			fillWidth: true
-			padding: Tokens.padding.extraSmall
-			inactiveColor: root.fillColour
-			inactiveOnColor: root.buttonTextColour
-			implicitWidth: implicitHeight
-			implicitHeight: icon.implicitHeight + padding * 2
-			onClicked: root.invoke(modelData)
-
-			IconImage {
-				id: icon
-
-				anchors.centerIn: parent
-				implicitSize: Math.round(Tokens.font.icon.medium.pointSize * 1.3)
-				asynchronous: true
-				source: Quickshell.iconPath(button.modelData.identifier)
-			}
-		}
-	}
-}

Components/Notifs/NotifAvatar.qml

@@ -1,201 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Shapes
-import Quickshell
-import ZShell
-import M3Shapes
-import ZShell.Config
-import qs.Components
-import qs.Helpers
-import qs.Services
-import Quickshell.Services.Notifications
-
-Item {
-	id: root
-
-	required property var owner
-	required property string image
-	required property string icon
-	required property int urgency
-	required property string summary
-	required property color lowFillColour
-	property real progress: 0
-	property string shownImage
-	property string shownIcon
-
-	readonly property color fillColour: urgency === NotificationUrgency.Critical ? Colors.palette.m3primary : urgency === NotificationUrgency.Low ? lowFillColour : Colors.palette.m3secondaryContainer
-	readonly property color iconColour: urgency === NotificationUrgency.Critical ? Colors.palette.m3onPrimary : urgency === NotificationUrgency.Low ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSecondaryContainer
-
-	implicitWidth: Config.notifs.sizes.image
-	implicitHeight: Config.notifs.sizes.image
-
-	// Keeping the previously shown url avoids replaying the fade when a row
-	// swaps between its raw source and the cached blob.
-	onImageChanged: {
-		if (image && !owner.isSameImage(shownImage))
-			shownImage = image;
-	}
-	onIconChanged: {
-		if (icon && !owner.isSameAppIcon(shownIcon))
-			shownIcon = icon;
-	}
-	Component.onCompleted: {
-		shownImage = image;
-		shownIcon = icon;
-	}
-
-	Component {
-		id: imageComp
-
-		FadeImage {
-			source: Qt.resolvedUrl(root.shownImage)
-			width: Config.notifs.sizes.image
-			height: Config.notifs.sizes.image
-			fadeInLargeAnim: Anim.DefaultEffects
-		}
-	}
-
-	Component {
-		id: appIconComp
-
-		FadeIcon {
-			size: Math.round(Config.notifs.sizes.image * 0.6)
-		}
-	}
-
-	Component {
-		id: materialIconComp
-
-		MaterialIcon {
-			animate: true
-			text: Icons.getNotifIcon(root.summary, root.urgency)
-			color: root.iconColour
-			fontStyle: Tokens.font.icon.medium
-		}
-	}
-
-	MaterialShape {
-		id: bgShape
-
-		anchors.fill: parent
-		shape: contentLoader.sourceComponent === materialIconComp && root.urgency === NotificationUrgency.Critical ? MaterialShape.SoftBurst : MaterialShape.Circle
-		color: Qt.alpha(root.fillColour, 1)
-		opacity: root.fillColour.a
-
-		Behavior on color {
-			CAnim {}
-		}
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.SlowEffects
-			}
-		}
-	}
-
-	Item {
-		anchors.fill: parent
-
-		Loader {
-			id: contentLoader
-
-			anchors.centerIn: parent
-			anchors.verticalCenterOffset: sourceComponent === materialIconComp ? 1 : 0
-			asynchronous: true
-			sourceComponent: root.image ? imageComp : root.icon ? appIconComp : materialIconComp
-		}
-	}
-
-	Loader {
-		asynchronous: true
-		anchors.right: parent.right
-		anchors.bottom: parent.bottom
-		active: opacity > 0
-		opacity: root.icon && root.image ? 1 : 0
-
-		sourceComponent: CustomRect {
-			implicitWidth: Config.notifs.sizes.badge
-			implicitHeight: Config.notifs.sizes.badge
-
-			color: root.fillColour
-			radius: Tokens.rounding.full
-
-			FadeIcon {
-				anchors.centerIn: parent
-				size: Math.round(Config.notifs.sizes.badge * 0.6)
-			}
-		}
-
-		Behavior on opacity {
-			Anim {
-				type: root.icon && root.image ? Anim.DefaultEffects : Anim.FastEffects
-			}
-		}
-	}
-
-	Loader {
-		asynchronous: true
-		anchors.fill: parent
-		active: root.progress > 0
-
-		sourceComponent: Shape {
-			preferredRendererType: Shape.CurveRenderer
-
-			ShapePath {
-				id: progressShape
-
-				property real sweep: root.progress * 360
-				property real spacing: root.urgency === NotificationUrgency.Critical ? Tokens.spacing.extraSmall : 0
-
-				capStyle: ShapePath.RoundCap
-				fillColor: "transparent"
-				strokeWidth: 2
-				strokeColor: Colors.palette.m3primary
-
-				PathPolyline {
-					function pointAt(angle: real): point {
-						const dist = bgShape.distanceAtAngle(angle) + progressShape.strokeWidth / 2 + progressShape.spacing;
-						const rad = angle * Math.PI / 180;
-						return Qt.point(root.width / 2 + dist * Math.sin(rad), root.height / 2 - dist * Math.cos(rad));
-					}
-
-					path: {
-						bgShape.morphProgress; // mapToItem-free dependency: re-run when the shape morphs
-						const points = [];
-						for (let angle = 0; angle < progressShape.sweep; angle += 3)
-							points.push(pointAt(angle));
-						points.push(pointAt(progressShape.sweep));
-						return points;
-					}
-				}
-
-				Behavior on sweep {
-					Anim {
-						easing: Tokens.anim.emphasizedDecel
-					}
-				}
-
-				Behavior on spacing {
-					Anim {}
-				}
-
-				Behavior on strokeColor {
-					CAnim {}
-				}
-			}
-		}
-	}
-
-	component FadeIcon: FadeImage {
-		id: fadeIcon
-
-		required property int size
-
-		width: size
-		height: size
-		source: Quickshell.iconPath(root.shownIcon)
-		fillMode: Image.PreserveAspectFit
-		fadeInLargeAnim: Anim.DefaultEffects
-	}
-}

Components/Notifs/NotifGroupCard.qml

@@ -1,124 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Services.Notifications
-import ZShell.Components
-import ZShell.Config
-import ZShell.Services
-import qs.Components
-import qs.Services
-
-CustomRect {
-	id: root
-
-	required property NotificationGroup group
-	required property Flickable container
-	required property bool expanded
-	property bool expandable: true
-	property int baseSurface: 0
-	property int baseLayer: baseSurface
-
-	readonly property list<NotificationRow> notifs: [...group.activeNotifs]
-	readonly property bool single: notifs.length === 1
-	readonly property alias rowPressed: notifList.rowPressed
-	readonly property list<color> surfaces: [Colors.palette.m3surfaceContainer, Colors.palette.m3surfaceContainerHigh, Colors.palette.m3surfaceContainerHighest]
-	readonly property int nonAnimHeight: {
-		const headerHeight = header.implicitHeight + (expanded ? Tokens.spacing.extraSmall : 0);
-		const columnHeight = headerHeight + notifList.layoutHeight;
-		return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + Tokens.padding.medium * 2);
-	}
-
-	signal requestExpand(expand: bool)
-	signal swiped(notif: NotificationRow)
-	signal linkActivated(notif: NotificationRow)
-
-	function surface(offset: int, layer: int): color {
-		return Colors.layer(surfaces[Math.min(baseSurface + offset, surfaces.length - 1)], baseLayer + layer);
-	}
-
-	Component.onCompleted: group.lock(this)
-
-	anchors.left: parent?.left
-	anchors.right: parent?.right
-	implicitHeight: nonAnimHeight
-
-	clip: true
-	radius: Tokens.rounding.large
-	color: group.urgency === NotificationUrgency.Critical && (single || !expanded) ? Colors.palette.m3secondaryContainer : surface(0, 1)
-
-	Behavior on implicitHeight {
-		Anim {}
-	}
-
-	SnapLayout {
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.top: parent.top
-		anchors.margins: Tokens.padding.medium
-
-		objectName: "notif-content"
-		orientation: Qt.Horizontal
-		spacing: Tokens.spacing.medium
-
-		NotifAvatar {
-			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-			Layout.topMargin: root.expanded && !root.single ? header.implicitHeight + Tokens.spacing.extraSmall + Tokens.padding.extraSmall : 0
-			owner: root.expanded ? root.notifs[0] ?? root.group : root.group
-			image: root.expanded ? root.notifs[0]?.image ?? "" : root.group.image
-			icon: root.expanded ? root.notifs[0]?.appIcon ?? "" : root.group.appIcon
-			urgency: root.expanded ? root.notifs[0]?.urgency ?? NotificationUrgency.Normal : root.group.urgency
-			lowFillColour: root.surface(2, 2)
-			summary: root.notifs[0]?.summary ?? ""
-			progress: (root.notifs[0]?.progress ?? -1) / 100
-
-			Behavior on Layout.topMargin {
-				Anim {}
-			}
-		}
-
-		Column {
-			Layout.fillWidth: true
-			spacing: root.expanded ? Tokens.spacing.extraSmall : 0
-
-			Behavior on spacing {
-				Anim {}
-			}
-
-			NotifGroupHeader {
-				id: header
-
-				anchors.left: parent.left
-				anchors.right: parent.right
-				appName: root.group.appName
-				single: root.single
-				timeStr: root.notifs[0]?.timeStr ?? ""
-				count: root.notifs.length
-				urgency: root.group.urgency
-				pillColour: root.surface(1, 2)
-				expandable: root.expandable
-				expanded: root.expanded
-				onToggle: root.requestExpand(!root.expanded)
-			}
-
-			NotifGroupList {
-				id: notifList
-
-				notifs: root.notifs
-				expanded: root.expanded
-				single: root.single
-				headerHeight: header.implicitHeight
-				headerTitleWidth: header.titleWidth
-				expandable: root.expandable
-				container: root.container
-				itemColour: root.surface(1, 2)
-				avatarColour: root.surface(2, 2)
-				buttonColour: root.surface(2, 3)
-				onRequestExpand: expand => root.requestExpand(expand)
-				onSwiped: notif => root.swiped(notif)
-				onLinkActivated: notif => root.linkActivated(notif)
-			}
-		}
-	}
-}

Components/Notifs/NotifGroupHeader.qml

@@ -1,156 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell.Services.Notifications
-import ZShell.Components
-import ZShell.Config
-import qs.Components
-import qs.Services
-
-Item {
-	id: root
-
-	required property string appName
-	required property bool single
-	required property string timeStr
-	required property int count
-	required property int urgency
-	required property color pillColour
-	required property bool expandable
-	required property bool expanded
-	readonly property alias titleWidth: appName.width
-
-	readonly property color expandBtnTextColour: urgency === NotificationUrgency.Critical && !single ? Colors.palette.m3onPrimary : Colors.palette.m3onSurfaceVariant
-
-	signal toggle
-
-	implicitHeight: Math.max(appName.implicitHeight, time.implicitHeight, pill.implicitHeight)
-	objectName: "notif-header"
-
-	CustomText {
-		id: appName
-
-		anchors.left: parent.left
-		anchors.right: time.left
-		anchors.rightMargin: Tokens.spacing.small
-		anchors.verticalCenter: parent.verticalCenter
-
-		opacity: root.single && !root.expanded ? 0 : 1
-		text: root.appName
-		color: Colors.palette.m3onSurfaceVariant
-		font: Tokens.font.body.small
-		elide: Text.ElideRight
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-	}
-
-	CustomText {
-		id: time
-
-		anchors.right: pill.left
-		anchors.rightMargin: Tokens.spacing.small
-		anchors.verticalCenter: parent.verticalCenter
-
-		animate: true
-		text: root.timeStr
-		color: {
-			const col = root.urgency === NotificationUrgency.Critical && (root.single || !root.expanded) ? Colors.palette.m3secondary : Colors.palette.m3outline;
-			return root.expanded && !root.single ? Qt.alpha(col, 0) : col;
-		}
-		font: Tokens.font.body.small
-	}
-
-	CustomRect {
-		id: pill
-
-		property real horizontalPadding: root.single ? implicitHeight - expandIcon.implicitWidth : Tokens.padding.large
-		property real countSpan: root.single ? 0 : groupCount.implicitWidth + Tokens.spacing.extraSmall
-		property real iconInset: root.single ? 0 : Tokens.padding.extraSmall / 2
-
-		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
-
-		enabled: root.expandable
-		// StateLayer inherits this through its parent.enabled binding, so a
-		// non-expandable group gets no hover, ripple, or cursor.
-
-		implicitWidth: horizontalPadding + countSpan + (root.expandable ? expandIcon.implicitWidth : 0)
-		implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall
-
-		color: {
-			const c = root.urgency === NotificationUrgency.Critical ? Colors.palette.m3primary : root.pillColour;
-			return root.single ? Qt.alpha(c, 0) : c;
-		}
-		radius: Tokens.rounding.full
-
-		StateLayer {
-			color: root.expandBtnTextColour
-			onClicked: root.toggle()
-		}
-
-		Item {
-			anchors.left: parent.left
-			anchors.leftMargin: pill.horizontalPadding / 2 + pill.iconInset
-			anchors.verticalCenter: parent.verticalCenter
-
-			objectName: "notif-expand"
-
-			implicitWidth: groupCount.implicitWidth
-			implicitHeight: groupCount.implicitHeight
-			opacity: root.single ? 0 : 1
-
-			CustomText {
-				id: groupCount
-
-				animate: true
-				text: root.count
-				color: root.expandBtnTextColour
-				font: Tokens.font.body.small
-			}
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-		}
-
-		MaterialIcon {
-			id: expandIcon
-
-			anchors.right: parent.right
-			anchors.rightMargin: pill.horizontalPadding / 2 - pill.iconInset
-			anchors.verticalCenter: parent.verticalCenter
-			anchors.verticalCenterOffset: root.expanded && !root.single ? -Tokens.padding.extraSmall / 2 : 0
-
-			visible: root.expandable
-			text: "expand_more"
-			color: root.expandBtnTextColour
-			rotation: root.expanded ? 180 : 0
-
-			Behavior on rotation {
-				Anim {}
-			}
-
-			Behavior on anchors.verticalCenterOffset {
-				Anim {}
-			}
-		}
-
-		Behavior on horizontalPadding {
-			Anim {}
-		}
-
-		Behavior on countSpan {
-			Anim {}
-		}
-
-		Behavior on iconInset {
-			Anim {}
-		}
-	}
-}

Components/Notifs/NotifGroupList.qml

@@ -1,152 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import ZShell.Components
-import ZShell.Config
-import ZShell.Services
-import qs.Components
-import qs.Services
-
-LazyListView {
-	id: root
-
-	required property list<NotificationRow> notifs
-	required property bool expanded
-	required property bool expandable
-	required property bool single
-	required property Flickable container
-	property real headerHeight
-	property real headerTitleWidth
-	required property color itemColour
-	required property color avatarColour
-	required property color buttonColour
-	readonly property bool rowPressed: pressedRows > 0
-	property int pressedRows
-
-	signal requestExpand(expand: bool)
-	signal swiped(notif: NotificationRow)
-	signal linkActivated(notif: NotificationRow)
-
-	anchors.left: parent.left
-	anchors.right: parent.right
-	implicitHeight: contentHeight
-
-	spacing: Math.round(Tokens.spacing.extraSmall)
-	asynchronous: true
-
-	readyDelay: 1
-	cacheBuffer: 400
-	removeDuration: Tokens.anim.durations.normal
-
-	useCustomViewport: true
-	viewport: {
-		tWatcher.transform; // mapToItem is not reactive so use this to trigger updates
-		return Qt.rect(0, container.contentY - mapToItem(container.contentItem, 0, 0).y, width, container.height);
-	}
-
-	model: ScriptModel {
-		// Spread, not `as Array`: `notifs` is a list<NotificationRow> property,
-		// and reading it yields a list reference that ScriptModel cannot assign.
-		values: root.expanded ? [...root.notifs] : [...root.notifs].slice(0, Config.notifs.groupPreviewNum);
-	}
-
-	delegate: Component {
-		NotifSwipeArea {
-			id: notif
-
-			required property int index
-			required property NotificationRow modelData
-
-			Component.onCompleted: modelData.ref(this)
-			Component.onDestruction: {
-				if (pressed)
-					root.pressedRows--;
-			}
-
-			LazyListView.preferredHeight: LazyListView.removing ? 0 : notifInner.nonAnimHeight
-			LazyListView.visibleHeight: LazyListView.removing ? 0 : notifInner.implicitHeight
-			implicitHeight: notifInner.implicitHeight
-
-			opacity: LazyListView.removing || LazyListView.adding ? 0 : 1
-			scale: LazyListView.removing || LazyListView.adding ? 0.7 : 1
-
-			expanded: root.expanded
-			expandable: root.expandable
-			dragExpand: false
-			hoveringLink: !!notifInner.body?.hoveredLink
-			enabled: root.expandable && root.expanded && !LazyListView.removing
-			acceptedButtons: root.single ? Qt.NoButton : Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-
-			onPressedChanged: root.pressedRows += pressed ? 1 : -1
-			onRequestExpand: expand => root.requestExpand(expand)
-			onSwiped: root.swiped(modelData)
-			onDismissed: modelData.dismiss()
-
-			Connections {
-				function onClosedChanged(): void {
-					if (notif.modelData.closed)
-						closeAnim.start();
-				}
-
-				target: notif.modelData
-			}
-
-			ParallelAnimation {
-				id: closeAnim
-
-				Anim {
-					type: Anim.DefaultEffects
-					target: notif
-					property: "opacity"
-					to: 0
-				}
-				Anim {
-					target: notif
-					property: "x"
-					to: notif.x >= 0 ? notif.width : -notif.width
-				}
-			}
-
-			NotifItem {
-				id: notifInner
-
-				anchors.fill: parent
-				modelData: notif.modelData
-				expanded: root.expanded
-				single: root.single
-				ready: notif.LazyListView.ready
-				headerHeight: root.headerHeight
-				headerTitleWidth: root.headerTitleWidth
-				showAvatar: notif.index > 0
-				expandedColour: root.itemColour
-				avatarColour: root.avatarColour
-				buttonColour: root.buttonColour
-				onLinkActivated: root.linkActivated(notif.modelData)
-			}
-
-			Behavior on y {
-				enabled: notif.LazyListView.ready
-
-				Anim {}
-			}
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-
-			Behavior on scale {
-				Anim {}
-			}
-		}
-	}
-
-	TransformWatcher {
-		id: tWatcher
-
-		a: root.container.contentItem
-		b: root
-	}
-}

Components/Notifs/NotifItem.qml

@@ -1,287 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell.Services.Notifications
-import ZShell.Components
-import ZShell.Config
-import ZShell.Services
-import qs.Components
-import qs.Services
-
-CustomRect {
-	id: root
-
-	required property NotificationRow modelData
-	required property bool expanded
-	required property color expandedColour
-	required property color avatarColour
-	required property color buttonColour
-	property bool showAvatar: true
-	property bool single: false
-	property bool ready: true
-	property real headerHeight
-	property real headerTitleWidth
-
-	readonly property bool critical: modelData.urgency === NotificationUrgency.Critical
-	readonly property bool low: modelData.urgency === NotificationUrgency.Low
-	readonly property CustomText body: (expandedContent.item as ExpandedBody)?.body ?? null
-	readonly property real padding: single ? 0 : Tokens.padding.medium
-	readonly property real headerSummaryOffset: -(headerHeight + summaryHeightMetrics.height) / 2
-	readonly property real inset: expanded ? padding : 0
-	readonly property real summaryOffset: single && !expanded ? headerSummaryOffset : inset
-	readonly property real nonAnimHeight: {
-		if (!expanded)
-			return summaryHeightMetrics.height;
-		const contentHeight = summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + padding * 2;
-		return single ? contentHeight : Math.max(contentHeight, Config.notifs.sizes.image + Tokens.padding.extraSmall * 2);
-	}
-
-	signal linkActivated
-
-	implicitHeight: nonAnimHeight
-
-	radius: Tokens.rounding.medium
-	color: {
-		const c = root.critical ? Colors.palette.m3secondaryContainer : root.expandedColour;
-		return expanded && !single ? c : Qt.alpha(c, 0);
-	}
-
-	TextMetrics {
-		id: summaryHeightMetrics
-
-		font: dummySummary.font
-		text: " " // Use this height to prevent weird characters from changing the line height
-	}
-
-	TextMetrics {
-		id: summaryMetrics
-
-		font: dummySummary.font
-		text: root.modelData.summary
-		elide: Text.ElideRight
-		elideWidth: root.single ? root.headerTitleWidth : root.width
-	}
-
-	WrappedLoader {
-		id: avatar
-
-		shouldBeActive: root.expanded && root.showAvatar
-		anchors.top: parent.top
-		anchors.left: parent.left
-		anchors.topMargin: Tokens.padding.extraSmall
-		anchors.leftMargin: -(Config.notifs.sizes.image + Tokens.spacing.medium)
-
-		sourceComponent: NotifAvatar {
-			owner: root.modelData
-			image: root.modelData.image
-			icon: root.modelData.appIcon
-			urgency: root.modelData.urgency
-			lowFillColour: root.avatarColour
-			summary: root.modelData.summary
-			progress: root.modelData.progress / 100
-		}
-	}
-
-	WrappedLoader {
-		id: compactSummary
-
-		shouldBeActive: !root.expanded
-		anchors.top: parent.top
-		anchors.left: parent.left
-		anchors.leftMargin: root.inset
-		anchors.topMargin: root.summaryOffset
-
-		sourceComponent: CustomText {
-			animate: root.ready
-			text: summaryMetrics.elidedText
-			color: root.critical ? Colors.palette.m3onSecondaryContainer : root.low ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSurface
-		}
-
-		Behavior on anchors.leftMargin {
-			Anim {}
-		}
-
-		Behavior on anchors.topMargin {
-			Anim {}
-		}
-	}
-
-	CustomText {
-		id: dummySummary
-
-		anchors.top: parent.top
-		anchors.left: parent.left
-
-		visible: false
-		text: root.modelData.summary
-	}
-
-	WrappedLoader {
-		id: compactBody
-
-		shouldBeActive: !root.expanded
-		anchors.top: parent.top
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.leftMargin: root.inset + (root.single ? 0 : dummySummary.width + Tokens.spacing.small)
-		anchors.topMargin: root.single && root.expanded ? summary.implicitHeight + expandedContent.anchors.topMargin : root.inset
-
-		sourceComponent: CustomText {
-			text: root.modelData.body.replace(/\n/g, " ")
-			color: root.critical ? Colors.palette.m3secondary : root.low ? Colors.palette.m3outline : Colors.palette.m3onSurfaceVariant
-			elide: Text.ElideRight
-		}
-
-		Behavior on anchors.leftMargin {
-			Anim {}
-		}
-
-		Behavior on anchors.topMargin {
-			Anim {}
-		}
-	}
-
-	WrappedLoader {
-		id: summary
-
-		shouldBeActive: root.expanded
-		anchors.top: parent.top
-		anchors.left: parent.left
-		anchors.leftMargin: root.inset
-		anchors.topMargin: root.summaryOffset
-		width: root.width - root.padding * 2 - timeStr.implicitWidth - Tokens.spacing.small
-
-		sourceComponent: CustomText {
-			text: root.modelData.summary
-			color: root.critical ? Colors.palette.m3onSecondaryContainer : root.low ? Colors.palette.m3onSurfaceVariant : Colors.palette.m3onSurface
-			wrapMode: Text.WordWrap
-		}
-
-		Behavior on anchors.leftMargin {
-			Anim {}
-		}
-
-		Behavior on anchors.topMargin {
-			Anim {}
-		}
-	}
-
-	WrappedLoader {
-		id: timeStr
-
-		shouldBeActive: root.expanded && !root.single
-		anchors.top: parent.top
-		anchors.right: parent.right
-		anchors.margins: root.inset
-
-		sourceComponent: CustomText {
-			animate: true
-			text: root.modelData.timeStr
-			color: root.critical ? Colors.palette.m3secondary : Colors.palette.m3outline
-			font: Tokens.font.body.small
-		}
-
-		Behavior on anchors.margins {
-			Anim {}
-		}
-	}
-
-	WrappedLoader {
-		id: expandedContent
-
-		shouldBeActive: root.expanded
-		anchors.top: summary.bottom
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.margins: root.inset
-		anchors.topMargin: Tokens.spacing.extraSmall
-
-		sourceComponent: ExpandedBody {}
-
-		Behavior on anchors.margins {
-			Anim {}
-		}
-	}
-
-	Behavior on implicitHeight {
-		Anim {}
-	}
-
-	component ExpandedBody: SnapLayout {
-		readonly property alias body: bodyText
-
-		orientation: Qt.Vertical
-		spacing: Tokens.spacing.medium
-
-		CustomText {
-			id: bodyText
-
-			Layout.fillWidth: true
-			textFormat: Text.MarkdownText
-			text: root.modelData.body.replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body here! :/")
-			color: root.critical ? Colors.palette.m3secondary : root.low ? Colors.palette.m3outline : Colors.palette.m3onSurfaceVariant
-			wrapMode: Text.WordWrap
-
-			onLinkActivated: link => {
-				Qt.openUrlExternally(link);
-				root.linkActivated();
-			}
-		}
-
-		NotifActions {
-			Layout.fillWidth: true
-			notif: root.modelData
-			buttonColour: root.buttonColour
-		}
-	}
-	component WrappedLoader: Loader {
-		id: comp
-
-		required property bool shouldBeActive
-
-		active: false
-		opacity: 0
-
-		// Makes the loader load on the same frame shouldBeActive becomes true, which ensures size is set
-		states: State {
-			name: "active"
-			when: comp.shouldBeActive
-
-			PropertyChanges {
-				comp.opacity: 1
-				comp.active: true
-			}
-		}
-		transitions: [
-			Transition {
-				from: ""
-				to: "active"
-
-				SequentialAnimation {
-					PropertyAction {
-						property: "active"
-					}
-					Anim {
-						type: Anim.DefaultEffects
-						property: "opacity"
-					}
-				}
-			},
-			Transition {
-				from: "active"
-				to: ""
-
-				SequentialAnimation {
-					Anim {
-						type: Anim.DefaultEffects
-						property: "opacity"
-					}
-					PropertyAction {
-						property: "active"
-					}
-				}
-			}
-		]
-	}
-}

Components/Notifs/NotifSwipeArea.qml

@@ -1,70 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import ZShell.Config
-import qs.Components
-
-MouseArea {
-	id: root
-
-	required property bool expanded
-	property bool expandable: true
-	property bool dragExpand: expandable
-	property bool hoveringLink
-	property int startY
-	property real lastX
-	property real lastMoveTime
-	property real velocity
-
-	signal swiped
-	signal dismissed
-	signal requestExpand(expand: bool)
-
-	hoverEnabled: true
-	cursorShape: hoveringLink ? Qt.PointingHandCursor : pressedButtons === Qt.LeftButton ? Qt.ClosedHandCursor : undefined
-	acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-	preventStealing: dragExpand
-
-	drag.target: pressedButtons === Qt.LeftButton ? this : null
-	drag.axis: Drag.XAxis
-
-	onPressed: event => {
-		startY = event.y;
-		lastX = x;
-		lastMoveTime = Date.now();
-		velocity = 0;
-		if (event.button === Qt.RightButton && expandable)
-			requestExpand(!expanded);
-		else if (event.button === Qt.MiddleButton)
-			dismissed();
-	}
-	onPositionChanged: event => {
-		if (pressedButtons !== Qt.LeftButton)
-			return;
-
-		const now = Date.now();
-		const dt = now - lastMoveTime;
-		if (dt > 0) {
-			velocity = (velocity + (x - lastX) / dt * 1000) / 2;
-			lastX = x;
-			lastMoveTime = now;
-		}
-
-		if (dragExpand) {
-			const diffY = event.y - startY;
-			if (Math.abs(diffY) > Config.notifs.expandThreshold)
-				requestExpand(diffY > 0);
-		}
-	}
-	onReleased: {
-		const flung = Date.now() - lastMoveTime < 100 && Math.sign(velocity) === Math.sign(x) && Math.abs(velocity) > Config.notifs.clearVelocity;
-		if (!flung && Math.abs(x) < width * Config.notifs.clearThreshold)
-			x = 0;
-		else
-			swiped();
-	}
-
-	Behavior on x {
-		Anim {}
-	}
-}

Components/PathMenu.qml

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

Components/PathViewMenu.qml

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

Components/ScreenState.qml

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

Components/SearchBar.qml

@@ -1,95 +0,0 @@
-import QtQuick
-import ZShell.Config
-import qs.Services
-
-TextFieldBase {
-	id: root
-
-	readonly property alias bg: bg
-	readonly property alias clearIcon: clearIcon
-	readonly property alias searchIcon: searchIcon
-
-	bottomPadding: Tokens.padding.large
-	leftPadding: searchIcon.width + searchIcon.anchors.leftMargin + Tokens.spacing.small
-	rightPadding: clearIcon.width + clearIcon.anchors.rightMargin + Tokens.spacing.small
-	topPadding: Tokens.padding.large
-
-	background: CustomRect {
-		id: bg
-
-		anchors.fill: parent
-		color: Colors.tPalette.m3surfaceContainer
-		radius: Tokens.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: Tokens.padding.large
-		anchors.verticalCenter: parent.verticalCenter
-		color: Colors.palette.m3onSurfaceVariant
-		fontStyle: Tokens.font.icon.builders.medium.scale(0.9).build()
-		text: "search"
-	}
-
-	IconButton {
-		id: clearIcon
-
-		anchors.right: parent.right
-		anchors.rightMargin: Tokens.padding.small
-		anchors.verticalCenter: parent.verticalCenter
-		enabled: root.text
-		icon: "clear"
-		opacity: root.text ? 1 : 0
-		radius: Tokens.rounding.full
-		radiusMorph: false
-		stateLayer.hoverEnabled: enabled
-		type: IconButton.Text
-
-		Behavior on opacity {
-			Anim {
-				type: Anim.DefaultEffects
-			}
-		}
-
-		onClicked: root.clear()
-	}
-
-	TapHandler {
-		id: tapHandler
-	}
-}

Components/SpinBoxRow.qml

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

Components/SplitButton.qml

@@ -1,149 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import ZShell.Components
-import ZShell.Config
-import qs.Services
-
-Row {
-	id: root
-
-	enum Type {
-		Filled,
-		Tonal
-	}
-
-	property alias active: menu.active
-	property color color: type == SplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
-	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
-	property color disabledTextColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
-	readonly property alias expandBtn: expandBtn
-	property alias expanded: menu.expanded
-	property string fallbackIcon
-	property string fallbackText
-	property real horizontalPadding: Tokens.padding.medium
-	readonly property alias iconLabel: iconLabel
-	readonly property alias label: label
-	readonly property alias menu: menu
-	property alias menuItems: menu.items
-	property bool menuOnTop
-	property real minLeftWidth
-	readonly property alias stateLayer: stateLayer
-	property color textColor: type == SplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
-	readonly property alias textRow: textRow
-	property int type: SplitButton.Filled
-	property real verticalPadding: Tokens.padding.small
-
-	spacing: Math.floor(Tokens.spacing.extraSmall / 2)
-
-	CustomRect {
-		bottomRightRadius: Tokens.rounding.medium / 2
-		color: !root.enabled ? root.disabledColor : root.color
-		implicitHeight: expandBtn.implicitHeight
-		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
-		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
-		topRightRadius: Tokens.rounding.medium / 2
-
-		StateLayer {
-			id: stateLayer
-
-			bottomRightRadius: parent.bottomRightRadius
-			color: root.textColor
-			enabled: root.enabled
-			topRightRadius: parent.topRightRadius
-
-			onClicked: root.active?.clicked()
-		}
-
-		SnapLayout {
-			id: textRow
-
-			anchors.centerIn: parent
-			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
-			spacing: Tokens.spacing.small
-
-			MaterialIcon {
-				id: iconLabel
-
-				Layout.alignment: Qt.AlignVCenter
-				animate: true
-				color: !root.enabled ? root.disabledTextColor : root.textColor
-				fill: 1
-				text: root.active?.activeIcon ?? root.fallbackIcon
-			}
-
-			CustomText {
-				id: label
-
-				Layout.alignment: Qt.AlignVCenter
-				Layout.preferredWidth: implicitWidth
-				animate: true
-				clip: true
-				color: !root.enabled ? root.disabledTextColor : root.textColor
-				text: root.active?.activeText ?? root.fallbackText
-
-				Behavior on Layout.preferredWidth {
-					Anim {
-						type: Anim.Emphasized
-					}
-				}
-			}
-		}
-	}
-
-	CustomRect {
-		id: expandBtn
-
-		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.medium / 2
-
-		bottomLeftRadius: rad
-		color: !root.enabled ? root.disabledColor : root.color
-		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
-		implicitWidth: implicitHeight
-		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
-		topLeftRadius: rad
-
-		Behavior on rad {
-			Anim {
-			}
-		}
-
-		StateLayer {
-			id: expandStateLayer
-
-			color: root.textColor
-			enabled: root.enabled
-			rect.bottomLeftRadius: parent.bottomLeftRadius
-			rect.topLeftRadius: parent.topLeftRadius
-
-			onClicked: root.expanded = !root.expanded
-		}
-
-		MaterialIcon {
-			id: expandIcon
-
-			anchors.centerIn: parent
-			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
-			color: !root.enabled ? root.disabledTextColor : root.textColor
-			rotation: root.expanded ? 180 : 0
-			text: "expand_more"
-
-			Behavior on anchors.horizontalCenterOffset {
-				Anim {
-				}
-			}
-			Behavior on rotation {
-				Anim {
-				}
-			}
-		}
-	}
-
-	Menu {
-		id: menu
-
-		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
-		attachTo: expandBtn
-		marginY: Tokens.spacing.small * (root.menuOnTop ? -1 : 1)
-		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
-	}
-}

Components/StateLayer.qml

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

Components/TextAreaBase.qml

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

Components/TextButton.qml

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

Components/TextEditBase.qml

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

Components/TextFieldBase.qml

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

Components/Toast/ToastItem.qml

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

Components/Toast/Toasts.qml

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

Components/VerticalFadeFlickable.qml

@@ -1,74 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-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
-	readonly property real dpr: Math.ceil((QsWindow.window as QsWindow)?.devicePixelRatio ?? 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.textureSize: Qt.size(width * dpr, height * dpr)
-	layer.effect: Mask {
-		maskSource: mask
-
-		Rectangle {
-			id: mask
-
-			anchors.fill: parent
-			layer.enabled: true
-			visible: false
-
-			gradient: Gradient {
-				orientation: Gradient.Vertical
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, root.topFadeOpacity)
-					position: 0
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, 1)
-					position: root.fadeAmount
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, 1)
-					position: 1 - root.fadeAmount
-				}
-
-				GradientStop {
-					color: Qt.rgba(0, 0, 0, root.bottomFadeOpacity)
-					position: 1
-				}
-			}
-		}
-	}
-	Behavior on topFadeOpacity {
-		Anim {
-			type: Anim.SlowEffects
-		}
-	}
-}

Components/VerticalFadeListView.qml

@@ -1,106 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import qs.Effects
-
-CustomListView {
-	id: root
-
-	property real endFadeOpacity: fadeShouldBeActive(false) ? 0 : 1
-	property bool fadeEnabled: true
-	property real fadeAmount: 0.1
-	property real fadeThreshold: 0.0
-	readonly property bool horizontal: orientation === ListView.Horizontal
-	property real startFadeOpacity: fadeShouldBeActive(true) ? 0 : 1
-
-	function contentSize(): real {
-		return horizontal ? contentWidth : contentHeight;
-	}
-
-	function fadeShouldBeActive(isStart: bool): bool {
-		if (!fadeEnabled)
-			return false;
-
-		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 - fadeThreshold : bottomMargin - fadeThreshold;
-	}
-
-	function marginStart(): real {
-		return horizontal ? leftMargin - fadeThreshold : topMargin - fadeThreshold;
-	}
-
-	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/VerticalScrollBarTrack.qml

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

Components/WavyTopRect.qml

@@ -1,47 +0,0 @@
-import QtQuick
-import QtQuick.Shapes
-import ZShell.Config
-import qs.Services
-
-Shape {
-	id: root
-
-	property real amplitude: 3
-	property color color: Colors.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/AccentColor.qml

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

Config/Appearance.qml

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

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

Config/BackgroundConfig.qml

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

Config/BarConfig.qml

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

Config/Colors.qml

@@ -0,0 +1,5 @@
+import Quickshell.Io
+
+JsonObject {
+	property string schemeType: "vibrant"
+}